今回作ったもの
ABOUT、SERVICE、WORKSにある同じ役割のパーツを、共通クラスで書き直しました。
学んだポイント
- 見た目と役割が同じパーツは、別のセクションにあっても共通化できます。
- クラス名は、セクション名ではなくパーツの役割で考えます。
- 背景色のように違う指定は、無理に共通化しません。
ハンズオンを再現してみよう
STEP 1：作業前のページを確認する
配布用ファイルを展開します。
index.htmlをLive Serverで開きます。
ABOUT、SERVICE、WORKSの見出しと余白が、同じ見た目になっていることを確認します。
STEP 2：CSSの重複を探す
style.cssで、次の組み合わせを探します。
.about-wrapper・.service-wrapper・.works-wrapper.about-heading・.service-heading・.works-heading.about-title・.service-title・.works-title.about-line・.service-line・.works-line.about-text・.works-text
クラス名は違いますが、中に書かれたCSSは同じです。
STEP 3：役割でクラス名を付ける
| 役割 | 共通クラス名 |
|---|---|
| コンテンツの幅を整える | .content-width |
| 見出しと線をまとめる | .section-heading |
| セクションの見出し | .section-title |
| 見出しの下の線 | .heading-line |
| セクションの本文 | .section-text |
セクション名ではなく、パーツの役割が分かる名前にします。
STEP 4：CSSをまとめる
同じ指定を1つの共通クラスにまとめます。
使わなくなった重複ブロックは削除します。
.about、.service、.worksの背景色は異なるため、外側のクラスは残します。
STEP 5：HTMLのクラス名を合わせる
ABOUT、SERVICE、WORKSを上から順に見直します。
CSSに合わせて、HTMLのclass属性も共通クラス名に書き換えます。
.service-listはSERVICEだけで使うため、そのまま残します。
セルフチェック
- HTMLとCSSで共通クラス名が一致している
- 重複していたCSSが1つにまとまっている
- 3つのセクションの背景色が残っている
- 作業前と作業後で見た目が変わっていない
参加できなかった方へ
まずは配布用のstyle.cssで、同じ指定が繰り返されている場所を探しましょう。
次に、content-widthやsection-titleのように役割が分かる名前へ書き換えましょう。
もしクラス名を書き換えて見た目が変わってしまったときには、答え合わせ用コードと見比べて間違えているところを探してみてください。