VIDEO LESSON

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

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

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

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

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

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

この動画で学べること

grid-columnの役割と主な指定値を解説。対象のカードが全列を使うか1列だけ使うかが変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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