CSSを勉強中の方の傾向として、displayやpaddingなどの使い方が分かっていても、レイアウトの仕方でつまずきます。プロパティは知っておく必要はありますが、レイアウトの基本は同じぐらい大切です。 私は、頭の中でレイアウトをいくつかのフィルターを通しながらコーディングしてます。そのレイアウトの描き方を解説します。 (解説をわかりやすくするために細かい部分は省いてます) div要素の見え方 <div>テキスト</div> <div>テキスト</div> HTMLやCSSを書いている方ならお馴染みの 「div要素」 です。 CSSを適用していないdiv要素を見た時にどう見えているでしょう? ブラウザで見た時は、垂直に並んでいます。 では、なぜ垂直に並ぶのでしょうか? これを論理的に説明できることが頭の中のフィルターを通してレイアウトを描くコツです。 UAスタイルシートのち、通常フロー リ
![脳内フィルターで見るCSSレイアウト - kojika17](https://cdn-ak-scissors.b.st-hatena.com/image/square/abaa13c8e836b378977eb131ef5a4f6d726842c6/height=288;version=1;width=512/https%3A%2F%2Fkojika17.com%2Fog.png)