WEBデザイン テーブルに余白ができてしまう原因
結論から言うと、自分の下らないミスなんですが このブログの記事の中で、テーブルを使って表を作った際に、全体の幅に合わせてセルの幅が伸縮してくれず、妙な余白ができてしまう状態になっていました。 こんな感じ #main table.test{b...
WEBデザイン WEBデザイン Flexbox 14 (Flexbox非対応ブラウザのためにFloatを入れてみる)
Flexboxに挑戦の9番目の記事で、Flexbox 非対応ブラウザで見た場合、回り込みが解除されて縦一列になってしまうという記事を書きました。 ブラウザは、基本的には、「知らないスタイル指定は無視する」という動作をするようなので、Flex...
WEBデザイン Flexbox 13 カレンダー／ページネイションの作り方
Flexbox の基本的な使い方はだいたい分かったけれど。 せっかくなので、これを何かに活用できないか？考えてみた。 （WEBレイアウトなんて、それが仕事の人でもなければ、そうそうやるもんでもないですしね。。。） タイル状に埋め尽くすように...
WEBデザイン Flexbox 12 (アイテムの中の要素の縦方向の中央寄せ)
まず、下記のように子アイテムを用意 TEST これを内包する親領域のフレックスボックスを作成 （width: 320px;height: 160px;） TEST TEST TEST #main .parent{width:320px;he...
WEBデザイン スマホでの見え方をPC上のブラウザから確認するには
サイトのデザインをしていて、スマホでの見え方を確認したいとき 一番確実なのは、スマホで見てみれば良いわけですが(笑) しかし、スマホと言ってもAndroidとiOSがあるわけで、また機種によって画面のサイズも違っていますので・・・ 自分が持...
生き方・人生・人間関係 ｢知能｣｢記憶力｣は加齢によって低下しない。違いは単に○○○○の量だった
三行でまとめ ２０代と６０代で忘却の度合いに差はなかった。 若い人と高齢者の違いは「復習」「反復」の量だった。 それより問題なのは「学習意欲」の低下（＝老化によるホルモンの減少） これを防ぐには、前頭葉を鍛える事が効果的 前頭葉を鍛えるには...
WEBデザイン Flexbox 11 (表示順序を入れ替える)
フレックスボックスのアイテムは、「order」を使って順番を自由に入替えられます。これは結構便利かも。レイアウトの自由度が増しますね。 例：下記のように、配置したとして・・・ 1 2 3 4 5 6 7 8 9 10 11 各アイテムに下記...
WEBデザイン Flexbox 10 (スマホ対応 - レスポンシブデザインに)
スマホのブラウザはFlexboxへの対応が一番遅れていたようですが、現在はだいたい対応しているようですね。 なので、ここでは非対応ブラウザへ対応させるという話ではなく、レスポンシブデザインにしてみる実験。 スマホに対応せるには、メディアクエ...
WEBデザイン Frexbox 9 (非対応ブラウザで見ると？)
Flexboxはまだ新しい規格なので、ブラウザによって対応状況が異なっているようですね。 最新のブラウザを使ってればそれほど酷く崩れることは無いと思いますが、例によってマイクロソフトは独自路線を行く傾向は相変わらずで、IEだと問題が起きやす...
WEBデザイン Flexbox 8 (並び順と中央寄せ)
「flex-direction」は並び方を横に並ばせるか縦にならばせるかを指定する。 「flex-direction:row;」だと横並び（左から右へ） 「flex-direction:column;」だと縦並び（上から下へ） 例１ row...
WEBデザイン Flexbox 7 (グリッドレイアウトVer2)
フレックスボックスを使ったタイル状のインデックスページ、改訂版 幅を変えて段組みを簡単に変更できます。 また、order の設定でタイルブロックの配置を自由に変えられるので、レイアウト変更が簡単にできてよいですね。 これ、２カラム・３カラム...
WEBデザイン Flexbox 6 (グリッドレイアウト)
Flexboxレイアウトで、３カラムデザインなのだけど、タイル状配置を利用したレイアウトを考えてみた。 （こういうタイル状レイアウトを「グリッドレイアウト」っていうらしい） TITLE TEST1 Lorem ipsum dolor sit...