第3章 13節 mod-container-0001を作ろう

この節について

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