[コーディングの基礎] css記述の理解を深めるわかりやすい手順

html・cssコーディングではほとんどの場合、まずhtmlを記述してからcssへの記述を行います。
今回はわかりやすい手順で記述することでcss記述の理解を深めることを目的とした内容です。

手順

まず手順の解説より。

1. htmlコーディングを行ってからcssコーディングを行う。
2. cssにはひとまず、すべての「セレクタ」をhtmlコーディングを行なった入れ子の構造そのままで記述する。
3. すべてのセレクタを書き終えてから、それぞれのセレクタの「プロパティ・値」を記述する。

つまり、htmlコーディングによって確認できる入れ子構造のセレクタを先にすべて記述してから、
それぞれのセレクタの「プロパティ・値」を記述するという手順です。

html記述例&リスト表示

では例として、以下のheaderタグ内の入れ子構造を使用してcssの記述を行いたいと思います。

See the Pen わかりやすいcss(記述例) by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

ポイントとしては以下です。

1. 一番上に「headerタグ」がある。
2. ①の直下の階層に「.wrapper」と名前のついた「divタグ」がある。
3. ②の直下の階層に「.logo」と名前のついた「h1タグ」がある。
4. ③と同じく、②の直下の階層に「navタグ」がある。
5. ④の直下の階層に「ulタグ」がある。
6. ⑤の直下の階層に「liタグ」がある。
7. ⑥の直下の階層に「aタグ」がある。

入れ子の構造

上記の入れ子の構造をhtmlファイルとcssファイルでそれぞれに置き換えたリストにすると以下です。
なおcssでの記述はCSSの基本的な考え方と記述方法に従い、「セレクタ」に「 {}(波カッコ)」という記述です。

css記述例

そして先ほど理解した入れ子の構造をそのままcssに記述すると以下のようになります。

See the Pen わかりやすいcss(記述例) by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

つまり、htmlタグの構造をそのままcssのセレクタに置き換えてcssに記述しましょう。
こうすることで、存在する要素や入れ子の構造などの全体像を確認でき、可能な限りコーディングのミスを防ぎ、もしミスをしても早い段階でそれに気づくことが可能です。