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