VIDEO LESSON

CSSのメディアクエリ入門：画面幅で変わるレイアウトを図とサンプルで解説の解説動画

再生時間 7:13動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、メディアクエリ入門です。
0:06メディアクエリとは、画面の幅や向き、利用者の表示設定といった条件に応じて、
0:10シーエスエスの適用を切り替える仕組みのことです。
0:15たとえば同じエイチティーエムエルでも、狭い画面ではカードを一列に、広い画面では二列、
0:19三列に並べ替えることができます。
0:23大切なのは、スマートフォンやパソコンといった端末名を判定するのではなく、
0:27今利用できる表示領域の広さに合わせて設計することです。
0:32この動画では、基本の書き方から、幅以外の条件、効かないときの確認までを順に学びます。
0:38まず基本の書き方です。
0:40アットメディアの後ろに条件を書き、その波括弧の中に、条件が成り立ったときに使いたいシーエスエスを書きます。
0:47画面の例では、基本の表示はグリッドで一列です。
0:51そして、画面幅が六百四十ピクセル以上という条件のときに、二列にする宣言を追加しています。
0:57幅が条件に合えばその宣言が適用の候補になり、幅が狭くなれば候補から外れて、
1:01基本の一列に戻ります。
1:04表示の切り替えをジャバスクリプトで行う必要はありません。
1:08なお、メディアクエリを使ったからといって、セレクターの詳細度が上がるわけではない点も覚えておきましょう。
1:16メディアクエリを使う前に、もう一つ欠かせない準備があります。
1:20画面の一行、ビューポートのメタタグです。
1:23インデックスエイチティーエムエルのヘッドの中に入れます。
1:27これがないと、モバイルブラウザーは広いレイアウト向けの仮想的な幅でページを表示してしまい、
1:33実際の画面幅と条件がずれて、意図した切り替えが起きない場合があります。
1:39逆に、ユーザースケーラブル・ノーのような、利用者の拡大を妨げる指定は追加しないでください。
1:45文字を拡大してもそのまま使えることが、読みやすいサイトの条件です。
1:50幅の条件で中心になるのが、ミンウィズとマックスウィズです。
1:54ミンウィズは指定した幅以上、マックスウィズは指定した幅以下を表します。
2:00ここで注意したいのは、どちらも境界の値そのものを含むことです。
2:04つまり幅がちょうど六百四十ピクセルのとき、以上の条件も、以下の条件も、両方が成り立ちます。
2:11別々のプロパティを変えるなら問題ありませんが、同じプロパティを反対の値に変える設計では、
2:16境界でどちらが勝つかを意識しましょう。
2:20また、この幅はシーエスエスピクセルという単位で評価され、端末の物理的なピクセル数とは同じではありません。
2:28新しい書き方として、範囲構文もあります。
2:31不等号を使って、幅が六百四十ピクセル未満、六百四十ピクセル以上九百六十ピクセル未満、
2:37という条件を、そのままの意味で書くことができます。
2:42ミンウィズとマックスウィズでは境界を含むかどうかを頭の中で確かめる必要がありましたが、
2:47範囲構文なら読み違えが減ります。
2:52ただし、対応が始まった時期はブラウザーによって異なります。
2:57古いブラウザーまで対象にする場合は、従来の書き方と範囲構文を同じ対応範囲だと思い込まず、
3:02互換性の表を確認してから使いましょう。
3:07設計の進め方として定番なのが、モバイルファーストです。
3:11まず狭い画面で読みやすい一列の基本形を作り、画面が広くなったときの変更を、
3:15ミンウィズのメディアクエリで下へ足していきます。
3:20広い画面向けの複雑な配置を、後から狭い画面用に打ち消す量が減るのが利点です。
3:25そして区切りの幅、ブレークポイントは、特定の端末名に合わせるのではなく、
3:31ウィンドウを少しずつ狭めて、見出しや文章が読みにくくなる地点を探して決めます。
3:36ブレークポイントをエムで書くこともできますが、その基準は要素の文字サイズではなく、
3:41初期のフォントサイズである点に注意してください。
3:46複数の条件が同時に成り立つと、どうなるのでしょうか。
3:50幅が九百六十ピクセル以上のときは、六百四十ピクセル以上という条件も当然満たします。
3:58つまり二列の宣言と三列の宣言が、両方とも候補になります。
4:03このとき優先されるのは、より狭い条件の方ではなく、同じセレクターで同じ重要度なら、
4:08後に書いた宣言です。
4:13サンプルで三列が表示されるのは、三列の指定が後に書かれているからです。
4:19条件の厳しさで自動的に優先順位が決まる規則はありません。
4:24思った表示にならないときは、まず記述の順番を確かめましょう。
4:30条件は組み合わせることもできます。
4:32アンドでつなぐと両方を満たすとき、カンマでつなぐとどちらかを満たすときに適用されます。
4:38ノットで条件を否定することもできます。
4:40幅以外でよく使うのが、オリエンテーション、表示領域の向きです。
4:45ランドスケープは横長、ポートレートは縦長、または正方形を表します。
4:49ただしこれは端末の向きを測るセンサーではなく、あくまで表示領域の縦横比です。
4:54ソフトウェアキーボードの表示で領域が変わることもあります。
4:58複雑な条件を書くときは、括弧と否定の範囲を取り違えないよう、読みやすさを優先しましょう。
5:04操作の特性に合わせる条件もあります。
5:07ホバーは、主な入力の仕組みがホバーできるかどうか、ポインターは、そのポインターの精度を表します。
5:15画面の例では、ホバーできて細かいポインターがある環境でのみ、ボタンへのホバーで下線を付けています。
5:23逆に、指のような粗いポインターの環境では、ボタンの高さを確保して押しやすくしています。
5:30タッチ対応のパソコンのように複数の入力を持つ端末もあるため、これらをスマートフォン判定には使わないでください。
5:39また、操作に必要な情報をホバーしたときだけ見せる作りにせず、キーボードのフォーカスでも分かるようにしましょう。
5:48利用者の表示設定に応える条件もあります。
5:51プリファーズカラースキームは、端末やブラウザーで選ばれている配色の希望を表し、
5:58ダークのときにカスタムプロパティの色を切り替えれば、ダークモード対応ができます。
6:05このとき背景だけでなく、文字や枠線、リンク、フォームの色まで見直してください。
6:11もう一つがプリファーズリデューストモーションです。
6:15動きを減らす設定の利用者には、トランジションやアニメーションを止めて、装飾的な移動や点滅を抑えます。
6:24気分や体調に関わる設定なので、サイト側の都合より優先して尊重しましょう。
6:30最後に印刷対応と、困ったときの確認です。
6:33メディアタイプにプリントを指定すると、印刷時だけの指定ができます。
6:38ナビゲーションを省き、紙で読める色にし、カードがページの途中で割れないよう配慮します。
6:44メディアクエリが効かないときは、順番に切り分けましょう。
6:48スタイルシートが読み込めているか、ビューポートの指定があるか、セレクターが合っているか、
6:54括弧や単位に誤りがないか、そして開発者ツールで最終的な値を確認します。
7:00なお、部品が置かれた入れ物の幅で切り替えたい場合は、コンテナクエリという選択肢もあります。
7:07判定したい基準に合った仕組みを選ぶことが、メディアクエリ活用のまとめです。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

CSSメディアクエリを図と操作サンプルで解説。min-width・max-width、1列から3列への変化、境界と優先順位、ダークモード・動きを減らす設定・印刷対応まで学べます。

解説記事・サンプルコードを読む：CSSのメディアクエリ入門：画面幅で変わるレイアウトを図とサンプルで解説 →