VIDEO LESSON

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

再生時間 7:31動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

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

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、グリッド・テンプレート・ロウズです。
0:07これはグリッドレイアウトで、行の高さをあらかじめ決めるプロパティです。
0:13列の幅を決めるのがカラムズ側だとすれば、こちらはその縦方向の担当だと考えてください。
0:19たとえば一行目を低く、二行目を高く、といったように、行ごとに違う高さを並べて指定できます。
0:26カードを何段かに並べる画面や、見出し行と本文行で高さを分けたい場面で役立ちます。
0:32まずは全体像をつかみ、行を先に決めると配置がどう安定するのかを一緒に見ていきましょう。
0:39まず基本の書き方です。
0:41書き方はほかのプロパティと同じで、セレクターのあとにプロパティ名、コロン、
0:45値、セミコロンを書きます。
0:50スライドの例では、クラス名デモを持つ要素に、グリッド・テンプレート・ロウズ、
0:55ごレム、はちレムと指定しています。
1:00値が二つ並んでいるので、明示的に作られる行は二行分です。
1:04一つ目の値が一行目の高さ、二つ目が二行目の高さに対応します。
1:10大切なのは、これをグリッドの親に書く点です。
1:14子要素ひとつひとつに書くものではありません。
1:18まずはこの基本形と、値の並びが行の順番と対応する関係を覚えてください。
1:24指定できる値の読み方を整理します。
1:27基本は、行のサイズを空白区切りで並べることです。
1:31レムやピクセルなどの長さで固定するほか、エフアールという単位で残りの高さを割合で分け合うこともできます。
1:40また、ミンマックスを使うと、最小の高さを確保しながら内容に合わせて伸びる余地を残せます。
1:48オートは内容に応じた高さです。
1:50そしてリピートは、同じサイズの行をくり返す省略記法です。
1:55たとえばリピート、に、ごレムと書けば、ごレムの行を二行作る意味になります。
2:02固定したいのか、伸ばしたいのか、目的に合わせて値の種類を選ぶことが大切です。
2:08ここで、明示トラックという言葉を押さえておきましょう。
2:12グリッド・テンプレート・ロウズで先に宣言した行は、明示トラックと呼ばれます。
2:17一方、項目の数が多くて行が足りなくなったときに自動で追加される行は、暗黙トラックです。
2:24自動で増えた行の高さは、このプロパティではなく、別のプロパティであるグリッド・オート・ロウズ側で決まります。
2:31つまり、最初から用意する行の設計図が今回の主役で、はみ出した分の扱いは別担当、
2:35という分担です。
2:38この区別ができると、行の一部だけ思った高さにならないときに、原因を切り分けやすくなります。
2:45初期値と継承を確認します。
2:47初期値はノーンで、行トラックはあらかじめ定義されていない状態です。
2:52そして通常の継承はしません。
2:54親要素に書いた行の定義が、子要素へ自動で受け継がれることはありません。
2:59あくまでグリッドの親に書くことで、その親の中の行の高さが決まる仕組みです。
3:04また、仕様上の初期値と、ブラウザーの既定スタイルで見えている値が同じとは限らない点も押さえておきましょう。
3:12インヘリットやイニシャルなどの共通キーワードの意味は、ほかのプロパティと同様です。
3:18普段は意識する場面は少ないものの、初期値がノーンであることはしっかり覚えておきましょう。
3:25実例を見ていきます。
3:27まずエイチティーエムエルの用意です。
3:29ステージという土台の箱の中にデモがあり、その中に項目が六つ入っています。
3:35項目はすべてアイテムという共通クラスを持っています。
3:39頭の部分、ヘッドには、スタイルシートを読み込むリンクを置いてください。
3:44親と子の構造そのものが例の一部です。
3:47グリッドの親はデモ、配置される子は六つの項目、という役割分担を意識してください。
3:53後のシーエスエスでは列を三列にしますので、六つの項目は三つずつ二行に並ぶことになります。
4:00その二行の高さをどう決めるかが、今回の見どころです。
4:04次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
4:09ステージと項目には、余白や枠線、背景色といった土台の見た目を先に整えます。
4:15デモにはディスプレイ、グリッドを指定し、列はリピートで三列、隙間はれい点ごレムとします。
4:22そして最後に主役のグリッド・テンプレート・ロウズ、ごレム、はちレムを加えます。
4:29すると一行目はごレム、二行目ははちレムの高さになり、下の行の方がゆったりと広がります。
4:36土台の指定は共通なので、最後の一行だけに注目して変化を追うことができます。
4:42行の高さの違いが、見た目の段差としてそのまま表れる点を確認してください。
4:48値を変えて比べてみましょう。
4:50最後のグリッド・テンプレート・ロウズの値だけを、リピート、に、ごレムへ置き換えます。
4:56ファイルを保存してブラウザーを再読み込みすると、今度は二行ともごレムでそろい、
5:00上下の高さが均等になります。
5:04元の指定は一行目が低く二行目が高い非対称な並びでしたが、リピートを使うと規則正しい並びへ切り替わります。
5:11エイチティーエムエルも列の指定も変えていないのに、行の高さの設計だけで印象が変わる点に注目してください。
5:19比較のコツは、変えるのはこの値ひとつだけにすることです。
5:23違いの原因をひとつに絞ることで、学びがはっきり残ります。
5:27間違えやすい点を整理します。
5:29いちばん注意したいのは、行の高さを固定しすぎることです。
5:34文章量が増えたとき、固定した高さに内容が収まらず、はみ出してしまうことがあります。
5:40文字が長くなりそうな行では、ミンマックスやオートを使い、内容に応じて伸びる余地を残すのが安全です。
5:48もう一つは、書く場所の取り違えです。
5:50これは子ではなく、グリッドの親でトラックを定義する指定です。
5:55開発者ツールのグリッド表示で、明示トラックと暗黙トラックを見分けると、どの行が対象なのかを追いやすくなります。
6:04固定は便利ですが、内容の増減まで想像して値を選ぶことが大切です。
6:09効かないときの確認手順です。
6:11まずネットワークで、スタイルズ・ドット・シーエスエスが正常に取得できているかを確認します。
6:17次にエレメンツで、対象のクラスとシーエスエスのセレクターが一致しているかを見てください。
6:24スタイルズで宣言が無効扱いになっていないか、別の宣言に上書きされていないかも重要です。
6:30コンピューテッドで最終的な値を確認し、親の表示方式がグリッドになっているか、
6:34親に十分な高さの余地があるかも調べましょう。
6:39最後に、三百二十ピクセル程度の画面幅や文字の拡大でも、内容を利用できるかまで確かめてください。
6:46順番に切り分ければ、行そのものの問題か、土台の問題かを特定しやすくなります。
6:51最後に互換性とまとめです。
6:53二千二十六年九月確認の記録では、クロームは五十七以降、エッジは十六以降、
6:57ファイアフォックスは五十二以降、サファリは十点一以降で対応しています。
7:02アンドロイド版クロームは五十七以降、アイオーエス版サファリは十点三以降です。
7:07練習は、まずごレム、はちレムと、リピート、に、ごレムの違いを自分の言葉で説明し、
7:11次に文章量や親の幅だけを変えて結果を比べることです。
7:15まとめます。
7:16グリッド・テンプレート・ロウズは親に行の高さの設計図を書く指定で、初期値はノーン、
7:19継承はしません。
7:22関連するグリッド・テンプレート・カラムズやグリッド・テンプレート・エリアズもあわせて確認すると理解が深まります。
7:29お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

grid-template-rowsの役割と主な指定値を解説。2行の高さを個別に変えられます。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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