ドットインストール：CSSグリッドレイアウト入門#04~#06
ドットインストールさんで、「グリッドレイアウト」について学習しています。
今回は#04から#06。
できたらはてなブログでも試してみたいですね✨
楽しみです！
前回の学習はこちらです。
#04 frを使ってみよう
前回、rowsとcolumsについて、
このように記述しました。
grid-template-rows:80px,80px,80px;
grid-template-colums:80px,80px,80px;
高さや幅を「px」で表したのですが、
これ、他のもののように「%」で表すこともできるのだそうです！
たとえば、 列の幅。
grid-template-colums:50%,80px,80px;
50%,80px,80pxとしてみると
１列目がブラウザの幅の半分（50%）になりました！
おお！楽しい！
これは…なんだかイメージがついてきましたね。
ブラウザの幅を変えたら、50%の部分は細くなります。楽しいですね！
ほかに、比率を指定することのできるfractionというものもあります。
たとえば、列の幅。
grid-template-colum100px,1fr,2fr;
一番左の列の幅は100px、
そして残りの幅が1:2になるように指定できるのです。
（1フラクション、2フラクションと読むそうです）
左の列の幅は100pxで、
真ん中と右の列の幅は
100pxを引いた値の中で1:2の割合で表示されています。
ブラウザの幅を縮めると、
100pxはそのまま。
右側の二つの列は、残りの値の中で1:2になっているのがわかります。
これ、非常に便利ですね！
「グリッドレイアウトをみたことがない」と思っていましたが
この様子を見ていると、
実は気づいていなかっただけという可能性が大いにあることに気づきました（笑）
次は、セルの間に余白を設定したい場合です。
grid-row-gap:10px;
grid-colum-gap:10px;
このように指定します。
こうすると、行の間に10px,列の間に10pxの余白ができます。
ちなみに、まとめて指定することもできます。
その場合は
grid-gap:10px,10px;
と書きます。
もしくは、今回のように両方とも同じ数値を指定する場合には
単純に
grid-gap:10px;
でもいいそうです。
paddingなどと似ていますね！
こんな風になりました！
整然と並んでいて気持ちがいいですね✨
ちなみに、grid-gapで余白を設定するときには、
行は行で同じ幅にしか設定することができません。
左の余白を10pxにしたら、自動的に右の余白も10pxになります。
それぞれ違う幅の余白をつけたい場合には
余白用のgridを設定するとよいそうです。
今回のおさらい。
- frを使うと、比率でグリッドの高さや幅を指定できる。
- グリッドの間の余白はgrid-gapを使う。
楽しいですね！
#05 グリッドラインで要素を配置しよう
さて、rowとcolumのレイアウトはシンプルなものに戻しました。
次は、要素を好きな位置に配置してみましょう。
item1を、今8と9があるあたりに配置してみたいと思います。
行方向
まずは行方向から指定します。
行や列を構成するラインは
「grid line」と呼ばれています。
grid lineは1から順番に番号はふられています。
行方向の場合、
赤線でひいたところ。
一番上が1で、2,3,4…と続きます。
今回は、8,9のあたりに配置したいので
グリッドラインでいうと3と4の間に配置したいということになります。
.item-1{
background:hsl(300,80%,30%);
grid-row-start:3;
grid-row-end:4;
}
このように表すことができます。
また、この赤の2行をコンパクトに指定することもできます。
grid-row:3/4;
このように書けば、上と全く同じ意味になります。
ちなみに、「3のラインからひとつぶん」と指定したいときには
grid-row:3/span 1;
このように指定することもできます。
「ひとつぶん」がspan 1なのですね。
そして、この「span 1」というのは省略することもできるので
grid-row:3;
これだけでも、上にあげたものたちと同じ意味になるそうです。
これはシンプルで簡単ですね＾皿＾
列方向
次は列方向。
列方向は、左から順番に1,2,3,4…という番号になっています。
今回は、8,9の場所に配置したいので
グリッドラインでいうと「2と4の間」に配置したいということになります。
先ほどのgrid-rowの下に書きましょう。
grid-colum:2/4;
「2から4まで」という指定になります。
もしくはspanを使って
grid-colum:2/span 2;
「2のところから2つ」という指定にしてもいいですね。
ブラウザで見てみましょう。
うわあ、不思議な図ですね（笑）
ちゃんと、1が先ほど8と9があったところに配置されているのがわかります。
そして、2が自動的に先頭になるのですね。
これはおもしろい！
行も列も一気に指定
さきほど行った、
grid-row:3;
grid-colum:2/4;
この指定を一気に行うともできます。
grid-area:3/2/4/4;
grid-areaを使うのですね。
数字の順番は、
「row-start/colum-start/row-end/colum-end」
の順番になります。
じゅ、順番がわかりにくい…。
慣れるまで混乱しそうです。
今回のおさらい。
- グリッドの場所は、グリッドラインで指定できる。
- もしくは、ちょっとややこしいがグリットエリアでも指定できる。
#06 グリッドラインに名前をつけよう
＃05で指定したグリッドラインの番号。
こんなふうになっていました。
これ、別の指定方法もあるそうなんです。
逆方向から数えるときにはマイナスを使う
列を数えるとき、左から順番に1,2,3,4と数えましたね。
これ、右から数えることもできるのだそうです。
その場合は、右から-1,-2,-3,-4と数えます。
（図はありません、すみません）
つまり、今回指定した場所は
列方向が-1から-3までということになりますね。
先ほどの指定は
grid-colum:2/4;
だったのですが、
これを
grid-colum:-1/-3;
と指定しても同じ意味になるということになります。
（確かめたら、同じ配置でした）
グリッドラインに名前をつける
それから、グリッドラインに名前をつけることができます。
どうするのかというと、
itemより上の部分、
containerの部分を見てみましょう。
下の２行を見てください。
grid-template-rows: 80px 80px 80px;
grid-template-colums:80px 80px 80px;
となっていますね。
ここに直接「ここがitemですよ」と指定するのです。
grid-template-colums:80p[item-1-start] 80px 80px[item-1-end];
そして、itemのほうにも書きます。
grid-colum:2/4;
ここに、さきほどのstartなどを入れるのです。
grid-colum:item-1-start/item-1-end;
こんなふうにすれば、他のものと同じ意味になります。
リロードしても、同じ感じです。
では復習。
item-4を、最初の「3,6,9」の場所に配置してみましょう。
grid-rowは1から4まで。
grid-columは-1から-2までですね。
(3から4までとも言います)
.item-4{
background:hsl(200,80%,30%);
grid-row:1/4;
grid-colum:-1/-2;
}
4が指定の場所に配置されましたね。
重ね順を指定するときはz-indexを使う
さて、さきほどの1の上に4が重なっている形になっています。
重ね順を指定したいときには
z-indexを使います。
たとえば、item-1を上にしたいときには、
.item-1{
background:hsl(300,80%,30%);
grid-row:3;
grid-colum:2/4;
z-index:1;
}
このようにします。
そうすると、
1のほうが上になりましたね。
おさらい。
- グリッドラインは反対側から数えることもできる。
- グリッドラインに名前をつけることができる。
- 重ね順を指定するときにはz-indexを使う。
だんだん難しくなってまいりました…！
くじけずに頑張りたいと思います💦
