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