SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

CSSのgrid-auto-flowの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

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

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、グリッド・オート・フローです。
  4. 0:06グリッドでは、場所を細かく指定しなくても、項目が自動で空いている場所へ次々と並んでいきます。
  5. 0:13このプロパティは、その自動配置の流れを決めるものです。
  6. 0:17行の方向へ横に流すのか、列の方向へ縦に流すのか。
  7. 0:21さらに、できてしまった隙間を詰めるかどうかも選べます。
  8. 0:25並び方のルールを決める司令塔として、順番に見ていきましょう。
  9. 0:29写真の一覧やカードの並びなど、数が変わる項目を扱う場面で、この流れの違いがそのまま使いやすさにつながります。
  10. 0:37まず基本の書き方です。
  11. 0:39書き方はほかのプロパティと同じで、対象のセレクターに、プロパティ名、コロン、
  12. 0:43値、セミコロンを書きます。
  13. 0:47スライドの例では、クラス名デモを持つ要素に、グリッド・オート・フロー、カラムと指定しています。
  14. 0:54これは、自動配置を列の方向へ流す、という意味です。
  15. 0:58大切なのは、並ぶ子ではなく、並べる側の親に書く点です。
  16. 1:02まずはこの一行を書いて、項目がどの順番でどの場所へ入っていくかを、ブラウザーで確かめてみてください。
  17. 1:09値のスペルを一文字でも間違えると、宣言全体が無効になってしまうので、書き終えたら値のつづりも見直してください。
  18. 1:18指定できる主な値を、二回に分けて整理します。
  19. 1:22まず基本の二つです。
  20. 1:23ローは行の方向へ流す指定で、項目はまず横に並び、行がいっぱいになると次の行へ移ります。
  21. 1:30こちらが初期値でもあります。
  22. 1:33一方カラムは列の方向へ流す指定で、項目はまず縦に並び、列がいっぱいになると次の列へ移ります。
  23. 1:40同じ六つの項目でも、ローとカラムでは番号の進む方向が直角に変わります。
  24. 1:46読み進める順番を横にしたいのか、縦にしたいのかを先に決めてください。
  25. 1:52普段の文章が横書きで左から右へ進むように、ローは自然に感じる並び方で、カラムは新聞の段組みのように縦へ進む並び方だとイメージすると分かりやすくなります。
  26. 2:04続いて、隙間を詰めるデンスです。
  27. 2:07大きな項目が先に入ると、後ろに小さな隙間が残ることがあります。
  28. 2:11通常はその隙間を飛ばして先へ進みますが、デンスを付けると、後ろの小さな項目が戻ってきて隙間を埋めるように配置されます。
  29. 2:20ロー・デンス、カラム・デンスのように、方向と組み合わせて書くのが基本です。
  30. 2:26ただし隙間を埋めるぶん、見た目の並び順がエイチティーエムエルの順番と変わる場合があります。
  31. 2:32便利さと読み順の分かりやすさ、その両方を見ながら選んでください。
  32. 2:37つまりデンスは、空白を減らして画面を有効に使いたいときに候補になる指定です。
  33. 2:42隙間が気になる一覧で試してみてください。
  34. 2:45初期値と継承を確認します。
  35. 2:47仕様上の初期値はローです。
  36. 2:49つまり何も書かなければ、自動配置は行の方向へ流れます。
  37. 2:53ただし仕様上の初期値と、ブラウザーの既定スタイルで実際に見えている値が、
  38. 2:56必ずしも同じとは限りません。
  39. 3:00要素に既定のスタイルや別のクラスが付いていれば、その結果が優先されることもあります。
  40. 3:06そして通常の継承はしません。
  41. 3:08親に書いたからといって、その指定が子へ自動で引き継がれるわけではないので、
  42. 3:12並べる親そのものへ直接書く必要があります。
  43. 3:16汎用値では、インヘリットは親の計算値、イニシャルは仕様の初期値に戻す指定です。
  44. 3:21実例を見ていきます。
  45. 3:23まずエイチティーエムエルの用意です。
  46. 3:26ステージという土台の箱の中にデモの箱を置き、その中に項目と書かれた小さなカードを六つ入れます。
  47. 3:33頭の部分、ヘッドには、スタイルシートを読み込むリンクを置いてください。
  48. 3:38親と子の構造そのものが例の一部です。
  49. 3:41グリッド・オート・フローを書くのは親であるデモの方で、並ぶのは子である項目の方、
  50. 3:46という役割分担を意識してください。
  51. 3:50項目を六つにしたのは、二行の枠の中で縦と横、どちらの流れになるかを比べやすくするためです。
  52. 3:57項目の文字はあえて短くそろえてあります。
  53. 4:00長い文章が入ったときの崩れは、値を比べたあとで別に確認するとよいでしょう。
  54. 4:06次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
  55. 4:11ステージとデモ、項目には、余白や枠線、背景色といった土台の見た目を先に整えます。
  56. 4:17デモにはディスプレイ、グリッドを指定し、最初の列はろくレム、行はよんレムを二行とします。
  57. 4:24そこへグリッド・オート・フロー、カラムを加えると、項目はまず縦に二つ入り、
  58. 4:29次に右の列へ、さらにその右へと流れます。
  59. 4:33自動で増える列の幅は、グリッド・オート・カラムズ、ろくレムでそろえます。
  60. 4:39はみ出した分はオーバーフロー、オートで横スクロールできるようにしています。
  61. 4:45主役は最後のグリッド・オート・フロー、カラムの一行です。
  62. 4:49値を変えて比べてみましょう。
  63. 4:52最後のグリッド・オート・フローの値だけを、カラムからローへ置き換えます。
  64. 4:58ファイルを保存してブラウザーを再読み込みすると、今度は項目がまず横へ並び、
  65. 5:03行がいっぱいになると下の行へ移る流れに変わります。
  66. 5:08番号の進み方が縦方向から横方向へ切り替わる様子に注目してください。
  67. 5:13比較のコツは、変えるのはこの値ひとつだけにすることです。
  68. 5:18ほかの指定まで同時に書き換えると、違いの原因が分からなくなります。
  69. 5:23画面の中で番号を目で追い、縦に進むのか横に進むのかを声に出して確認すると、
  70. 5:28流れの違いが体に残ります。
  71. 5:32間違えやすい点を整理します。
  72. 5:33一番大切なのは、デンスを使うと見た目の順番がエイチティーエムエルの順番と変わる場合がある、
  73. 5:37という点です。
  74. 5:40隙間を埋めるために、後ろの項目が前へ出てくるからです。
  75. 5:43写真の一覧なら問題になりにくくても、入力項目やリンクが並ぶ場所では、キーボードで移動する操作順と見た目がずれて、
  76. 5:48使う人を迷わせることがあります。
  77. 5:52また、場所を明示して配置した項目は自動配置の対象外です。
  78. 5:56効いていないように見えたら、まずその項目が自動配置なのか、明示配置なのかを確認してください。
  79. 6:02順番が大切なコンテンツでは、デンスを使わない選択も立派な判断です。
  80. 6:06見た目の詰まり具合だけで決めないようにしましょう。
  81. 6:09効かないときの確認手順です。
  82. 6:11まず親の表示方式がグリッドになっているか、行と列の枠が流れを受け止められる形になっているかを見てください。
  83. 6:20ここが違うと、値を変えても見た目は変わりません。
  84. 6:23次に開発者ツールで、ネットワークからスタイルシートが取得できているか、エレメンツで対象のクラスとセレクターが一致しているかを確認します。
  85. 6:34スタイルズで宣言が無効扱いになっていたり、別の宣言に上書きされたりしていないかも見ましょう。
  86. 6:41コンピューテッドで最終的な値を確認し、グリッド表示で明示トラックと暗黙トラックを見分けると原因を絞りやすくなります。
  87. 6:51三百二十ピクセル程度の画面幅や文字の拡大、キーボード操作でも内容を利用できるかまで確かめてください。
  88. 6:59最後に互換性とまとめです。
  89. 7:01二千二十六年九月確認の記録では、クロームは五十七以降、エッジは十六以降、
  90. 7:06ファイアフォックスは五十二以降、サファリは十点一以降で対応しています。
  91. 7:11アンドロイド版クロームは五十七以降、アイオーエス版サファリは十点三以降です。
  92. 7:17練習は、まずカラムとローの違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて結果を比べることです。
  93. 7:25まとめます。
  94. 7:26グリッド・オート・フローは自動配置の流れ、初期値はローで継承はしません。
  95. 7:32デンスでは見た目の順番に注意して使ってください。
  96. 7:35関連するプロパティとして、自動で増える行の高さを決めるグリッド・オート・ローズと、
  97. 7:42列の幅を決めるグリッド・オート・カラムズも、あわせて確認しておくと理解が深まります。
  98. 7:48お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

grid-auto-flowの役割と主な指定値を解説。項目を列方向または行方向へ増やす配置を比較します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのgrid-auto-flowの使い方：指定値・実例・効かない原因とブラウザー互換性 →