第7章 1節 Modifierクラスを利用して特定の要素だけレスポンシブにしよう

この節について

この節では同じモジュールを複数設置した場合に、そのうちの1つだけにModifierクラスを付与してレスポンシブ対応する方法について紹介します。

通常のレスポンシブ対応コード

public/html/module-list.htmlの編集

module-list.htmlのmod-example-0001の下に、もう1つmod-example-0001を追記して以下のようにします。

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
<body>
<i class="fas fa-cat"></i>

<div class="mod-example-0001 mod-example-0001--danger">
<div class="mod-example-0001__first-element">
<ul class="mod-example-0001__list-group">
<li class="mod-example-0001__list-item mod-example-0001__list-item--danger">
サンプル
</li>
<li class="mod-example-0001__list-item">
サンプル
</li>
</ul>
</div>
</div>

<div class="mod-example-0001">
<div class="mod-example-0001__first-element">
<ul class="mod-example-0001__list-group">
<li class="mod-example-0001__list-item">
サンプル
</li>
<li class="mod-example-0001__list-item">
サンプル
</li>
</ul>
</div>
</div>

〜略〜
</body>

src/scss/modules/_mod-example-0001.scssの編集

このとき、例えばsrc/scss/modules/_mod-example-0001.scssに以下のように追記すると、windowの幅が狭まったときに2つとも非表示になります。

1
2
3
4
5
6
7
.mod-example-0001 {
〜略〜
@media #{$g__is-sm} {
display: none;
}
〜略〜
}

一度ブラウザで確認する

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

windowの幅を狭めていくと、2つとも非表示になります。

片方だけをレスポンシブにするコード

public/html/module-list.htmlの編集

先ほど追記した方のモジュールに、mod-example-0001--display-none-if-media-query-is-smを追記して以下のようにします。

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
<body>
<i class="fas fa-cat"></i>

<div class="mod-example-0001 mod-example-0001--danger">
<div class="mod-example-0001__first-element">
<ul class="mod-example-0001__list-group">
<li class="mod-example-0001__list-item mod-example-0001__list-item--danger">
サンプル
</li>
<li class="mod-example-0001__list-item">
サンプル
</li>
</ul>
</div>
</div>

<div class="mod-example-0001 mod-example-0001--display-none-if-media-query-is-sm">
<div class="mod-example-0001__first-element">
<ul class="mod-example-0001__list-group">
<li class="mod-example-0001__list-item">
サンプル
</li>
<li class="mod-example-0001__list-item">
サンプル
</li>
</ul>
</div>
</div>

〜略〜
</body>

src/scss/modules/_mod-example-0001.scssの編集

さきほど追記した箇所を以下のように書き換えます。

1
2
3
4
5
6
7
8
9
.mod-example-0001 {
〜略〜
&.mod-example-0001--display-none-if-media-query-is-sm {
@media #{$g__is-sm} {
display: none;
}
}
〜略〜
}

これで、windowが狭まったときには片方だけが非表示になります。

この節で編集した_mod-example-0001.scssの全容

_mod-example-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
.mod-example-0001 {
padding: 12px 24px;
background: #eeeeee;
border: 1px solid #cccccc;
font-size: 16px;
&.mod-example-0001--display-none-if-media-query-is-sm {
@media #{$g__is-sm} {
display: none;
}
}
&.mod-example-0001--danger {
background: #ffeeee;
border: 1px solid #cc3333;
}
.mod-example-0001__first-element {
padding: 6px;
}
.mod-example-0001__list-group {
list-style: disc;
}
.mod-example-0001__list-item {
color: #222222;
&.mod-example-0001__list-item--danger {
color: #cc3333;
}
}
}

表示確認

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

さきほど開いた状態でそのままの場合は、_mod-example-0001.scssを編集したあとで、CSSを再読み込みするためにブラウザを忘れずにリロードしてください。

windowの幅を狭めていくと、片方だけが非表示になります。

この節のおわりに

今回は要素を非表示にする例で説明をしましたが、同様の方法を利用して色々なプロパティを制御することが可能です。

次の節ではこのコードについてポイントの解説をしていきます。

続きはこちら

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