VIDEO LESSON

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

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

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

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

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

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

この動画で学べること

grid-template-columnsの役割と主な指定値を解説。等幅3列と比率の違う2列を比較します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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