前提知識
・ブロックレベル要素
・インライン要素
グリッドレイアウトを理解するためには、上記２つの理解が必須です。
CSSグリッドとは
CSSグリッドについて説明します。
CSSグリッドとは、CSSでレイアウトを組む際によく使用される方法の１つで
縦横の格子状に分割してレイアウトを構成する手法です。
縦(赤線)がcolumn(列)、横(青線)がrow(行)です。
コーディングの際にこの「column」と「row」が出てきます。
今回はグリッドを使用して、２枚目の画像のようにレイアウトを整えていきます。
HTMLのみの状態
CSSでレイアウトを整えた状態
コーディングにあたり、今回はCodePenというサイトを使用します。
グリッドレイアウトの仕組みを理解することが目的なので、環境構築などは行わずブラウザ上で動作させます。
CodePenにてコーディングを行なっていきましょう。
試しに以下ソースをCodePenのHTMLエディタに入力してみてください。
レイアウト調整前の背景色のみが装飾された結果が出力されます。
HTML
<div id="container"> <!-- コンテナ -->
<div id="boxA">boxA
</div> <!-- アイテム -->
<div id="boxB">boxB
</div> <!-- アイテム -->
<div id="boxC">boxC
</div> <!-- アイテム -->
<div id="boxD">boxD
</div> <!-- アイテム -->
</div> CSS
#boxA {
background-color: #ff7f7f;
}
#boxB {
background-color: #7fbfff;
}
#boxC {
background-color: #7fff7f;
}
#boxD {
background-color: #ffff7f;
}
恐らくこちらの画像のような表示になったかと思います。
レイアウトを整える
早速今回の本題であるグリッドレイアウトでレイアウトを整えていきます。
CSSを以下ソースに置き換えてください。
#container {
display: grid;
grid-template-columns: 400px 1fr;
grid-template-rows: 100px 100px 100px;
grid-template-areas:
"boxA boxB boxB"
"boxA boxC boxC"
"boxA boxD boxD";
}
#boxA {
background-color: #ff7f7f;
grid-area: boxA;
}
#boxB {
background-color: #7fbfff;
grid-area: boxB;
}
#boxC {
background-color: #7fff7f;
grid-area: boxC;
}
#boxD {
background-color: #ffff7f;
grid-area: boxD;
}
以下画像のような表示になりましたか？
では一つずつ説明していきます。
グリッドレイアウトで使用するプロパティは全部で6つ。
親要素（コンテナ）で指定するプロパティ
- display
- grid-template-columns
- grid-template-rows
- grid-template-areas
子要素（アイテム）で指定するプロパティ
各プロパティの説明
display
要素の表示形式を指定します。
今回の場合グリッドレイアウトなので「grid」を指定します。
他にもブロックレベル要素と指定する「block」や
フレックスボックスを指定する「flex」が存在します。
grid-template-columns
グリッドレイアウトの横幅を指定します。
grid-template-columns: 400px 1fr;
値400pxはboxAの横幅を指定しています。
値1frは閲覧しているPCの横幅を自動的に算出し指定しています。
今回は先に400pxを指定しているため、画面最大幅-400pxで算出された横幅が指定されます。
grid-template-rows
グリッドレイアウトの縦幅を指定します。
今回は３行あるため値を３つ指定しています。
grid-template-rows: 100px 100px 100px;
100pxを各行の縦幅として指定しています。
grid-template-areas
各アイテムの配置を行うプロパティです。
「”」で囲うことで、画面に表示させたいレイアウトを簡単に可視化できます。
以下で指定している「boxA」や「boxB」は後ほど紹介するgrid-areaを使用して指定します。
“boxA boxB boxB”
例えばこちらのソースを書くと
grid-template-areas:
"boxA boxB boxB"
"boxA boxC boxC"
"boxA boxD boxD";
1列目は全てboxA
1行目の２列目〜３列目はboxB
2行目の２列目〜３列目はboxC
3行目の２列目〜３列目はboxD
という感じでこちらの結果が表示されます。
同じく、こちらを入力すると
grid-template-areas:
"boxA boxB boxB"
"boxC boxC boxC"
"boxD boxD boxD";
こちらの結果が表示されます。
このように、列（行)単位で「”」で囲い、その中にgrid-areaで指定した名前を
スペース区切りで入力することで簡単にレイアウトを整えることが可能です。
grid-area
grid-template-areasで指定する際の名前をつけるプロパティです。
このプロパティで指定した名前とgrid-template-areasで指定した名前が一致していれば任意の名前をつけることが可能です。
cssで各要素に対して指定してあげます。
#boxA {
grid-area: boxA;
}
#boxB {
grid-area: boxB;
}
#boxC {
grid-area: boxC;
}
#boxD {
grid-area: boxD;
}
おわり
CSSグリッドに関する説明は以上です。
floatプロパティを勉強した人はとても簡単に感じませんでしたか？
私がこのグリッドレイアウトの存在を知った時はもう衝撃すぎて体が震えました…（floatは難しすぎる)
ぜひこちらの記事で少しでもCSSレイアウトに対する興味が湧いていただけると嬉しいです！
初期ノード：スコープ内での開始を意味します。
終了ノード：スコープ内での終了を意味します。
最終制御：それまでのアクション(制御)で使用されたトークンをすべて破棄します。
URLにアクセスすると上記のページが表示されるので、下にスクロールしていくと「Stable Diffusion Playground」と書かれた見出しの下にテキストボックスがあります。そこにAIに画像生成を行ってもらうテキスト（呪文）を入力します。
オリンピックの象徴である五輪の画像をメインに生成したようです。
1回目の生成結果と比較すると、より五輪に近い画像が生成されました。このように、同じ呪文でも何回も生成してもらうことで、より自身のイメージに合った画像を見つけ出すことができます。（このように、呪文の試行錯誤や、画像の選定をする過程を「ガチャを回す」と呼ぶようです）
オリンピック要素がなくなり、街並みのような画像や、地図のような画像が生成されてしまいました。
私達が知るタモリさんとは異なる人物が生成されました。
どの画像もそこそこの精度で生成されています。右上の画像が一番シュワちゃんに近いですね。
