第3章 3節 mod-heading-0001を作ろう

この節について

この節ではレベル1〜レベル6の簡単な見出しのモジュールを作りながら、ファイル名のルールや、BEMのBlockクラスとModifierクラスの命名規則など、最重要ポイントの復習をして、慣れていきましょう。

HTML

まずは以下のHTMLを public/html/module-list.html に追記します。
今回のモジュールはElementクラスはありません。

1
<h1>見出し lv2</h1>

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設計チュートリアルの目次へ戻る