チャプター12では、メルカリの新着アイテムカード風のプロジェクトで、「人気のカテゴリー」とカテゴリー部分、そして商品カードの1枚目をHTMLで構成しました。
この段階では、複雑化を避けるために、コンテナーとコンテンツの分離のみを意識してHTML要素でコンポーネントを構成しています。
ここまでできている段階で、ひとまずCSSでスタイルの付与を行います。
コンポーネントのスタイル付与
「人気のカテゴリー」とカテゴリー部分までを、まずはスタイル付与してみます。
このようなスタイル付与ができます。
@charset "UTF-8";
* {
padding: 0;
margin: 0;
font-family: Arial, 游ゴシック体, YuGothic, メイリオ, Meiryo, sans-serif;
color: #000000;
}
/* コンテナー */
.popular-header {
margin: 50px auto;
}
/* コンテンツ */
.popular-title {
text-align: center;
padding: 20px 0;
}
/* コンテナー */
.category {
display: flex;
list-style: none;
justify-content: center;
}
/* コンテンツ */
.category-item {
display: inline-block;
padding: 5px 15px;
margin: 0 10px;
background-color: rgb(239, 239, 239);
border-radius: 15px;
font-size: 15px;
font-weight: 600;
}
では、ここで構造とスキンの分離を意識していきます。
CSSのセレクタは、それぞれコンテナーとコンテンツで分けることができていますが、構造とスキンに関してはまだですね。
ここでのコツは、まずスキンから見ていくことです。
スキンが含められている箇所を探すと、以下の箇所が見つかります。
/* 上記省略 */
/* コンテンツ */
.category-item {
display: inline-block;
padding: 5px 15px;
margin: 0 10px;
/* 以下はスキン */
background-color: rgb(239, 239, 239);
border-radius: 15px;
font-size: 15px;
font-weight: 600;
}
カテゴリー1つ1つのい背景色やそのほか見た目に関するスタイルが入っています。
もし、特定のカテゴリーだけ背景色やフォントの太さなどを変更したい場合は、このスキンのスタイル内容を変えたセレクタと、差し替えれば良いということになります。
そのことを踏まえると、これはスキンの新しいセレクタとして、以下のように用意するのが良さそうですね。
/* 上記省略 */
/* コンテンツ */
.category-item {
display: inline-block;
padding: 5px 15px;
margin: 0 10px;
}
/* スキン & コンテンツ */
.category-item-gray {
background-color: rgb(239, 239, 239);
border-radius: 15px;
font-size: 15px;
font-weight: 600;
}
スキン用のセレクタを分けましたので、HTMLにも、変更を加えます。
<!-- 上記省略 -->
<header class="popular-header">
<h1 class="popular-title">人気のカテゴリー</h1>
<ul class="category">
<!-- .category-item-gray 追加 -->
<li class="category-item category-item-gray">レディース</li>
<li class="category-item category-item-gray">メンズ</li>
<li class="category-item category-item-gray">家電・スマホ・カメラ</li>
<li class="category-item category-item-gray">おもちゃ・ホビー・グッズ</li>
</ul>
</header>
スキンに関しては、分離をすることができましたので、最終的な仕上げとして、構造の分離を行います。
CSSファイルに戻りましょう。
ここで構造に該当するセレクタを探します。
/* 構造 & コンテナー */
.popular-header {
margin: 50px auto;
}
/* 構造 & コンテンツ */
.popular-title {
text-align: center;
padding: 20px 0;
}
/* 構造 & コンテナー */
.category {
display: flex;
list-style: none;
justify-content: center;
}
/* 構造 & コンテンツ */
.category-item {
display: inline-block;
padding: 5px 15px;
margin: 0 10px;
}
/* スキン & コンテンツ */
.category-item-gray {
background-color: rgb(239, 239, 239);
border-radius: 15px;
font-size: 15px;
font-weight: 600;
}
実は、スキンに先に着目することによって、そのほかの構造の分離も、既に完了していることに気がつきましたか？
このような手順で行うと、HTMLのコンポーネントの構造も100%確信が持てますし、CSSのスタイルも、オブジェクト指向CSS（OOCSS）を意識した構成になっている状態で、次の構成に進むことができます。
OOCSSのコンポーネント構成とスタイル付与の方法まとめ
- 完成見本をコンポーネントに分ける（慣れればHTMLを構成しながらこの工程はできます）
- 切り分けたコンポーネントを元に、HTML要素を構成する（コンテナーとコンテンツの分離だけを意識）
- 複数ある共通コンテンツ要素は、ひとまず1つ用意（例: 先頭のカードのみ）
- CSSでスタイル付与をする（1つのコンテナーをまずは行う。例: ヘッダー）
- スキンのセレクタを分離する
- HTMLにスキンのセレクタを付与
- コンテナーとコンテンツ、構造とスキンの分離が完了
- 1〜7のステップを繰り返す