この節について
この節では同じモジュールを複数設置した場合に、そのうちの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設計チュートリアルの目次へ戻る