WEBVTT

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

2
00:00:00.959 --> 00:00:05.113
エイチティーエムエル、シーエスエス入門、第七回です。

3
00:00:05.113 --> 00:00:08.148
今回のテーマは、レスポンシブ対応です。

4
00:00:08.148 --> 00:00:15.498
前回は、フレックスボックスとグリッドで、カードを三列に並べる横並びのレイアウトを作りました。

5
00:00:15.498 --> 00:00:21.250
でも、そのままだと、スマートフォンのような狭い画面では窮屈で読めません。

6
00:00:21.250 --> 00:00:25.564
今回は、その横並びを、狭い画面でも読める形に育てます。

7
00:00:25.564 --> 00:00:31.475
ゴールは、特定のスマートフォンの機種にぴったり合わせることではありません。

8
00:00:31.475 --> 00:00:36.908
内容が無理なく収まる幅に応じて、配置を変えられるようにすることです。

9
00:00:36.908 --> 00:00:42.340
元になる記事は、エスイーの部屋の、レスポンシブ シーエスエス、です。

10
00:00:42.340 --> 00:00:46.485
考え方の出発点は、狭い画面を基準にすることです。

11
00:00:46.485 --> 00:00:50.284
まず、カードと紹介部分を一列に組み立てます。

12
00:00:50.284 --> 00:00:57.019
そのうえで、幅が十分にある場合だけ、メディアクエリーで三列や二列へ変更します。

13
00:00:57.019 --> 00:01:01.336
狭い画面から段階的に広げていく、という考え方です。

14
00:01:01.336 --> 00:01:07.121
逆に、ピーシー版のレイアウトをそのまま縮めるだけだと、文字や操作する部品まで一緒に小さくなってしまい、

15
00:01:07.121 --> 00:01:12.906
読みにくく、押しにくくなります。

16
00:01:12.906 --> 00:01:21.368
画面の幅に合わせて変えるべきは、大きさではなく、内容の配置そのものだ、という発想を持ってください。

17
00:01:21.368 --> 00:01:25.161
土台になるのが、ビューポートという設定です。

18
00:01:25.161 --> 00:01:30.506
エイチティーエムエルのヘッドの中に書かれている、メタ要素です。

19
00:01:30.506 --> 00:01:35.679
内容は、幅イコールデバイス幅、初期スケールは一、と読めます。

20
00:01:35.679 --> 00:01:42.059
端末の画面幅を基準にして、等倍でページを表示してください、という指示です。

21
00:01:42.059 --> 00:01:45.162
第一回で一度登場した、あの設定です。

22
00:01:45.162 --> 00:01:47.059
注意点が二つあります。

23
00:01:47.059 --> 00:01:51.887
一つ、この指定だけではレイアウトは自動的には整いません。

24
00:01:51.887 --> 00:01:55.680
幅や列数の調整は、シーエスエス側の仕事です。

25
00:01:55.680 --> 00:02:00.508
もう一つ、利用者の拡大を禁止するような指定は加えません。

26
00:02:00.508 --> 00:02:05.508
読みやすくするための拡大は、利用者の大切な操作だからです。

27
00:02:05.508 --> 00:02:11.155
では、追加するシーエスエス全体を見てみましょう。

28
00:02:11.155 --> 00:02:17.272
場所は、スタイルズ ドット シーエスエスの末尾です。

29
00:02:17.272 --> 00:02:20.331
大きく三つの塊があります。

30
00:02:20.331 --> 00:02:26.213
まず、カードと紹介部分の列を、一列に上書きします。

31
00:02:26.213 --> 00:02:33.271
前回書いた三列の指定は残したまま、後ろから一列に直す形です。

32
00:02:33.271 --> 00:02:41.506
次に、見出しエイチワンの文字サイズに、クランプという仕組みを使います。

33
00:02:41.506 --> 00:02:45.035
最後が、メディアクエリーです。

34
00:02:45.035 --> 00:02:53.740
画面幅が四十八レム以上のときだけ、カードを三列、紹介部分を二列に戻します。

35
00:02:53.740 --> 00:03:00.328
この後のスライドで、各部分を一つずつ読み解いていきます。

36
00:03:00.328 --> 00:03:03.637
メディアクエリーの読み方を確認します。

37
00:03:03.637 --> 00:03:08.689
アットマーク、メディア、と書き、括弧の中に条件を入れます。

38
00:03:08.689 --> 00:03:12.521
今回の条件は、ミン ウィドゥス、四十八レム。

39
00:03:12.521 --> 00:03:17.224
画面の幅が、四十八レム以上であること、という意味です。

40
00:03:17.224 --> 00:03:21.404
条件が合うときだけ、中括弧の中の指定が効きます。

41
00:03:21.404 --> 00:03:25.236
合わなければ、その部分は丸ごと無視されます。

42
00:03:25.236 --> 00:03:30.287
また、なぜこの塊をファイルの末尾に書くのかもポイントです。

43
00:03:30.287 --> 00:03:35.861
シーエスエスは、同じ詳しさなら、後ろに書いた指定が優先されます。

44
00:03:35.861 --> 00:03:44.396
末尾に置くことで、狭い画面向けの上書きも、広い画面向けの戻しも、順序通りに効かせることができます。

45
00:03:44.396 --> 00:03:48.546
切り替えの境目、四十八レムは、どう決めたのでしょうか。

46
00:03:48.546 --> 00:03:54.541
これは、このサンプルのカードの文章が、読みやすく並ぶ幅として選ばれた数字です。

47
00:03:54.541 --> 00:04:01.458
一般的な、初期の文字サイズが十六ピクセルの環境では、およそ七百六十八ピクセルにあたります。

48
00:04:01.458 --> 00:04:03.302
ただし、注意があります。

49
00:04:03.302 --> 00:04:07.683
メディアクエリーで使う相対単位の基準は、ページの中で変更したルートの文字サイズと、

50
00:04:07.683 --> 00:04:12.064
単純に同じになるとは限りません。

51
00:04:12.064 --> 00:04:19.903
ですから、スマートフォンの機種名から固定で決めるのではなく、実際の内容を見ながら調整するのが原則です。

52
00:04:19.903 --> 00:04:22.977
そして確認は、境目の直前と直後の両方で。

53
00:04:22.977 --> 00:04:30.816
七百六十七ピクセルと、七百六十八ピクセルで、カードやナビゲーションが突然はみ出さないかを見てください。

54
00:04:30.816 --> 00:04:34.336
見出しに使った、クランプを読み解きます。

55
00:04:34.336 --> 00:04:37.681
クランプは、三つの値を順に指定します。

56
00:04:37.681 --> 00:04:41.377
最小値、画面幅に応じた希望値、最大値です。

57
00:04:41.377 --> 00:04:46.129
今回の値は、二レム、五 ブイダブリュー、さん点四レム。

58
00:04:46.129 --> 00:04:53.874
ブイダブリューは、画面幅を基準にした単位で、五ブイダブリューは画面幅の五パーセントです。

59
00:04:53.874 --> 00:05:00.122
つまり、文字の大きさは画面幅の五パーセントを目安にしながらも、二レムより小さくはならず、

60
00:05:00.122 --> 00:05:06.371
さん点四レムより大きくもならない、という範囲付けです。

61
00:05:06.371 --> 00:05:13.059
これで、見出しが際限なく大きくなったり、小さくなりすぎたりするのを防げます。

62
00:05:13.059 --> 00:05:19.044
ただ、この指定だけで文字拡大への対応が保証されるわけではありません。

63
00:05:19.044 --> 00:05:21.508
その点は後の確認で扱います。

64
00:05:21.508 --> 00:05:25.311
狭い画面でよく出るトラブルが、横へのはみ出しです。

65
00:05:25.311 --> 00:05:29.114
ページを横にスクロールしないと読めない状態ですね。

66
00:05:29.114 --> 00:05:32.157
はみ出したら、まず原因を探してください。

67
00:05:32.157 --> 00:05:36.923
候補は、幅を固定した要素、折り返されない長いユーアールエル、白い余白の扱いを指定する、

68
00:05:36.923 --> 00:05:41.689
ホワイトスペース、ノーラップという折り返し禁止の指定、そして、余白を含めて計算していない幅、

69
00:05:41.689 --> 00:05:46.456
などです。

70
00:05:46.456 --> 00:05:54.062
ここで、ページ全体にオーバーフロー エックス、ヒドゥンを付けて、はみ出しを隠してしまうのは早計です。

71
00:05:54.062 --> 00:06:00.907
隠すだけでは、情報そのものや、キーボードのフォーカスの位置まで見えなくなる場合があります。

72
00:06:00.907 --> 00:06:04.863
どの要素がはみ出したのかを特定して、その要素を直す。

73
00:06:04.863 --> 00:06:06.536
これが正しい順序です。

74
00:06:06.536 --> 00:06:09.907
操作のしやすさも、レスポンシブの一部です。

75
00:06:09.907 --> 00:06:11.994
まず、ホバーへの依存です。

76
00:06:11.994 --> 00:06:16.889
ホバーは、マウスのポインターを重ねたときの状態ですが、スマートフォンのタッチ操作には、

77
00:06:16.889 --> 00:06:21.785
その重ねる、という動作がありません。

78
00:06:21.785 --> 00:06:29.650
重要な説明や操作を、ホバーのときだけ表示する作りにすると、タッチでは永遠にたどり着けなくなります。

79
00:06:29.650 --> 00:06:31.416
次に、押しやすさです。

80
00:06:31.416 --> 00:06:38.478
リンクやボタンには十分な余白を持たせ、隣の操作との距離を確保して、押し間違いを防ぎます。

81
00:06:38.478 --> 00:06:45.381
この教材の最終シーエスエスでは、操作する部品の高さを、最低四十四ピクセルとしています。

82
00:06:45.381 --> 00:06:50.196
数字だけでなく、実際に指で押してみた感覚も確認してください。

83
00:06:50.196 --> 00:06:55.649
見た目の幅だけではなく、拡大とキーボードでも確認します。

84
00:06:55.649 --> 00:06:56.623
手順です。

85
00:06:56.623 --> 00:07:04.024
まず、幅三百九十ピクセル程度の狭い画面と、ピーシーの幅の両方で表示を見ます。

86
00:07:04.024 --> 00:07:09.088
次に、ブラウザーの表示を二百パーセントに拡大します。

87
00:07:09.088 --> 00:07:19.216
ページが大きくなっても、内容同士が重なったり、フォームのラベルが読めなくなったりしていないかを調べます。

88
00:07:19.216 --> 00:07:28.759
さらに、タブキーで項目を移動したとき、今どこにフォーカスがあるのかが目で見て分かることも必要です。

89
00:07:28.759 --> 00:07:37.134
文字を大きくして使う人、キーボードで操作する人にとっても、同じ内容にたどり着けること。

90
00:07:37.134 --> 00:07:41.224
それがレスポンシブ対応の仕上げの基準です。

91
00:07:41.224 --> 00:07:43.778
最後に、確認表と練習です。

92
00:07:43.778 --> 00:07:45.546
確認する幅は四つ。

93
00:07:45.546 --> 00:07:52.030
三百二十ピクセルでは、本文、画像、フォームが横にはみ出さないこと。

94
00:07:52.030 --> 00:07:57.727
三百九十ピクセルでは、カードが一列で、無理なく読めること。

95
00:07:57.727 --> 00:08:04.996
七百六十七と七百六十八ピクセルでは、列が切り替わる前後で重なりがないこと。

96
00:08:04.996 --> 00:08:12.069
千四百四十ピクセルでは、横幅が広がりすぎず、カードが三列になることです。

97
00:08:12.069 --> 00:08:21.892
練習として、一番長いカードの説明文を二倍の量にして、隣のカードとの関係が崩れないかも試してください。

98
00:08:21.892 --> 00:08:26.607
短いダミーの文章だけで設計しないことが大切です。

99
00:08:26.607 --> 00:08:27.786
まとめです。

100
00:08:27.786 --> 00:08:34.367
今回は、狭い画面を基準に一列で組み、メディアクエリーで広い画面向けに戻し、

101
00:08:34.367 --> 00:08:40.949
クランプで文字に範囲を付け、はみ出しと操作性を確認しました。

102
00:08:40.949 --> 00:08:47.236
次回は、このレイアウトを保ちながら、色と部品の設計を整理します。

103
00:08:47.236 --> 00:08:49.004
お疲れさまでした。