この節について
mod-example-0001のコードを読み返しながら、特定の要素だけレスポンシブにするときのポイントについて学んでいきましょう。
特定の要素だけレスポンシブにするときのポイントについて学ぼう
概要
特定の要素だけレスポンシブにするときのポイントとして、以下のようなことが挙げられます。
- どういう条件のときにどのような状態になるのか分かりやすいクラス名にする
- レスポンシブにするだけのためのModifierクラスを作成する
1. どういう条件のときにどのような状態になるのか分かりやすいクラス名にする
前の節で作成したModifierクラスを具体例として挙げるとmod-example-0001--display-none-if-media-query-is-smでした。
このクラス名からは、media queryがsmの場合にdisplay: none;になることがわかりやすいと思います。
少し長いクラス名になってしまいますがあまり省略せずに、自分以外の誰が読んでもわかりやすいModifierクラス名を意識して命名すると良いと思います。
2. レスポンシブにするだけのためのModifierクラスを作成する
一言で言うと、「レスポンシブにするだけのためのModifierクラスを作成する」ことがポイントです。
詳細としては、まず以下の「2つの異なる性質の条件を組み合わせている」ことに注目することで理解が深まると思います。
- Modifierクラスを付与することによってスタイルを適用する
- media queryによってスタイルを適用する
Modifierクラスで派生スタイルを作成すること、media queryでレスポンシブ対応をすること、これら一つひとつについては当たり前に使いこなせている人が多いと思いますが、この2つを組み合わせて、レスポンシブのためだけに使用するという発想を必要なときにパッと思いつくことは意外とできないことのように思います。
充分に理解して、いざというときに使えるようにしておきましょう。
この節のおわりに
この節では、特定の要素だけレスポンシブにするコードが、どのような条件の組み合わせによって実現されるのか、その要因を分解して詳細に学習しました。
とても便利な方法なので、ぜひ身につけてください。