この節について
この節ではレベル1〜レベル6の簡単な見出しのモジュールを作りながら、ファイル名のルールや、BEMのBlockクラスとModifierクラスの命名規則など、最重要ポイントの復習をして、慣れていきましょう。
HTML
まずは以下のHTMLを public/html/module-list.html に追記します。
今回のモジュールはElementクラスはありません。
Block名を決める
今回のBlock名は mod-heading-0001
にします。
scssファイルの作成
1Blockにつき1ファイルを作成します。
ファイル名の命名規則は _Block名.scss です。
先ほど決めたBlock名の先頭にアンダースコア(_)を足したものがファイル名になりますので src/scss/modules/_mod-heading-0001.scss
を作成します。
Blockクラス
まずはBlockクラスを以下の通り記述します。
先ほど決めたBlock名がそのままクラス名になります。
1 2 3 4 5 6 7 8
| .mod-heading-0001 { font-weight: bold; font-size: 28px; color: #222222; border-bottom: 1px solid #cccccc; padding: 0.1em 0; line-height: 1.4; }
|
Blockクラスを付与します。
1
| <h1 class="mod-heading-0001">見出し lv2</h1>
|
これで基本となる見出しのモジュールが1つできました。
Modifierクラス(1つめ)
まずはh1タグを以下のように1つ追記します。
先ほど記述したh1タグは略して、追記分だけを記述しています。
1 2
| 〜略〜 <h1 class="mod-heading-0001">見出し lv1</h1>
|
Modifierクラス mod-heading-0001--lv-1
を以下のとおり追記することにします。
1 2 3 4 5 6 7
| .mod-heading-0001 { 〜略〜 &.mod-heading-0001--lv-1 { font-size: 32px; border-bottom: 0; } }
|
以下のようにModifierクラス mod-heading-0001--lv-1
を付与することにします。
1 2
| 〜略〜 <h1 class="mod-heading-0001 mod-heading-0001--lv-1">見出し lv1</h1>
|
これで1つめの派生モジュールが追加できました。
Modifierクラス(2つめ〜5つめ)
4つの派生モジュールを作成していくため、h1タグを以下のように4つ追記します。
先ほどまでに記述したh1タグは略して、追記分だけを記述しています。
1 2 3 4 5
| 〜略〜 <h1 class="mod-heading-0001">見出し lv3</h1> <h1 class="mod-heading-0001">見出し lv4</h1> <h1 class="mod-heading-0001">見出し lv5</h1> <h1 class="mod-heading-0001">見出し lv6</h1>
|
lv-3からlv-6までのModifierクラスを以下のようにまとめて追記します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| .mod-heading-0001 { 〜略〜 &.mod-heading-0001--lv-3 { font-size: 24px; } &.mod-heading-0001--lv-4 { font-size: 21px; } &.mod-heading-0001--lv-5 { font-size: 18px; } &.mod-heading-0001--lv-6 { font-size: 16px; } }
|
以下のようにModifierクラス mod-heading-0001--lv-3
から mod-heading-0001--lv-6
を付与することにします。
1 2 3 4 5
| 〜略〜 <h1 class="mod-heading-0001 mod-heading-0001--lv-3">見出し lv3</h1> <h1 class="mod-heading-0001 mod-heading-0001--lv-4">見出し lv4</h1> <h1 class="mod-heading-0001 mod-heading-0001--lv-5">見出し lv5</h1> <h1 class="mod-heading-0001 mod-heading-0001--lv-6">見出し lv6</h1>
|
この節で追加した行の全容
この節では基本の見出しとModifierクラス5個を作成してきました。
全容を一度確認してみましょう。
public/html/module-list.html
は以下のように追記しました。
1 2 3 4 5 6
| <h1 class="mod-heading-0001">見出し lv2</h1> <h1 class="mod-heading-0001 mod-heading-0001--lv-1">見出し lv1</h1> <h1 class="mod-heading-0001 mod-heading-0001--lv-3">見出し lv3</h1> <h1 class="mod-heading-0001 mod-heading-0001--lv-4">見出し lv4</h1> <h1 class="mod-heading-0001 mod-heading-0001--lv-5">見出し lv5</h1> <h1 class="mod-heading-0001 mod-heading-0001--lv-6">見出し lv6</h1>
|
src/scss/modules/_mod-heading-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
| .mod-heading-0001 { font-weight: bold; font-size: 28px; color: #222222; border-bottom: 1px solid #cccccc; padding: 0.1em 0; line-height: 1.4; &.mod-heading-0001--lv-1 { font-size: 32px; border-bottom: 0; } &.mod-heading-0001--lv-3 { font-size: 24px; } &.mod-heading-0001--lv-4 { font-size: 21px; } &.mod-heading-0001--lv-5 { font-size: 18px; } &.mod-heading-0001--lv-6 { font-size: 16px; } }
|
表示確認
public/html/module-list.html
をブラウザで開いて確認してみてください。
続きはこちら
とてもやさしいCSS設計チュートリアルの目次へ戻る