SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、グリッド・オート・カラムズです。
  4. 0:07グリッドで項目を横に並べていると、最初に用意した列だけでは足りず、項目が増えたぶんだけ列が自動で横に増えていく場面があります。
  5. 0:16その自動で生まれる列を、暗黙の列と呼びます。
  6. 0:19このプロパティは、その暗黙の列の幅を親からまとめて決めるためのものです。
  7. 0:25幅を広くするのか、狭くそろえるのか。
  8. 0:27その違いを比べながら、順番に見ていきましょう。
  9. 0:31まず基本の書き方です。
  10. 0:33書き方はほかのプロパティと同じで、対象のセレクターに、プロパティ名、コロン、
  11. 0:37値、セミコロンを書きます。
  12. 0:41スライドの例では、クラス名デモを持つ要素に、グリッド・オート・カラムズ、
  13. 0:45はちレムと指定しています。
  14. 0:48これは、自動で増える列の幅をはちレムにする、という意味です。
  15. 0:53大切なのは、列の中身である子ではなく、並べる側の親に書く点です。
  16. 0:58まずはこの一行を書いて、横に増える列の幅がどう決まるかをブラウザーで確かめてみてください。
  17. 1:05指定できる主な値を、二回に分けて整理します。
  18. 1:10まず基本の二つです。
  19. 1:11オートは、列の幅を内容に任せる指定で、長い文字が入れば列もそれに合わせて決まります。
  20. 1:19初期値もこのオートです。
  21. 1:21一方、はちレムのように長さで書くと、自動で増える列はすべてその幅でそろいます。
  22. 1:29横に並ぶカードの左端と右端がきれいにそろって見えるのは、こちらを選んだときです。
  23. 1:36ただし、内容が固定の幅に収まらないと、はみ出しや窮屈さの原因にもなります。
  24. 1:43そろえたいのか、内容を優先したいのかを先に決めてください。
  25. 1:48続いて、範囲やパターンで決める書き方です。
  26. 1:51ミンマックスは、括弧の中に下限と上限をカンマで区切って書きます。
  27. 1:56例えばミンマックス、ろくレム、カンマ、ワンエフアールなら、最低ろくレムを保ちながら、
  28. 2:01余った幅を分け合う指定になります。
  29. 2:05また、値を空白で並べることもできます。
  30. 2:08よんレム、はちレムと二つ書くと、自動で増える列はその順番を繰り返し、細い列と広い列が交互に並びます。
  31. 2:16エフアール単位も使えます。
  32. 2:18決まった幅だけでは足りない場面で、この二つの書き方が効いてきます。
  33. 2:23初期値と継承を確認します。
  34. 2:25仕様上の初期値はオートです。
  35. 2:27つまり何も書かなければ、自動で増える列は内容に合わせて幅が決まります。
  36. 2:32ただし仕様上の初期値と、ブラウザーの既定スタイルで実際に見えている値が、
  37. 2:35必ずしも同じとは限りません。
  38. 2:39要素に既定のスタイルや別のクラスが付いていれば、その結果が優先されることもあります。
  39. 2:45そして通常の継承はしません。
  40. 2:47親に書いたからといって、その指定が子へ自動で引き継がれるわけではないので、
  41. 2:51並べる親そのものへ直接書く必要があります。
  42. 2:55汎用値では、インヘリットは親の計算値、イニシャルは仕様の初期値に戻す指定です。
  43. 3:01実例を見ていきます。
  44. 3:02まずエイチティーエムエルの用意です。
  45. 3:05ステージという土台の箱の中にデモの箱を置き、その中に項目と書かれた小さなカードを六つ入れます。
  46. 3:12頭の部分、ヘッドには、スタイルシートを読み込むリンクを置いてください。
  47. 3:18親と子の構造そのものが例の一部です。
  48. 3:21グリッド・オート・カラムズを書くのは親であるデモの方で、並ぶのは子である項目の方、
  49. 3:25という役割分担を意識してください。
  50. 3:29項目を六つにしたのは、二行の枠に横方向へ流し込むことで、自動で増える列が三列分生まれ、
  51. 3:34幅の違いを比べやすくするためです。
  52. 3:39次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
  53. 3:45ステージとデモ、項目には、余白や枠線、背景色といった土台の見た目を先に整えます。
  54. 3:53デモにはディスプレイ、グリッドを指定し、明示する列はろくレムの一列だけ、
  55. 3:57行はよんレムを二行とします。
  56. 4:02そこへグリッド・オート・フロー、カラムを加えると、項目は縦に二つ入るごとに次の列へ流れます。
  57. 4:11六つの項目では列が三列必要になり、二列目以降が暗黙の列です。
  58. 4:17その幅を決めるのが、最後のグリッド・オート・カラムズ、はちレムです。
  59. 4:24はみ出した分はオーバーフロー、オートで横スクロールできるようにしています。
  60. 4:31値を変えて比べてみましょう。
  61. 4:33最後のグリッド・オート・カラムズの値だけを、はちレムからよんレムへ置き換えます。
  62. 4:39ファイルを保存してブラウザーを再読み込みすると、自動で増える二列目以降の幅が半分になり、
  63. 4:43全体が横にコンパクトに収まります。
  64. 4:47一列目のろくレムは、テンプレートで決めた明示の列なので変わりません。
  65. 4:52比較のコツは、変えるのはこの値ひとつだけにすることです。
  66. 4:56ほかの指定まで同時に書き換えると、違いの原因が分からなくなります。
  67. 5:01間違えやすい点を整理します。
  68. 5:04一番大切なのは、このプロパティはテンプレートで定義済みの列には適用されない、
  69. 5:08という点です。
  70. 5:12グリッド・テンプレート・カラムズで明示した列はそちらの指定が優先され、グリッド・オート・カラムズが決めるのは、
  71. 5:18それをはみ出して自動で増えた列だけです。
  72. 5:25暗黙の列が一つも作られなければ、値を変えても見た目は何も変わりません。
  73. 5:31効いていないように見えたら、まず見ている列が明示の列か暗黙の列か、そして項目が本当に横へ増えているかを確認してください。
  74. 5:41列の作られ方を分けて考えることが、理解の鍵になります。
  75. 5:46効かないときの確認手順です。
  76. 5:48まず親の表示方式がグリッドになっているか、オート・フローや配置によって項目が本当に新しい列へ増えているかを見てください。
  77. 5:57ここが違うと、値を変えても見た目は変わりません。
  78. 6:00次に開発者ツールで、ネットワークからスタイルシートが取得できているか、エレメンツで対象のクラスとセレクターが一致しているかを確認します。
  79. 6:10スタイルズで宣言が無効扱いになっていたり、別の宣言に上書きされたりしていないかも見ましょう。
  80. 6:17コンピューテッドで最終的な値を確認し、グリッド表示で明示トラックと暗黙トラックを見分けると原因を絞りやすくなります。
  81. 6:25三百二十ピクセル程度の画面幅や文字の拡大でも、内容を利用できるかまで確かめてください。
  82. 6:31最後に互換性とまとめです。
  83. 6:33二千二十六年九月確認の記録では、クロームは五十七以降、エッジは十六以降、
  84. 6:39ファイアフォックスは七十以降、サファリは十点一以降で対応しています。
  85. 6:45アンドロイド版クロームは五十七以降、アイオーエス版サファリは十点三以降です。
  86. 6:51練習は、まず、はちレムとよんレムの違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて結果を比べることです。
  87. 6:59まとめます。
  88. 7:00グリッド・オート・カラムズは自動で増える列の幅、初期値はオートで継承はしません。
  89. 7:07テンプレートの列には効かない点に注意して使ってください。
  90. 7:11お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

grid-auto-columnsの役割と主な指定値を解説。自動生成される列の幅が変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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