WEBVTT

1
00:00:00.000 --> 00:00:00.863
こんにちは。

2
00:00:00.863 --> 00:00:03.452
シーエスエス、リファレンス解説です。

3
00:00:03.452 --> 00:00:06.329
今回のテーマは、メディアクエリ入門です。

4
00:00:06.329 --> 00:00:10.716
メディアクエリとは、画面の幅や向き、利用者の表示設定といった条件に応じて、

5
00:00:10.716 --> 00:00:15.103
シーエスエスの適用を切り替える仕組みのことです。

6
00:00:15.103 --> 00:00:19.274
たとえば同じエイチティーエムエルでも、狭い画面ではカードを一列に、広い画面では二列、

7
00:00:19.274 --> 00:00:23.445
三列に並べ替えることができます。

8
00:00:23.445 --> 00:00:27.976
大切なのは、スマートフォンやパソコンといった端末名を判定するのではなく、

9
00:00:27.976 --> 00:00:32.507
今利用できる表示領域の広さに合わせて設計することです。

10
00:00:32.507 --> 00:00:38.548
この動画では、基本の書き方から、幅以外の条件、効かないときの確認までを順に学びます。

11
00:00:38.548 --> 00:00:40.158
まず基本の書き方です。

12
00:00:40.158 --> 00:00:47.913
アットメディアの後ろに条件を書き、その波括弧の中に、条件が成り立ったときに使いたいシーエスエスを書きます。

13
00:00:47.913 --> 00:00:51.279
画面の例では、基本の表示はグリッドで一列です。

14
00:00:51.279 --> 00:00:57.717
そして、画面幅が六百四十ピクセル以上という条件のときに、二列にする宣言を追加しています。

15
00:00:57.717 --> 00:01:01.229
幅が条件に合えばその宣言が適用の候補になり、幅が狭くなれば候補から外れて、

16
00:01:01.229 --> 00:01:04.741
基本の一列に戻ります。

17
00:01:04.741 --> 00:01:08.839
表示の切り替えをジャバスクリプトで行う必要はありません。

18
00:01:08.839 --> 00:01:16.448
なお、メディアクエリを使ったからといって、セレクターの詳細度が上がるわけではない点も覚えておきましょう。

19
00:01:16.448 --> 00:01:20.793
メディアクエリを使う前に、もう一つ欠かせない準備があります。

20
00:01:20.793 --> 00:01:23.690
画面の一行、ビューポートのメタタグです。

21
00:01:23.690 --> 00:01:27.745
インデックスエイチティーエムエルのヘッドの中に入れます。

22
00:01:27.745 --> 00:01:33.538
これがないと、モバイルブラウザーは広いレイアウト向けの仮想的な幅でページを表示してしまい、

23
00:01:33.538 --> 00:01:39.331
実際の画面幅と条件がずれて、意図した切り替えが起きない場合があります。

24
00:01:39.331 --> 00:01:45.849
逆に、ユーザースケーラブル・ノーのような、利用者の拡大を妨げる指定は追加しないでください。

25
00:01:45.849 --> 00:01:50.628
文字を拡大してもそのまま使えることが、読みやすいサイトの条件です。

26
00:01:50.628 --> 00:01:54.946
幅の条件で中心になるのが、ミンウィズとマックスウィズです。

27
00:01:54.946 --> 00:02:00.158
ミンウィズは指定した幅以上、マックスウィズは指定した幅以下を表します。

28
00:02:00.158 --> 00:02:04.774
ここで注意したいのは、どちらも境界の値そのものを含むことです。

29
00:02:04.774 --> 00:02:11.475
つまり幅がちょうど六百四十ピクセルのとき、以上の条件も、以下の条件も、両方が成り立ちます。

30
00:02:11.475 --> 00:02:16.166
別々のプロパティを変えるなら問題ありませんが、同じプロパティを反対の値に変える設計では、

31
00:02:16.166 --> 00:02:20.857
境界でどちらが勝つかを意識しましょう。

32
00:02:20.857 --> 00:02:28.600
また、この幅はシーエスエスピクセルという単位で評価され、端末の物理的なピクセル数とは同じではありません。

33
00:02:28.600 --> 00:02:31.855
新しい書き方として、範囲構文もあります。

34
00:02:31.855 --> 00:02:37.308
不等号を使って、幅が六百四十ピクセル未満、六百四十ピクセル以上九百六十ピクセル未満、

35
00:02:37.308 --> 00:02:42.761
という条件を、そのままの意味で書くことができます。

36
00:02:42.761 --> 00:02:47.563
ミンウィズとマックスウィズでは境界を含むかどうかを頭の中で確かめる必要がありましたが、

37
00:02:47.563 --> 00:02:52.365
範囲構文なら読み違えが減ります。

38
00:02:52.365 --> 00:02:57.085
ただし、対応が始まった時期はブラウザーによって異なります。

39
00:02:57.085 --> 00:03:02.213
古いブラウザーまで対象にする場合は、従来の書き方と範囲構文を同じ対応範囲だと思い込まず、

40
00:03:02.213 --> 00:03:07.340
互換性の表を確認してから使いましょう。

41
00:03:07.340 --> 00:03:11.284
設計の進め方として定番なのが、モバイルファーストです。

42
00:03:11.284 --> 00:03:15.740
まず狭い画面で読みやすい一列の基本形を作り、画面が広くなったときの変更を、

43
00:03:15.740 --> 00:03:20.196
ミンウィズのメディアクエリで下へ足していきます。

44
00:03:20.196 --> 00:03:25.747
広い画面向けの複雑な配置を、後から狭い画面用に打ち消す量が減るのが利点です。

45
00:03:25.747 --> 00:03:31.226
そして区切りの幅、ブレークポイントは、特定の端末名に合わせるのではなく、

46
00:03:31.226 --> 00:03:36.704
ウィンドウを少しずつ狭めて、見出しや文章が読みにくくなる地点を探して決めます。

47
00:03:36.704 --> 00:03:41.452
ブレークポイントをエムで書くこともできますが、その基準は要素の文字サイズではなく、

48
00:03:41.452 --> 00:03:46.200
初期のフォントサイズである点に注意してください。

49
00:03:46.200 --> 00:03:50.976
複数の条件が同時に成り立つと、どうなるのでしょうか。

50
00:03:50.976 --> 00:03:58.507
幅が九百六十ピクセル以上のときは、六百四十ピクセル以上という条件も当然満たします。

51
00:03:58.507 --> 00:04:03.650
つまり二列の宣言と三列の宣言が、両方とも候補になります。

52
00:04:03.650 --> 00:04:08.334
このとき優先されるのは、より狭い条件の方ではなく、同じセレクターで同じ重要度なら、

53
00:04:08.334 --> 00:04:13.018
後に書いた宣言です。

54
00:04:13.018 --> 00:04:19.446
サンプルで三列が表示されるのは、三列の指定が後に書かれているからです。

55
00:04:19.446 --> 00:04:24.590
条件の厳しさで自動的に優先順位が決まる規則はありません。

56
00:04:24.590 --> 00:04:30.100
思った表示にならないときは、まず記述の順番を確かめましょう。

57
00:04:30.100 --> 00:04:32.409
条件は組み合わせることもできます。

58
00:04:32.409 --> 00:04:38.248
アンドでつなぐと両方を満たすとき、カンマでつなぐとどちらかを満たすときに適用されます。

59
00:04:38.248 --> 00:04:40.828
ノットで条件を否定することもできます。

60
00:04:40.828 --> 00:04:45.037
幅以外でよく使うのが、オリエンテーション、表示領域の向きです。

61
00:04:45.037 --> 00:04:49.519
ランドスケープは横長、ポートレートは縦長、または正方形を表します。

62
00:04:49.519 --> 00:04:54.679
ただしこれは端末の向きを測るセンサーではなく、あくまで表示領域の縦横比です。

63
00:04:54.679 --> 00:04:58.617
ソフトウェアキーボードの表示で領域が変わることもあります。

64
00:04:58.617 --> 00:05:04.592
複雑な条件を書くときは、括弧と否定の範囲を取り違えないよう、読みやすさを優先しましょう。

65
00:05:04.592 --> 00:05:07.521
操作の特性に合わせる条件もあります。

66
00:05:07.521 --> 00:05:15.332
ホバーは、主な入力の仕組みがホバーできるかどうか、ポインターは、そのポインターの精度を表します。

67
00:05:15.332 --> 00:05:23.306
画面の例では、ホバーできて細かいポインターがある環境でのみ、ボタンへのホバーで下線を付けています。

68
00:05:23.306 --> 00:05:30.304
逆に、指のような粗いポインターの環境では、ボタンの高さを確保して押しやすくしています。

69
00:05:30.304 --> 00:05:39.254
タッチ対応のパソコンのように複数の入力を持つ端末もあるため、これらをスマートフォン判定には使わないでください。

70
00:05:39.254 --> 00:05:48.204
また、操作に必要な情報をホバーしたときだけ見せる作りにせず、キーボードのフォーカスでも分かるようにしましょう。

71
00:05:48.204 --> 00:05:51.609
利用者の表示設定に応える条件もあります。

72
00:05:51.609 --> 00:05:58.333
プリファーズカラースキームは、端末やブラウザーで選ばれている配色の希望を表し、

73
00:05:58.333 --> 00:06:05.057
ダークのときにカスタムプロパティの色を切り替えれば、ダークモード対応ができます。

74
00:06:05.057 --> 00:06:11.696
このとき背景だけでなく、文字や枠線、リンク、フォームの色まで見直してください。

75
00:06:11.696 --> 00:06:15.952
もう一つがプリファーズリデューストモーションです。

76
00:06:15.952 --> 00:06:24.464
動きを減らす設定の利用者には、トランジションやアニメーションを止めて、装飾的な移動や点滅を抑えます。

77
00:06:24.464 --> 00:06:30.592
気分や体調に関わる設定なので、サイト側の都合より優先して尊重しましょう。

78
00:06:30.592 --> 00:06:33.541
最後に印刷対応と、困ったときの確認です。

79
00:06:33.541 --> 00:06:38.408
メディアタイプにプリントを指定すると、印刷時だけの指定ができます。

80
00:06:38.408 --> 00:06:44.749
ナビゲーションを省き、紙で読める色にし、カードがページの途中で割れないよう配慮します。

81
00:06:44.749 --> 00:06:48.878
メディアクエリが効かないときは、順番に切り分けましょう。

82
00:06:48.878 --> 00:06:54.703
スタイルシートが読み込めているか、ビューポートの指定があるか、セレクターが合っているか、

83
00:06:54.703 --> 00:07:00.528
括弧や単位に誤りがないか、そして開発者ツールで最終的な値を確認します。

84
00:07:00.528 --> 00:07:07.164
なお、部品が置かれた入れ物の幅で切り替えたい場合は、コンテナクエリという選択肢もあります。

85
00:07:07.164 --> 00:07:12.620
判定したい基準に合った仕組みを選ぶことが、メディアクエリ活用のまとめです。