ドットインストール：CSSグリッドレイアウト入門#01~#03
ドットインストーさんで、今日から「CSSグリッドレイアウト入門」を学習します✨
Java Scriptと迷ったのですが、やっぱりCSSと名前のつくものから進めていきたいと思います！
#01 CSSグリッドレイアウトを使おう
CSSグリッドレイアウトは、こんなふうに
画面をマス目に見立てて
好きな場所に好きな要素を配置する方法です。
複雑なレイアウトも、
簡単に配置できそうですね♪
ただし、グリッドレイアウトは比較的新しい仕様なので
ブラウザの対応状況には注意しなくてはなりません。
caniuseを使って調べてみると、
サポートされていないものもありますね。
IEなどではベンダープレフィックスが必要なものもありますので注意が必要です。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
ベンダープレフィックスについては、
CSS3の#16で学習しています。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
今回は、いつものとおり
ブラウザはChromeの最新版、
エディタはAtomを使っていきましょう。
ではさっそく、雛形を作ります。
<!DOCTYPE.html>
<html lang="ja">
<head>
<meta charset="utf-8">
<metaname="viewpoint" content="width=device-width,initial-scale=1.0">
<title>CSS Grid layout</title>
</head>
<body>
</body>
</html>
赤字のところはレスポンシブデザインに関係してくるところです。
このあいだまでやっていたはずなのに思い出せない…、
復習します。
ここまで書いたら一旦保存。
今回もデスクトップフォルダを作ります。
CSSGridlayouという名前にしていますね。
そして、その中にいつものとおり
「index.html」という名前をつけて保存します。
ここまでできたら、CSSも作りましょう。
New Folderに
ここまでできたら、ブラウザを見てみましょう。
bodyにはまだ何も書かれていませんが、
上のタブに「CSS Grid layout」と書かれているのが見えますね。
編集をしやすいように、
右をhtml、左をcssに並べたら#01はおしまいです。
#02 グリッドコンテナを用意しよう
さて、htmlのマークアップからはじめていきましょう。
グリッドレイアウトで配置したい要素を
一度「container」の中に格納します。
<body>
<div class="container">
</div>
</body>
そして、このcontainerの中に
itemを9個入れていきます。
<body>
<div class="container">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
<div class="item-7">7</div>
<div class="item-8">8</div>
<div class="item-9">9</div>
</div>
</body>
head内に、cssへのリンクも書き込みます。
そして、cssのほうも書きましょう。
まずはbodyの余分な余白をゼロにします。
body{
padding:0;
margin:0;
}
そして、containerに適当な色をつけます。
.container{
background:#eee;
}
item1などにも色をつけますが、今回はhslで指定します。
.item-1{
background:hsl(300,80%,30%);
}
これをコピペして、9まで作ります。
そして、hsl法の醍醐味。
少しずつ色を変えてみましょう。
.item-1{
background:hsl(300,80%,30%);
}
.item-2{
background:hsl(300,80%,40%);
}
.item-3{
background:hsl(300,80%,50%);
}
.item-4{
background:hsl(200,80%,30%);
}
.item-5{
background:hsl(200,80%,40%);
}
.item-6{
background:hsl(200,80%,50%);
}
.item-7{
background:hsl(100,80%,30%);
}
.item-8{
background:hsl((100,80%,40%);
}
.item-9{
background:hs(100,80%,50%);
}
こんなふうにすると、いい感じにグラデーションになると思います。
hsl法は、簡単に色を変えられて楽しいですね。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
色については
hsla法として、CSS3の#03で学習しています。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
ここからグリッドレイアウトにしていきます。
グリッドレイアウトにするためには、まず
「グリッドコンテナ」を作ります。
containerを「グリッド」にするのですが、やり方は簡単で
display:grid;
にするだけです！
先ほどの.containerのところに
.container{
background:#eee;
display:grid;
}
display:grid;を入れればOKです。
こうすると、containerの直下の「item」がグリッド配置できるようになります。
（たくさんのitemたち）
ちなみに、グリッドアイテムになるのは、
直下の子要素だけで
孫要素などはできませんので覚えておきましょう。
#03 行と列を設定していこう
グリッドレイアウトでは、
基本的に方眼紙のようなマス目に配置します。
そのための行と列を設定しましょう。
今回は要素が9個あるので、
3×3のレイアウトを作りましょう。
.container{
background:#eee;
display:grid;
}
ここにいろいろと足していきますよ。
まず、行の高さは
grid-template-rowsで表します。
行は3つあるので、それぞれの高さを80pxとするとします。
その場合にはこのように書きます。
grid-template-rows:80px,80px,80px;
列の幅は、
grid-template-columsで表します。
今回は、列の幅も80pxにします。
grid-template-colums:80px,80px,80px;
つなげるとこのようになります。
.container{
background:#eee;
display:grid;
grid-template-rows:80px,80px,80px;
grid-template-colums:80px,80px,80px;
}
ちなみにgrid-template-rowsとgrid-template-columsはまとめて記述することもできます。
その場合にはこのように書きます。
grid-template：80px,80px,80px/80px,80px,80px;
また、同じような話で
「80px」などと同じ数字が並ぶ場合にはこのように指定することもできます。
grid-template:repeat(3,80px)/repeat(3,80px)
repeatを使うのだそうです。
便利ですね。
さて、現在のところがどうなっているのかブラウザで確認してみましょう。
おおー！
ちゃんと3×3になっていますね。
この、一つ一つのマス目のことを「セル」と呼ぶそうです。
エクセルみたいですね。
さて、今回は3×3にしていますが、
ブラウザの幅によって、
並べられるだけ並べたいという場合もあると思います。
先ほどはこのようになっていましたが、
grid-template:repeat(3,80px)/repeat(3,80px)
3列のところを「並べられるだけ並べる」と指定するのには
「auto-fill」を入れます。
grid-template:repeat(auto-fill,80px)/repeat(3,80px)
このようになります。
ブラウザの幅を変えてみましょう。
広いときには
たくさん並ぶ。
ちょっと狭くすると
お、今回は7まで並びましたね。
もっと狭くすると
こんな感じに自動的に調整してくれます。おもしろい！
レスポンシブデザインでも使えるものなのですね。
グリッドレイアウト、
実際にサイトで見たことがあるかどうかすらわからないのですが
要素を配置するときに
使えると楽しそうだなあと思いました！
次回も楽しみです。
