CSS Grid Layout を簡単に作れるツール 2
前回「CSS Grid Layout を簡単に作れるツール」の続きです。
前回の中で書いた「grid-template-areas のエリアを増やす、広げる（Layoutit!で）」とも
「grid-template-areasを新規で作る（VSCodeで）」とも微妙に違う、
０から、エリアが無い状態から「ここに」エリアを作ってエリア名を付けて色を付けて画像を配置するまでを書きます。
Layoutit!を使っても作れますが”ちょっとエリアを追加したい”時にコードで直接書く方法を覚えていると良いと思うので今回はVSCodeでやります。
仕上がりはこんな感じでヘラクレス部分をやります。コガネムシ、カブトムシ、下のグレー部分の作り方は前回でやっていますのでご参照ください◎
前回の続き、この状態から始めます。
grid-template-areas は image1、image2、textarea と全てにエリア名が付いています。
１、grid-template-columns の最後の100pxの右に半角空けて 100px と書きます。
２、grid-template-areas の３行の右端にそれぞれ半角空けて image3 と書きます。
保存してGoogle Chromeの検証モード、更に「grid」をクリックすると枠が出来た事が確認出来ます。
検証モードが分からなくても問題ありません。枠は出来ていますと言うだけです◎
続けてCSSの .image2 の下に .image3 { }を書いて中に grid-area: image3; と書きます。背景の色も紫と書いておきます。
.image1や2（ここでは畳んでしまっていますが）とほぼ同じなので必要な所をコピペすると楽です。
htmlファイルに行って、<div class=”image3″></div> と書きます。保存してページを再読み込みすると作ったエリアが紫色で表示されました。
ここまでがエリアが無い状態からエリアを作ってエリア名を付けて色を付ける、だね
ヘラクレス画像を配置します。
コガネムシとカブトムシの画像は拡張子が「.png」だけど今回のヘラクレスだけ「.svg」だね？
「.svg」は拡大縮小に強くて画像が綺麗なのです
通常の表示でもよく見ると違いは分かるのですが、
表示を大きくすると、
明らかに違います。こだわりたい方は下記ご参照ください。
grid-template-columns のサイズを両端50pxにするとこんな感じで、画面左に寄っている全体を中央にしたい時は、
両端を1fr とすると出来ます。（方法は他にもあります）
背景画像のサイズについては background–size
画像を繰り返すか、縦か横かなどは background–repeat で検索すると色々あります。
最初に書きましたように今回説明した事は Layoutit! でも作れます。最初からこのレイアウト！と決まっていればその方が早いかもです。
