SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

CSSレイアウト実践：FlexboxとGridでナビゲーションとカードを配置するの解説動画

再生時間 7:49動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、シーエスエス入門、第六回です。
  3. 0:04今回のテーマは、レイアウトです。
  4. 0:07これまでのページは、内容が上から下へ、縦に並んでいるだけでした。
  5. 0:12今回は、そこへ横方向の配置を導入します。
  6. 0:15使う道具は二つです。
  7. 0:16ナビゲーションにはフレックスボックス、学習カードにはグリッドを使います。
  8. 0:22ここで大切なのは、どちらか一方でページ全体を作ろうとしないことです。
  9. 0:27並べたい内容と、揃え方に合わせて選べるようになること。
  10. 0:31それが今回のゴールです。
  11. 0:33元になる記事は、エスイーの部屋の、シーエスエス レイアウト実践、フレックスボックスとグリッド、
  12. 0:37です。
  13. 0:40まず、フレックスボックスの得意分野です。
  14. 0:43フレックスボックスは、行、または列という、一つの方向を中心に、要素を並べたり、
  15. 0:48余白を分配したりする仕組みです。
  16. 0:52サイト名とナビゲーションのように、サイズの異なる要素を一方向に並べる用途に向いています。
  17. 0:59使い方の入り口は、ディスプレイ、フレックスという一行です。
  18. 1:03これを指定した要素の、直接の子要素が、フレックスアイテムとして並びの対象になります。
  19. 1:09孫要素は対象にならない、という点が最初のポイントです。
  20. 1:14親に指定する、という関係を覚えてください。
  21. 1:17フレックスボックスの、二つの軸を整理します。
  22. 1:20ジャスティファイコンテントは、主軸方向の揃え方です。
  23. 1:24アラインアイテムズは、主軸と交わる、交差軸方向の揃え方です。
  24. 1:29ここで注意点があります。
  25. 1:31フレックスディレクションを変えると、主軸そのものが入れ替わります。
  26. 1:36ですから、ジャスティファイは横、アラインは縦、と固定して覚えないでください。
  27. 1:42主軸と交差軸、という言葉で覚えるのが安全です。
  28. 1:46もう一つ、フレックスラップ、ラップは、一行に入りきらない項目の折り返しを許可する指定です。
  29. 1:53画面が狭くなったときの、はみ出し防止に効きます。
  30. 1:56次は、グリッドです。
  31. 1:58グリッドは、列と行を先に定義して、その枠の中へ要素を配置する仕組みです。
  32. 2:04フレックスボックスが一方向なら、グリッドは縦と横の二次元、と覚えると区別しやすくなります。
  33. 2:12今回の使いどころは、学習カードです。
  34. 2:15三枚のカードの列幅を揃えたいので、グリッドテンプレートカラムズで列を定義します。
  35. 2:22もう一つ便利なのが、ギャップです。
  36. 2:24列と列の間、行と行の間の余白を、まとめて指定できます。
  37. 2:29各カードに左右のマージンを付けて調整する必要がなくなるのが、大きな利点です。
  38. 2:35列の指定、リピート スリー、ミンマックス ゼロ、カンマ、イチ エフアール、
  39. 2:40を分解して読みます。
  40. 2:44リピートは、同じ指定を繰り返す書き方で、ここでは三列分です。
  41. 2:49エフアールは、余白を除いた利用可能な幅を、列で分け合うための単位です。
  42. 2:55ミンマックスは、最小値と最大値の範囲を指定します。
  43. 3:00最小幅をゼロにしておくことで、内容が持つ最小幅に引っ張られて、列が広がりすぎる事態を避けやすくなります。
  44. 3:09ただし万能ではありません。
  45. 3:11長いユーアールエルのように、内容そのものが折り返されない場合は、別途の対策が必要になることも覚えておきましょう。
  46. 3:21ここから、実際に追加するコードです。
  47. 3:24第五回までのスタイルズ ドット シーエスエスの末尾へ追加します。
  48. 3:29エイチティーエムエルは、第三回から共通のものを使います。
  49. 3:34まず、ヘッダーロウです。
  50. 3:36ディスプレイ、フレックスで横並びにし、アラインアイテムズ、センターで縦方向の中央を揃えます。
  51. 3:43ジャスティファイコンテント、スペースビトウィーンで、サイト名とナビゲーションを両端へ分けます。
  52. 3:50ギャップ二十ピクセルが最低限の間隔で、フレックスラップ、ラップが折り返しの許可です。
  53. 3:57そして、ナブ自体にもフレックスを指定し、リンク同士の間隔をギャップで空けます。
  54. 4:03追加コードの二つ目、カードの配置です。
  55. 4:06ドット カーズに、ディスプレイ、グリッドを指定し、列は先ほど解説した、三列の指定です。
  56. 4:13間隔は、ギャップ二十四ピクセルに統一します。
  57. 4:17ここで、忘れてはいけない行があります。
  58. 4:20ドット カード、プラス、ドット カード、マージントップ、ゼロです。
  59. 4:26前回は、縦並びのために、二枚目以降のカードへ上のマージンを付けていました。
  60. 4:32今回は、間隔の役割をギャップへ移すので、その名残をゼロに戻します。
  61. 4:38これを忘れると、二枚目以降だけ位置がずれてしまいます。
  62. 4:42配置方法を変えたら、前の方法で作った余白も点検する。
  63. 4:47これが今回いちばん実務的な習慣です。
  64. 4:50追加コードの三つ目です。
  65. 4:52ヒーローグリッドと、アバウトグリッドは、紹介部分を二列にするための指定です。
  66. 4:58列の書き方は、カードと同じ考え方で、二列版です。
  67. 5:01ギャップは四十ピクセルと、カードより広めに取り、本文と補足の区切りをはっきりさせます。
  68. 5:08アラインアイテムズ、センターで、高さの違う内容同士を、縦方向の中央で揃えます。
  69. 5:14カードの指定と読み比べてみると、グリッドの基本形は、ディスプレイ、列の定義、
  70. 5:19ギャップ、という三点セットだということが見えてきます。
  71. 5:24配置を作るときの、大切な約束です。
  72. 5:27フレックスボックスやグリッドを使うと、見た目の順序を変更することもできます。
  73. 5:34しかし、キーボードで移動する順序や、読み上げの順序まで、同じように変わるとは限りません。
  74. 5:42見た目と、たどる順序が食い違うと、使う人を迷わせてしまいます。
  75. 5:47そこで今回は、エイチティーエムエルの順序を、そのまま左から右、上から下へ表示する方針にします。
  76. 5:56見た目だけを都合よく並べ替える前に、文書の順序そのものが適切かどうかを見直しましょう。
  77. 6:03順序の正しさは、エイチティーエムエル側で決まるのです。
  78. 6:08ポジションの使い方も絞っておきます。
  79. 6:11ページ全体を、ポジション、アブソリュートと座標で配置してしまうと、文章が増えたときや、
  80. 6:16画面幅が変わったときに、要素同士が重なりやすくなります。
  81. 6:21座標は、置いた瞬間の見た目しか保証してくれません。
  82. 6:25通常の流れの中で並べられる内容は、フレックスボックスやグリッドに任せましょう。
  83. 6:31絶対配置は、アイコンの重ね合わせのように、基準が明確な部分に限定します。
  84. 6:36道具を増やすのではなく、用途で使い分ける。
  85. 6:39この回で身につける感覚は、まさにそこです。
  86. 6:42最後に、応用と練習です。
  87. 6:44応用として、列数を固定しない書き方も紹介します。
  88. 6:48オートフィットとミンマックスを組み合わせると、各列を原則、ジュウロク レム以上に保ちながら、
  89. 6:52入る数だけカードを並べられます。
  90. 6:57親がそれより狭いときは、百パーセントまで縮める設計です。
  91. 7:01これは比較用の例なので、試したら、この回の完成コードへ戻してください。
  92. 7:06確認のポイントは、広い画面で、カードが三列、紹介部分が二列になっていることです。
  93. 7:12小さな画面では三列が狭くなりますが、その対策、モバイル向けの一列配置と切り替え条件は、
  94. 7:16次回のテーマです。
  95. 7:20練習は二つ。
  96. 7:21カードを一枚複製して四枚に増やし、四枚目が次の行へ回ることを確認すること。
  97. 7:27ギャップを十六ピクセルと三十二ピクセルで比べて、読みやすさを観察すること。
  98. 7:32まとめです。
  99. 7:33今回は、並べ方の道具としてフレックスボックスとグリッドを使い分け、余白の役割をギャップへ移し、
  100. 7:38文書の順序を保つ配置を作りました。
  101. 7:43次回は、スマートフォンとパソコンに対応する、レスポンシブな調整です。
  102. 7:48お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

Flexboxでナビゲーション、Gridでカードを配置。gap、minmax、auto-fitを比較し、HTMLの読み順を保ったレイアウトを作ります。

解説記事・サンプルコードを読む：CSSレイアウト実践：FlexboxとGridでナビゲーションとカードを配置する →