この節について
この節では、h2セクションとして使用するmod-container-0001を作成します。
今回もModifierクラスは無く、少し多めのElementクラスがあるだけです。
今回も基本に忠実にBlockクラスとElementクラスでモジュールを作成していきましょう。
Block名を決める
今回のBlock名は mod-container-0001
にします。
scssファイルの作成
ファイル名の命名規則は _Block名.scss
です。
先ほど決めたBlock名の先頭にアンダースコア(_)を足したものがファイル名になりますので src/scss/modules/_mod-container-0001.scss
を作成します。
モジュールの作成
public/html/module-list.html
に以下のように追記します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| <section class="mod-container-0001"> <div class="mod-container-0001__heading-wrapper"> ここに見出しのモジュールが入ります。 </div> <div class="mod-container-0001__body"> ここにコンテンツのモジュールが入ります。 </div> <div class="mod-container-0001__footer"> <div class="mod-container-0001__footer-row"> <p class="mod-container-0001__see-more-area"> <a href="#" class="mod-container-0001__see-more">もっと見る</a> </p> </div> </div> </section>
|
src/scss/modules/_mod-container-0001.scss
に以下のように記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
| .mod-container-0001 { padding: 1px 16px; background-color: #ffffff; // .mod-container-0001のpadding-topを補完する初期値 > :first-child { margin-top: 15px; } // .mod-container-0001のpadding-bottomを補完する初期値 > :last-child { margin-bottom: 39px; } .mod-container-0001__heading-wrapper { } .mod-container-0001__body { margin-top: 24px; } .mod-container-0001__footer { margin-top: 24px; border-top: 1px solid #cccccc; } .mod-container-0001__footer-row { padding-top: 16px; } .mod-container-0001__see-more-area { text-align: right; } .mod-container-0001__see-more { }
// 隣接兄弟要素セレクタによるマージン .mod-container-0001 + & { margin-top: 48px; } }
|
見出しモジュールを設置する
さきほど記述したHTMLに、lv-2の見出しモジュールを設置します。
いつも通り、中に入れるモジュールのスタイルには手を加えず、ただ置くだけですが、h2タグで設置することにします。
以下の通り見出しのモジュールを設置します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| <section class="mod-container-0001"> <div class="mod-container-0001__heading-wrapper"> <h2 class="mod-heading-0001">見出し lv2</h2> </div> <div class="mod-container-0001__body"> ここにコンテンツのモジュールが入ります。 </div> <div class="mod-container-0001__footer"> <div class="mod-container-0001__footer-row"> <p class="mod-container-0001__see-more-area"> <a href="#" class="mod-container-0001__see-more">もっと見る</a> </p> </div> </div> </section>
|
この節で追加した行の全容
public/html/module-list.html
は以下のように追記しました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| <section class="mod-container-0001"> <div class="mod-container-0001__heading-wrapper"> <h2 class="mod-heading-0001">見出し lv2</h2> </div> <div class="mod-container-0001__body"> ここにコンテンツのモジュールが入ります。 </div> <div class="mod-container-0001__footer"> <div class="mod-container-0001__footer-row"> <p class="mod-container-0001__see-more-area"> <a href="#" class="mod-container-0001__see-more">もっと見る</a> </p> </div> </div> </section>
|
src/scss/modules/_mod-container-0001.scss
は以下のように作成しました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
| .mod-container-0001 { padding: 1px 16px; background-color: #ffffff; // .mod-container-0001のpadding-topを補完する初期値 > :first-child { margin-top: 15px; } // .mod-container-0001のpadding-bottomを補完する初期値 > :last-child { margin-bottom: 39px; } .mod-container-0001__heading-wrapper { } .mod-container-0001__body { margin-top: 24px; } .mod-container-0001__footer { margin-top: 24px; border-top: 1px solid #cccccc; } .mod-container-0001__footer-row { padding-top: 16px; } .mod-container-0001__see-more-area { text-align: right; } .mod-container-0001__see-more { }
// 隣接兄弟要素セレクタによるマージン .mod-container-0001 + & { margin-top: 48px; } }
|
表示確認
public/html/module-list.html
をブラウザで開いて確認してみてください。
この節のおわりに
今回もElementクラスの数が多いだけで基本的な構成になりました。
続きはこちら
とてもやさしいCSS設計チュートリアルの目次へ戻る