【30代からのプログラミング】CSSでグリッドレイアウトをラクーに使ってみる。

さて、前回の練習サイトを作る際イラストを並べるのに非常に苦労しました。そこで色々調べているうちに出てきたワードは、グリッドレイアウトとFlexというキーワードでした。そこで今回はこの2つを使ってみることに。

今回の成果物はこちらになります。よかったら遊びに行ってみてください。
https://ponsmama.github.io/pon-and-mama/

まずはグリッドレイアウトというものを学ぼう。


グリッドレイアウトを学ぶのにとても分かりやすかったサイトはこちらです。
今度こそわかかった!CSSグリッドレイアウトの作り方と基本知識。

グリッドレイアウトを簡単に説明してみる。

グリッドレイアウトとは、サイト内に枠線を引き、その枠線を使って色々な要素を配置できるようにする方法です。この方法を使うと要素を重ねたりすることもできます。

それでは4つのアイテムをグリッドレイアウトを使って、サイト上に配置してみましょう。

まずはHTMLを書こう

4つのアイテムを、グリッドコンテイナーの中に入れ子にします。
<div class=grid-container>
       <div=grid-item1>1</div>
       <div=grid-item2>2</div>
       <div=grid-item3>3</div>
       <div=grid-item4>4</div>
</div>

ポイント:アイテムの中はとりあえずで良いので何か書いておくと良い。空で作るとうまくいかないことがありましたので。

CSS グリッドコンテイナーに枠線を設定します。

.grid-container{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: repeat(3, 100px);

ポイント:columnsは縦の列、rowsは横の行です。列や行を増やしたい場合は、スペースで〇fr、や〇〇pxなどの値を増やしていきます。アイテムの間に隙間を開けたいときは、grid-gap:〇〇rem;とコンテイナーに記述します。
あと、あらかじめアイテムに背景色を付けておくとレイアウトがどうなったかわかりやすいですよ。

CSSでアイテムの位置を設定します。

グリッドコンテイナーで枠線の設定をすると自動でアイテムごとに配置が振り分けられていますが、任意で位置を設定できます。

たとえば、grid-item1をBのエリアに配置する場合、書き方が色々あります。
グリッドレイアウト 簡単

書き方1:column: start/end; row: start/end; を使う。

.grid-item1{
     grid-column: 1/3;
     grid-row: 2/4;
}

書き方2:grid-area: row-start / column-start / row-end / column-end;

.grid-item1{
     grid-area: 2/1/4/3;
}

グリッドレイアウト 簡単
コンテナを2×2で作った時はこんな感じ

書き方3:グリッドコンテナにエリアの名前を先に決めておくこともできます。

.grid-container{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: repeat(3, 100px);
  grid-template-areas:"box-A box-A box-A box-A"
                                    "box-B box-B box-C box-C"
                                     "box-B box-B box-D box-D";
}

.grid-item1{
     grid-area: box-B;


わからん?超簡単な方法があります!Layoutit!でコピペする。(無料)


それはこちらの超便利サイトLyoutit!でレイアウトを作ってCSSをジェネレートする!英語サイトですが、感覚で使えるので大丈夫です!

1.CSS Grid Generatorをチョイス。

2.好きなようにレイアウトを組みます。列、行の数、幅も自由に動かせます。


3.出来たらGet Code!でコードをコピペします。
この時HTMLとCSSの両方のコードを作ってくれるので、両方使いましょう。

どうです?簡単でしょう?

まとめ

グリッドレイアウトを覚えよう!ということでまとめてみました。
一度覚えるととても便利なのでこの機会にぜひ使ってみてください。Layoutit!はとても便利なのでぜひ使ってみてくださいね。配置したアイテムを親にして、その中身にさらに入グリッドレイアウトやFlexを使う事もできますよ。
ぜひ色々試してみてくださいね!

私ははじめアイテムを空にしていて、さっぱりうまく使えずに苦労してしまいました。
HTMLを作る際にすでに中身が決まっていたほうが、レイアウトがバシッと決まりやすいかもしれないですね。

それでは、続きはまた書きます。



コメント

このブログの人気の投稿

素人でもAdobe Stockでの副業で売り上げを出す方法を考察

プロフィール

【30代からのプログラミング】Progateでとにかく勉強してみる編