WEBVTT

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

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

3
00:00:04.101 --> 00:00:07.006
今回のテーマは、ディスプレイです。

4
00:00:07.006 --> 00:00:13.500
このプロパティは、レイアウトを考えるときの入口になる、とても大切な設定です。

5
00:00:13.500 --> 00:00:16.746
ポイントは二つに分けて考えることです。

6
00:00:16.746 --> 00:00:22.044
一つ目は外側、つまりその要素自身が前後の要素とどう並ぶかです。

7
00:00:22.044 --> 00:00:27.683
二つ目は内側、つまりその要素の中にある子要素をどう配置するかです。

8
00:00:27.683 --> 00:00:36.056
たとえばフレックスという値は、外側はブロックとして改行し、内側はフレックスボックスで子を並べます。

9
00:00:36.056 --> 00:00:41.524
この外と内の区別が分かると、たくさんの値を整理して覚えられます。

10
00:00:41.524 --> 00:00:43.012
まず基本の書き方です。

11
00:00:43.012 --> 00:00:49.101
スライドのように、対象のクラスにディスプレイと値を書くだけで、表示の方式が切り替わります。

12
00:00:49.101 --> 00:00:53.160
仕様上の初期値はインラインで、通常は親から子へ継承しません。

13
00:00:53.160 --> 00:00:57.625
では、なぜディブ要素は最初からブロックのように見えるのでしょうか。

14
00:00:57.625 --> 00:01:03.984
それはブラウザーが用意している既定のスタイルシートが、要素ごとに表示方式を決めているからです。

15
00:01:03.984 --> 00:01:08.449
仕様の初期値と、タグごとの既定の見え方は別物として区別しましょう。

16
00:01:08.449 --> 00:01:13.184
この違いを知っておくと、スパンとディブで結果が違う理由も納得できます。

17
00:01:13.184 --> 00:01:15.391
最も基本の二つを比べます。

18
00:01:15.391 --> 00:01:20.822
ブロックは前後で改行する箱で、幅と高さの指定がそのまま効きます。

19
00:01:20.822 --> 00:01:25.914
幅を指定しなければ、使える横幅いっぱいに広がるのが通常です。

20
00:01:25.914 --> 00:01:30.158
一方、インラインは文章の行の中に参加する表示です。

21
00:01:30.158 --> 00:01:35.759
前後の文字と同じ行に並び、内容が長ければ行をまたいで折り返します。

22
00:01:35.759 --> 00:01:44.416
注意点は、通常のスパンなどのインライン要素では、幅と高さを指定しても箱の大きさを固定できないことです。

23
00:01:44.416 --> 00:01:53.412
上下の余白の効き方もブロックとは違うため、大きさを持たせたい場合は次のインラインブロックが候補になります。

24
00:01:53.412 --> 00:02:00.335
インラインブロックは、ブロックとインラインの良いところを組み合わせたような値です。

25
00:02:00.335 --> 00:02:07.765
要素自身は前後の内容と同じ行に参加しますが、ブロックと同じように幅と高さを指定できます。

26
00:02:07.765 --> 00:02:15.701
そのため、ボタンやラベル、バッジのような、小さくて大きさのある部品を作るときによく使われます。

27
00:02:15.701 --> 00:02:18.741
知っておきたい注意点も二つあります。

28
00:02:18.741 --> 00:02:26.677
一つは、エイチティーエムエルの改行や空白が、箱と箱の間のすき間として見えることがあることです。

29
00:02:26.677 --> 00:02:32.756
もう一つは、縦方向の揃え方がバーティカルアラインの影響を受けることです。

30
00:02:32.756 --> 00:02:36.640
並びがずれたら、まずこの指定を確認しましょう。

31
00:02:36.640 --> 00:02:38.147
次はフレックスです。

32
00:02:38.147 --> 00:02:43.119
ディスプレイ、フレックスを指定した要素は、外側ではブロックとして前後で改行し、

33
00:02:43.119 --> 00:02:48.091
内側では直接の子がフレックスアイテムになって並びます。

34
00:02:48.091 --> 00:02:54.269
既定では横方向に並び、フレックスディレクションをカラムにすれば縦方向にもできます。

35
00:02:54.269 --> 00:03:00.597
ギャップで間隔を空けたり、アラインアイテムズで縦の揃え方を変えたりするのが基本です。

36
00:03:00.597 --> 00:03:05.720
対になるのがインラインフレックスで、内側の並べ方はまったく同じです。

37
00:03:05.720 --> 00:03:09.637
違うのは外側だけで、要素自身が文章の行に参加します。

38
00:03:09.637 --> 00:03:15.212
アイコンと文字をまとめた小さなラベルなど、行の中に置きたいときに便利です。

39
00:03:15.212 --> 00:03:19.659
グリッドは、行と列の両方をそろえたいときのレイアウトです。

40
00:03:19.659 --> 00:03:27.172
ディスプレイ、グリッドを指定すると、外側はブロックとして扱われ、内側にグリッドの配置が作られます。

41
00:03:27.172 --> 00:03:30.545
ここで大切なのは、グリッドと書いただけでは自動で三列になるわけではない、

42
00:03:30.545 --> 00:03:33.919
ということです。

43
00:03:33.919 --> 00:03:38.825
列の作り方は、グリッドテンプレートカラムズなどで別に指定します。

44
00:03:38.825 --> 00:03:47.719
フレックスとの違いは、複数の行で同じ列幅を共有できる点で、カード一覧や画面全体の区画をきれいにそろえるのに向きます。

45
00:03:47.719 --> 00:03:57.072
インライングリッドは、そのグリッドの箱自体が文章の行に参加する版で、小さな表のような部品を行の中に置きたいときに使えます。

46
00:03:57.072 --> 00:04:00.066
消し方に関わる二つの値を比べます。

47
00:04:00.066 --> 00:04:07.286
ノンは、要素とその子をすべて表示せず、占めていた場所もなくなって前後が詰まります。

48
00:04:07.286 --> 00:04:14.154
ドムから要素自体が消えるわけではないので、ジャバスクリプトで再表示もできます。

49
00:04:14.154 --> 00:04:19.878
もう一つのコンテンツは正反対に近く、要素自身の背景や枠線といった箱だけがなくなり、

50
00:04:19.878 --> 00:04:25.601
中の子要素は残って周囲のレイアウトに参加します。

51
00:04:25.601 --> 00:04:35.111
ただし、意味を持つ要素やフォーム部品に安易に使うと、支援技術での役割が失われる場合があるため注意が必要です。

52
00:04:35.111 --> 00:04:43.564
前回学んだビジビリティやオパシティとは目的が違うので、見た目だけで置き換えないようにしましょう。

53
00:04:43.564 --> 00:04:46.626
少し特殊な値もまとめて紹介します。

54
00:04:46.626 --> 00:04:52.029
フロウルートは、新しいブロック整形コンテキストを作る値です。

55
00:04:52.029 --> 00:05:00.855
フロートした画像を親の高さにきちんと含めたいときや、親子の余白の相殺を区切りたいときに役立ちます。

56
00:05:00.855 --> 00:05:05.177
子を横並びにする値ではない点に注意してください。

57
00:05:05.177 --> 00:05:12.021
リストアイテムは、項目の箱に加えて先頭の点や番号といったマーカーも作ります。

58
00:05:12.021 --> 00:05:21.387
テーブル系には、行を表すテーブルロウ、セルを表すテーブルセルなど、表の部品に対応する値がそろっています。

59
00:05:21.387 --> 00:05:29.312
ただし、データの表は見た目ではなくエイチティーエムエルのテーブル要素で作るのが原則です。

60
00:05:29.312 --> 00:05:34.974
ディスプレイには、外側と内側を二つの言葉で明示する書き方もあります。

61
00:05:34.974 --> 00:05:40.552
たとえば、ブロック、フレックスと書けばフレックスと同じ組み合わせを意味し、

62
00:05:40.552 --> 00:05:46.131
インライン、グリッドと書けばインライングリッドに対応します。

63
00:05:46.131 --> 00:05:50.377
理屈が分かりやすい反面、ブラウザーの対応が始まった時期は構文によって違うため、

64
00:05:50.377 --> 00:05:54.624
使う前に確認が必要です。

65
00:05:54.624 --> 00:06:01.618
実例で試すときは、ステージという親の中に、前、対象、あと、という並びと、

66
00:06:01.618 --> 00:06:08.612
エー、ビー、シーという三つの子を用意し、対象のディスプレイの値だけを切り替えるのがおすすめです。

67
00:06:08.612 --> 00:06:14.940
前後の改行、箱の幅と高さ、子の並び方を順番に観察すると違いがはっきりします。

68
00:06:14.940 --> 00:06:17.876
効かないと感じたときの確認ポイントです。

69
00:06:17.876 --> 00:06:22.279
最も多い勘違いは、フレックスやグリッドを、並べたい要素自身ではなく、その親に書くべき場面で、

70
00:06:22.279 --> 00:06:26.683
子側に書いてしまうことです。

71
00:06:26.683 --> 00:06:31.233
並べたいのが三つのカードなら、指定先はカードを包む親要素です。

72
00:06:31.233 --> 00:06:40.041
また、要素がすでにフレックスやグリッドのアイテムになっている場合、外側の表示の扱いが通常の流れとは変わることがあります。

73
00:06:40.041 --> 00:06:47.086
困ったら開発者ツールを開き、親と子の両方について、計算済みのディスプレイの値を確認してください。

74
00:06:47.086 --> 00:06:55.600
あわせて、見た目の並び順を変えても、読み上げやキーボードの順序はドムの順序のままである点も忘れないようにしましょう。

75
00:06:55.600 --> 00:06:57.804
最後に互換性とまとめです。

76
00:06:57.804 --> 00:07:03.058
ディスプレイ自体は、クローム一以降、エッジ十二以降、ファイアフォックス一以降、

77
00:07:03.058 --> 00:07:08.313
サファリ一以降と、古くから広く対応しています。

78
00:07:08.313 --> 00:07:16.450
ただし値ごとに差があり、フレックスはクローム二十九以降、グリッドはクローム五十七以降が目安です。

79
00:07:16.450 --> 00:07:22.552
新しい値や二キーワード表記を使うときは、その値まで含めて確認しましょう。

80
00:07:22.552 --> 00:07:23.569
まとめます。

81
00:07:23.569 --> 00:07:28.230
ディスプレイは外側の並び方と内側の配置を決める設定で、ブロック、インライン、

82
00:07:28.230 --> 00:07:32.892
フレックス、グリッドが中心でした。

83
00:07:32.892 --> 00:07:43.062
練習として、実例の値だけを一つずつ切り替え、改行、寸法、子の並びの三点がどう変わるかを自分の言葉で説明してみてください。

84
00:07:43.062 --> 00:07:44.588
お疲れさまでした。