このページについて
このページでは、ホームページを作る上で必要なCSSレイアウト機能のいくつかを、 イマドキのレイアウトと従来のレイアウトに分けて紹介します。
イマドキのCSSレイアウト
Flexboxレイアウト
要素を行もしくは列として並べる一次元的なレイアウト方法で、 折り返しできるのが最大の特徴。 ナビゲーションのレイアウトでよく使われる。
1
2
3
4
5
6
Gridレイアウト
Excelライクな二次元的なレイアウト方法で、 要素の順番に関係なく、視覚的にレイアウトできる のが最大の特徴。複雑に絡み合ったレイアウトでよく使われる。
1
2
3
4
5
6
7
一見テトリスのT字やL字のような自由なレイアウトができそうに思えるが、 四角以外のレイアウトを行いたい場合は2つ以上の要素を重ねる必要がある。
従来のCSSレイアウト
以下では、FlexboxやGridレイアウトが標準化するまで一般的に使われていたレイアウト方法を紹介します。 初心者の方は、「レイアウトはFlexboxかGrid!」という認識でOKです。
Floatレイアウト
Floatプロパティは本来、画像などの要素を浮動させ、文章を回り込みさせるためのプロパティであり、 レイアウト方法として使われなくなった現在でも、本来の用途ではよく使われる。
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought. It wasn't a dream. His room, a proper human
Tableレイアウト
table要素は本来、表を作るためのプロパティであり、CSSが無かった時代の名残りからレイアウトとして使われてきたが、 2000年以前に勧告されたHTML4からレイアウト目的での使用が非推奨とされている。（つまり使うな!）