第3章 1節 mod-footer-0001を作ろう

この節について

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

HTML

まずは以下のHTMLを public/html/module-list.html に追記します。

1
2
3
4
5
6
7
<footer>
  <div>
    <a href="#">
      &copy;中野ピク氏
    </a>
  </div>
</footer>

Block名を決める

今回のBlock名は mod-footer-0001 にします。

scssファイルの作成

1Blockにつき1ファイルを作成します。

ファイル名の命名規則は _Block名.scss です。

先ほど決めたBlock名の先頭にアンダースコア（_）を足したものがファイル名になりますので src/scss/modules/_mod-footer-0001.scss を作成します。

Blockクラス

まずはBlockクラスを以下の通り記述します。
先ほど決めたBlock名がそのままクラス名になります。

1
2
3
4
.mod-footer-0001 {
  padding: 8px 12px;
  background-color: #222222;
}

Blockクラスをモジュール単位の一番外側のタグに付与します。

1
2
3
4
5
6
7
<footer class="mod-footer-0001">
  <div>
    <a href="#">
      &copy;中野ピク氏
    </a>
  </div>
</footer>

Elementクラス(1つめ)

Elementクラス mod-footer-0001__copy-area を以下のとおり追記することにします。

1
2
3
4
5
6
7
8
.mod-footer-0001 {
  padding: 8px 12px;
  background-color: #222222;
  .mod-footer-0001__copy-area {
    text-align: center;
    color: #ffffff;
  }
}

以下のようにElementクラス mod-footer-0001__copy-area を付与することにします。

1
2
3
4
5
6
7
<footer class="mod-footer-0001">
  <div class="mod-footer-0001__copy-area">
    <a href="#">
      &copy;中野ピク氏
    </a>
  </div>
</footer>

Elementクラス(2つめ)

Elementクラス mod-footer-0001__copy を以下のとおり追記することにします。

1
2
3
4
5
6
7
8
9
10
11
12
13
.mod-footer-0001 {
  padding: 8px 12px;
  background-color: #222222;
  .mod-footer-0001__copy-area {
    text-align: center;
    color: #ffffff;
  }
  .mod-footer-0001__copy {
    font-size: 12px;
    color: #ffffff;
    text-decoration: none;
  }
}

以下のようにElementクラス mod-footer-0001__copy を付与することにします。

1
2
3
4
5
6
7
<footer class="mod-footer-0001">
  <div class="mod-footer-0001__copy-area">
    <a href="#" class="mod-footer-0001__copy">
      &copy;中野ピク氏
    </a>
  </div>
</footer>

表示確認

public/html/module-list.html をブラウザで開いて確認してみてください。

続きはこちら

とてもやさしいCSS設計チュートリアルの目次へ戻る