SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

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

この動画で学べること

grid-auto-rowsの役割と主な指定値を解説。自動生成される行が内容に合わせて伸びるか、固定されるかを比べます。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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