VIDEO LESSON

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

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

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

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

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

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

この動画で学べること

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

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