SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、グリッド・ローです。
  4. 0:05グリッドで並べた項目は、通常は一つの行に入りますが、このプロパティを使うと、
  5. 0:10その項目が何行目の位置から始まり、どこまで縦に広がるのかを指定できます。
  6. 0:15たとえば重要なカードを縦に二行分大きく見せたいときに役立ちます。
  7. 0:20横方向を決めるグリッド・カラムと対になる、縦方向専用の指定だと覚えてください。
  8. 0:25まずは全体像をつかんでいきましょう。
  9. 0:28写真や説明文が多いカードをほかの項目より縦長に見せたい場面を思い浮かべると、
  10. 0:31使いどころがイメージしやすくなります。
  11. 0:35グリッド全体の中で縦方向だけを切り取って考えると、行と列の役割分担もはっきりしてきます。
  12. 0:41まず基本の書き方です。
  13. 0:43対象のセレクターに、プロパティ名、コロン、値、セミコロンを書く形はほかのプロパティと同じです。
  14. 0:51スライドの例では、クラス名デモを持つ要素に、グリッド・ロー、一、スラッシュ、
  15. 0:54三と指定しています。
  16. 0:58スラッシュの前が開始、後ろが終了を表すのが特徴です。
  17. 1:02この一行で、対象が縦に二行分を使うようになります。
  18. 1:06大切なのは、並べる親ではなく、配置される子の方へ書く点です。
  19. 1:11まずはこの基本形を覚えてください。
  20. 1:13書き方に慣れるまでは、スラッシュの前後を声に出して読み、開始と終了を取り違えていないか確かめるのがおすすめです。
  21. 1:22指定できる値を二回に分けて整理します。
  22. 1:25まず開始線と終了線を数字で書く方法です。
  23. 1:28ここでいう数字は、マスの番号ではなく、行を区切る線の番号です。
  24. 1:33たとえば一、スラッシュ、三と書くと、一本目の線から始まり、三本目の線の手前までを使うため、
  25. 1:38縦に二行分を占有します。
  26. 1:42一、スラッシュ、二なら一行分だけです。
  27. 1:45終了の数字から開始の数字を引いたものが、使う行の数になると理解すると、大きさの計算で迷いにくくなります。
  28. 1:53線で考えるのが、このプロパティ最大のコツです。
  29. 1:57たとえば二行目から四行目まで使いたい場合は、二、スラッシュ、五と書けば三行分になる、
  30. 2:01という具合に応用できます。
  31. 2:06続いて、スパンを使った指定です。
  32. 2:08スパン、二と書くと、開始位置から二行分に広がるという意味になります。
  33. 2:13二、スラッシュ、スパン、二のように開始線と組み合わせる書き方もできます。
  34. 2:19終了線をいちいち計算しなくてよいので、何行分使いたいかが先に決まっているときに便利です。
  35. 2:26また値を一つだけ書けば、その行から自動で配置され、オートと書けばブラウザーの自動配置に任せます。
  36. 2:34ほかにも名前を付けた線を指定する方法がありますが、まずは数字とスパンの二通りを押さえれば十分です。
  37. 2:42初期値と継承を確認します。
  38. 2:43このプロパティは、グリッド・ロー・スタートとグリッド・ロー・エンドという二つの個別プロパティをまとめたものです。
  39. 2:51そのため初期値は、それぞれの個別プロパティの初期値を参照します。
  40. 2:55そして通常の継承はしません。
  41. 2:57親に書いても子へ伝わるものではなく、配置したい項目そのものへ直接書く必要があります。
  42. 3:03仕様上の初期値とブラウザーの既定の見え方が同じとは限らない点も、あわせて押さえておきましょう。
  43. 3:09書かなかった場合は自動配置に任せる扱いになるため、ほかの項目との並び方にも影響します。
  44. 3:15実例を見ていきます。
  45. 3:17まずエイチティーエムエルの用意です。
  46. 3:20ステージという土台の箱の中に、項目を三つ入れます。
  47. 3:24二番目が今回の対象で、アイテムとデモ、二つのクラスを持っています。
  48. 3:29頭の部分、ヘッドには、スタイルシートを読み込むリンクを置いてください。
  49. 3:34親と子の構造そのものが例の一部です。
  50. 3:37グリッドの枠を作るのは親のステージ、グリッド・ローを書くのは子のデモ、という役割分担を意識してください。
  51. 3:45三つだけのシンプルな構成なので、対象だけが縦に伸びる変化をはっきり観察できます。
  52. 3:52次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
  53. 3:56ステージと項目には、余白や枠線、背景色といった土台の見た目を先に整えます。
  54. 4:02ステージにはディスプレイ、グリッドを指定し、列は等幅の三列、行は最小よんレムで自動、
  55. 4:06隙間はれい点ごレムとします。
  56. 4:11そこに対象のデモへグリッド・ロー、一、スラッシュ、三を加えると、対象は一行目から始まり、
  57. 4:16縦に二行分を占める縦長のカードになります。
  58. 4:21ほかの項目は、残りの空いたマスへ並びます。
  59. 4:24主役は最後のグリッド・ローの一行です。
  60. 4:27土台の指定は対象以外にも共通するので、主役の一行だけを変えたときの差が際立ち、
  61. 4:31行の高さの変化を比べやすくなります。
  62. 4:36値を変えて比べてみましょう。
  63. 4:38最後のグリッド・ローの値だけを、一、スラッシュ、三から、一、スラッシュ、
  64. 4:41二へ置き換えます。
  65. 4:44ファイルを保存してブラウザーを再読み込みすると、対象は一行分だけを使う通常の高さに戻ります。
  66. 4:51開始は同じ一行目なのに、終了の数字を一つ小さくしただけで、高さが二行分から一行分へ半分になる点に注目してください。
  67. 4:59比較のコツは、変えるのはこの値ひとつだけにすることです。
  68. 5:03終了の数字が高さに直結する、という感覚をつかむことが、このプロパティを理解する近道になります。
  69. 5:10間違えやすい点を整理します。
  70. 5:12一番注意したいのは重なりです。
  71. 5:14隣の要素も同じ場所を明示的に指定すると、項目同士が重なって表示されます。
  72. 5:19ブラウザーが自動で衝突を解決してくれると思わず、どの項目がどの行を使うのかを事前に整理してください。
  73. 5:26見た目の配置と、エイチティーエムエルの読み上げ順がずれる場合もあるので、
  74. 5:30配置と読み順をあわせて確認することも大切です。
  75. 5:34また、これは親でトラックを定義する指定ではなく、子の配置を決める指定です。
  76. 5:39親と子の役割を取り違えていないかも見直しましょう。
  77. 5:43重なった項目は下の項目が隠れて読めなくなることもあるので、重なりを意図する場合以外は、
  78. 5:48開始と終了の組み合わせを重ねて確認してください。
  79. 5:52効かないときの確認手順です。
  80. 5:54まずネットワークで、スタイルズ・ドット・シーエスエスが正常に取得できているかを確認します。
  81. 6:01次にエレメンツで、対象のクラスとシーエスエスのセレクターが一致しているかを見てください。
  82. 6:08スタイルズで宣言が無効扱いになっていたり、別の宣言に上書きされたりしていないかも重要です。
  83. 6:15コンピューテッドで最終的な値を確認し、親の表示方式がグリッドになっているか、
  84. 6:19行と列の枠が想定通りかも調べましょう。
  85. 6:24開発者ツールのグリッド表示で、明示トラックと暗黙トラックを見分けると原因を追いやすくなります。
  86. 6:31三百二十ピクセル程度の画面幅や文字の拡大でも、内容を利用できるかまで確かめてください。
  87. 6:37最後に互換性とまとめです。
  88. 6:39二千二十六年九月確認の記録では、クロームは五十七以降、エッジは十六以降、
  89. 6:45ファイアフォックスは五十二以降、サファリは十点一以降で対応しています。
  90. 6:51アンドロイド版クロームは五十七以降、アイオーエス版サファリは十点三以降です。
  91. 6:58練習は、まず一、三と一、二の違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて結果を比べることです。
  92. 7:06まとめます。
  93. 7:08グリッド・ローは開始線と終了線、またはスパンで縦の範囲を指定し、継承はしません。
  94. 7:14関連するグリッド・カラム、グリッド・エリア、グリッド・テンプレート・ロウズもあわせて確認すると理解が深まります。
  95. 7:24線の番号とマスの数の関係を言葉にできるようになれば、縦長の配置でも迷わなくなります。
  96. 7:31お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

grid-rowの役割と主な指定値を解説。対象のカードが2行分を占有するかが変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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