CSSを勉強中の方の傾向として、displayやpaddingなどの使い方が分かっていても、レイアウトの仕方でつまずきます。プロパティは知っておく必要はありますが、レイアウトの基本は同じぐらい大切です。 私は、頭の中でレイアウトをいくつかのフィルターを通しながらコーディングしてます。そのレイアウトの描き方を解説します。 （解説をわかりやすくするために細かい部分は省いてます） div要素の見え方 <div>テキスト</div> <div>テキスト</div> HTMLやCSSを書いている方ならお馴染みの 「div要素」 です。 CSSを適用していないdiv要素を見た時にどう見えているでしょう？ ブラウザで見た時は、垂直に並んでいます。 では、なぜ垂直に並ぶのでしょうか？ これを論理的に説明できることが頭の中のフィルターを通してレイアウトを描くコツです。 UAスタイルシートのち、通常フロー リ

以前に 劇薬の The New CSS Reset という記事を書き、その中で「UAスタイルシートを理解していれば、どんなCSSリセットも使える」と言いました。 ただ改めてUAスタイルシートの事を検索にかけても「ブラウザのデフォルトのスタイルシートです」で終わる記事が多く、これでUAスタイルシートを理解しろというのは無理な話です。 そこで後進のために、UAスタイルシートとは何なのか？ UAスタイルシートとリセットCSSの付き合い方を文章として残しておきます。 UAスタイルシートとは？ UAスタイルシートとは、User Agent Style Sheet の略で、webブラウザがデフォルトで持っているスタイルシートのことです。これは、HTML要素をどのように表示するか、振る舞いを持たせるかを定義したものです。 スタイルシートの種類と階層 スタイルシートといっても、いくつかあります。 多くのド