WEBVTT

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

2
00:00:00.913 --> 00:00:04.868
エイチティーエムエル、シーエスエス入門、第六回です。

3
00:00:04.868 --> 00:00:07.302
今回のテーマは、レイアウトです。

4
00:00:07.302 --> 00:00:12.171
これまでのページは、内容が上から下へ、縦に並んでいるだけでした。

5
00:00:12.171 --> 00:00:15.213
今回は、そこへ横方向の配置を導入します。

6
00:00:15.213 --> 00:00:16.735
使う道具は二つです。

7
00:00:16.735 --> 00:00:22.212
ナビゲーションにはフレックスボックス、学習カードにはグリッドを使います。

8
00:00:22.212 --> 00:00:27.384
ここで大切なのは、どちらか一方でページ全体を作ろうとしないことです。

9
00:00:27.384 --> 00:00:31.492
並べたい内容と、揃え方に合わせて選べるようになること。

10
00:00:31.492 --> 00:00:33.317
それが今回のゴールです。

11
00:00:33.317 --> 00:00:37.121
元になる記事は、エスイーの部屋の、シーエスエス レイアウト実践、フレックスボックスとグリッド、

12
00:00:37.121 --> 00:00:40.924
です。

13
00:00:40.924 --> 00:00:43.982
まず、フレックスボックスの得意分野です。

14
00:00:43.982 --> 00:00:48.186
フレックスボックスは、行、または列という、一つの方向を中心に、要素を並べたり、

15
00:00:48.186 --> 00:00:52.391
余白を分配したりする仕組みです。

16
00:00:52.391 --> 00:00:59.118
サイト名とナビゲーションのように、サイズの異なる要素を一方向に並べる用途に向いています。

17
00:00:59.118 --> 00:01:03.552
使い方の入り口は、ディスプレイ、フレックスという一行です。

18
00:01:03.552 --> 00:01:09.973
これを指定した要素の、直接の子要素が、フレックスアイテムとして並びの対象になります。

19
00:01:09.973 --> 00:01:14.101
孫要素は対象にならない、という点が最初のポイントです。

20
00:01:14.101 --> 00:01:17.312
親に指定する、という関係を覚えてください。

21
00:01:17.312 --> 00:01:20.743
フレックスボックスの、二つの軸を整理します。

22
00:01:20.743 --> 00:01:24.798
ジャスティファイコンテントは、主軸方向の揃え方です。

23
00:01:24.798 --> 00:01:29.478
アラインアイテムズは、主軸と交わる、交差軸方向の揃え方です。

24
00:01:29.478 --> 00:01:31.349
ここで注意点があります。

25
00:01:31.349 --> 00:01:36.496
フレックスディレクションを変えると、主軸そのものが入れ替わります。

26
00:01:36.496 --> 00:01:42.423
ですから、ジャスティファイは横、アラインは縦、と固定して覚えないでください。

27
00:01:42.423 --> 00:01:46.010
主軸と交差軸、という言葉で覚えるのが安全です。

28
00:01:46.010 --> 00:01:53.029
もう一つ、フレックスラップ、ラップは、一行に入りきらない項目の折り返しを許可する指定です。

29
00:01:53.029 --> 00:01:56.772
画面が狭くなったときの、はみ出し防止に効きます。

30
00:01:56.772 --> 00:01:58.467
次は、グリッドです。

31
00:01:58.467 --> 00:02:04.568
グリッドは、列と行を先に定義して、その枠の中へ要素を配置する仕組みです。

32
00:02:04.568 --> 00:02:12.194
フレックスボックスが一方向なら、グリッドは縦と横の二次元、と覚えると区別しやすくなります。

33
00:02:12.194 --> 00:02:15.244
今回の使いどころは、学習カードです。

34
00:02:15.244 --> 00:02:22.023
三枚のカードの列幅を揃えたいので、グリッドテンプレートカラムズで列を定義します。

35
00:02:22.023 --> 00:02:24.904
もう一つ便利なのが、ギャップです。

36
00:02:24.904 --> 00:02:29.480
列と列の間、行と行の間の余白を、まとめて指定できます。

37
00:02:29.480 --> 00:02:35.920
各カードに左右のマージンを付けて調整する必要がなくなるのが、大きな利点です。

38
00:02:35.920 --> 00:02:40.109
列の指定、リピート スリー、ミンマックス ゼロ、カンマ、イチ エフアール、

39
00:02:40.109 --> 00:02:44.298
を分解して読みます。

40
00:02:44.298 --> 00:02:49.645
リピートは、同じ指定を繰り返す書き方で、ここでは三列分です。

41
00:02:49.645 --> 00:02:55.884
エフアールは、余白を除いた利用可能な幅を、列で分け合うための単位です。

42
00:02:55.884 --> 00:03:00.340
ミンマックスは、最小値と最大値の範囲を指定します。

43
00:03:00.340 --> 00:03:09.609
最小幅をゼロにしておくことで、内容が持つ最小幅に引っ張られて、列が広がりすぎる事態を避けやすくなります。

44
00:03:09.609 --> 00:03:11.926
ただし万能ではありません。

45
00:03:11.926 --> 00:03:21.908
長いユーアールエルのように、内容そのものが折り返されない場合は、別途の対策が必要になることも覚えておきましょう。

46
00:03:21.908 --> 00:03:24.729
ここから、実際に追加するコードです。

47
00:03:24.729 --> 00:03:29.745
第五回までのスタイルズ ドット シーエスエスの末尾へ追加します。

48
00:03:29.745 --> 00:03:34.134
エイチティーエムエルは、第三回から共通のものを使います。

49
00:03:34.134 --> 00:03:36.015
まず、ヘッダーロウです。

50
00:03:36.015 --> 00:03:43.225
ディスプレイ、フレックスで横並びにし、アラインアイテムズ、センターで縦方向の中央を揃えます。

51
00:03:43.225 --> 00:03:50.592
ジャスティファイコンテント、スペースビトウィーンで、サイト名とナビゲーションを両端へ分けます。

52
00:03:50.592 --> 00:03:57.175
ギャップ二十ピクセルが最低限の間隔で、フレックスラップ、ラップが折り返しの許可です。

53
00:03:57.175 --> 00:04:03.288
そして、ナブ自体にもフレックスを指定し、リンク同士の間隔をギャップで空けます。

54
00:04:03.288 --> 00:04:06.513
追加コードの二つ目、カードの配置です。

55
00:04:06.513 --> 00:04:13.812
ドット カーズに、ディスプレイ、グリッドを指定し、列は先ほど解説した、三列の指定です。

56
00:04:13.812 --> 00:04:17.547
間隔は、ギャップ二十四ピクセルに統一します。

57
00:04:17.547 --> 00:04:20.772
ここで、忘れてはいけない行があります。

58
00:04:20.772 --> 00:04:26.374
ドット カード、プラス、ドット カード、マージントップ、ゼロです。

59
00:04:26.374 --> 00:04:32.654
前回は、縦並びのために、二枚目以降のカードへ上のマージンを付けていました。

60
00:04:32.654 --> 00:04:38.256
今回は、間隔の役割をギャップへ移すので、その名残をゼロに戻します。

61
00:04:38.256 --> 00:04:42.839
これを忘れると、二枚目以降だけ位置がずれてしまいます。

62
00:04:42.839 --> 00:04:47.253
配置方法を変えたら、前の方法で作った余白も点検する。

63
00:04:47.253 --> 00:04:50.308
これが今回いちばん実務的な習慣です。

64
00:04:50.308 --> 00:04:52.157
追加コードの三つ目です。

65
00:04:52.157 --> 00:04:58.014
ヒーローグリッドと、アバウトグリッドは、紹介部分を二列にするための指定です。

66
00:04:58.014 --> 00:05:01.713
列の書き方は、カードと同じ考え方で、二列版です。

67
00:05:01.713 --> 00:05:08.340
ギャップは四十ピクセルと、カードより広めに取り、本文と補足の区切りをはっきりさせます。

68
00:05:08.340 --> 00:05:14.350
アラインアイテムズ、センターで、高さの違う内容同士を、縦方向の中央で揃えます。

69
00:05:14.350 --> 00:05:19.359
カードの指定と読み比べてみると、グリッドの基本形は、ディスプレイ、列の定義、

70
00:05:19.359 --> 00:05:24.368
ギャップ、という三点セットだということが見えてきます。

71
00:05:24.368 --> 00:05:27.419
配置を作るときの、大切な約束です。

72
00:05:27.419 --> 00:05:34.239
フレックスボックスやグリッドを使うと、見た目の順序を変更することもできます。

73
00:05:34.239 --> 00:05:42.137
しかし、キーボードで移動する順序や、読み上げの順序まで、同じように変わるとは限りません。

74
00:05:42.137 --> 00:05:47.701
見た目と、たどる順序が食い違うと、使う人を迷わせてしまいます。

75
00:05:47.701 --> 00:05:56.136
そこで今回は、エイチティーエムエルの順序を、そのまま左から右、上から下へ表示する方針にします。

76
00:05:56.136 --> 00:06:03.854
見た目だけを都合よく並べ替える前に、文書の順序そのものが適切かどうかを見直しましょう。

77
00:06:03.854 --> 00:06:08.700
順序の正しさは、エイチティーエムエル側で決まるのです。

78
00:06:08.700 --> 00:06:11.348
ポジションの使い方も絞っておきます。

79
00:06:11.348 --> 00:06:16.572
ページ全体を、ポジション、アブソリュートと座標で配置してしまうと、文章が増えたときや、

80
00:06:16.572 --> 00:06:21.795
画面幅が変わったときに、要素同士が重なりやすくなります。

81
00:06:21.795 --> 00:06:25.473
座標は、置いた瞬間の見た目しか保証してくれません。

82
00:06:25.473 --> 00:06:31.212
通常の流れの中で並べられる内容は、フレックスボックスやグリッドに任せましょう。

83
00:06:31.212 --> 00:06:36.508
絶対配置は、アイコンの重ね合わせのように、基準が明確な部分に限定します。

84
00:06:36.508 --> 00:06:39.598
道具を増やすのではなく、用途で使い分ける。

85
00:06:39.598 --> 00:06:42.688
この回で身につける感覚は、まさにそこです。

86
00:06:42.688 --> 00:06:44.491
最後に、応用と練習です。

87
00:06:44.491 --> 00:06:48.097
応用として、列数を固定しない書き方も紹介します。

88
00:06:48.097 --> 00:06:52.755
オートフィットとミンマックスを組み合わせると、各列を原則、ジュウロク レム以上に保ちながら、

89
00:06:52.755 --> 00:06:57.413
入る数だけカードを並べられます。

90
00:06:57.413 --> 00:07:01.620
親がそれより狭いときは、百パーセントまで縮める設計です。

91
00:07:01.620 --> 00:07:06.878
これは比較用の例なので、試したら、この回の完成コードへ戻してください。

92
00:07:06.878 --> 00:07:12.888
確認のポイントは、広い画面で、カードが三列、紹介部分が二列になっていることです。

93
00:07:12.888 --> 00:07:16.795
小さな画面では三列が狭くなりますが、その対策、モバイル向けの一列配置と切り替え条件は、

94
00:07:16.795 --> 00:07:20.702
次回のテーマです。

95
00:07:20.702 --> 00:07:21.603
練習は二つ。

96
00:07:21.603 --> 00:07:27.162
カードを一枚複製して四枚に増やし、四枚目が次の行へ回ることを確認すること。

97
00:07:27.162 --> 00:07:32.722
ギャップを十六ピクセルと三十二ピクセルで比べて、読みやすさを観察すること。

98
00:07:32.722 --> 00:07:33.623
まとめです。

99
00:07:33.623 --> 00:07:38.431
今回は、並べ方の道具としてフレックスボックスとグリッドを使い分け、余白の役割をギャップへ移し、

100
00:07:38.431 --> 00:07:43.239
文書の順序を保つ配置を作りました。

101
00:07:43.239 --> 00:07:48.348
次回は、スマートフォンとパソコンに対応する、レスポンシブな調整です。

102
00:07:48.348 --> 00:07:49.700
お疲れさまでした。