お品書き
書き直し中…
とりあえず、中へどうぞ
↓↓↓
スポンサーリンク

CSS

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;」だと縦並び(上から下へ) 例1 row...
WEBデザイン

Flexbox 7 (グリッドレイアウトVer2)

フレックスボックスを使ったタイル状のインデックスページ、改訂版 幅を変えて段組みを簡単に変更できます。 また、order の設定でタイルブロックの配置を自由に変えられるので、レイアウト変更が簡単にできてよいですね。 これ、2カラム・3カラム...
WEBデザイン

Flexbox 6 (グリッドレイアウト)

Flexboxレイアウトで、3カラムデザインなのだけど、タイル状配置を利用したレイアウトを考えてみた。 (こういうタイル状レイアウトを「グリッドレイアウト」っていうらしい) TITLE TEST1 Lorem ipsum dolor sit...
WEBデザイン

Flexboxに挑戦 5 (2カラム/3カラム)

2カラム・3カラムのレイアウトを作ってみる。(※初めてやったので参考程度にお願いします。) 2カラム TITLE カテゴリ カテゴリ カテゴリ カテゴリ カテゴリ カテゴリ 本文 ひとまず何はともあれ、そうした幸福・仕合せのための偽りは、尊...
WEBデザイン

Flexboxに挑戦 4 (縦方向の中央寄せ)

フレックスボックスは左右・中央寄せがとても簡単 これ、理解したらとても便利だと思いました。 ん?中央寄せなんて「text-align:center;」で済む話では? と思うかも知れませんが、縦方向の中央寄せは難しいですよね。 縦位置の中央寄...
WEBデザイン

Flexboxに挑戦 3 (grow/shrink/basisとは)

フレックスボックスの、子アイテムのスタイルでは、ショートハンドとして、このような書き方が推奨されているとか。 flex:<因数1> <因数2> <因数3>; これは何を意味しているかというと 因数1 ⇒ flex-grow:<数値>; 因数...
WEBデザイン

フレックスボックスに挑戦 2 (改行問題)

フレックスボックスは、中に数が定まっていない複数のアイテムが詰め込まれるような状況が得意ということですかね。(うまくレイアウトを調整して埋めてくれるような感じ) #main .smpl1{ width:300px; border:2px s...
WEBデザイン

フレックスボックスに挑戦(Flexboxとは?)

★フレックスボックスとは? フレックスボックスを使うと、従来のFLOATなどを使ったレイアウトより、少しだけ自由度が高い配置ができる。 ※フレックスボックスを使うと、FloatをかけてあとでClearするための空の領域を作ったりする必要がな...
WEBデザイン

【CSS】回り込み(float)解除の3つの方法

今更ですが、float解除の3つの方法、覚書 flaotを使って回り込みをした場合、floatを解除してやらないと、思わぬところでレイアウトが崩れる場合がありますね。(親要素の中にある子要素にfloatプロパティが設定されていると、内容をも...