ドットインストール：CSSグリッドレイアウト入門#09~#10
ドットインストールさんでCSSグリッドレイアウトを学んでいます。
今日はその最終回！
久しぶりのプログラミング学習です✨
前回の記事はこちらです。
#09 グリッドの位置揃えを操作してみよう
さて、コードは最初の段階に戻されています。
今日はここから始めていきましょう。
グリッドは、画面の左上に寄せられています。
これを変えます。
.container{
background:#eee;
display:grid;
grid-template-rows:80px,80px,80px;
grid-template-colums:80px,80px,80px;
containerはこのような状態になっていました。
これに幅と高さを足します。
.container{
background:#eee;
width:300px;
height:300px;
display:grid;
grid-template-rows:80px,80px,80px;
grid-template-colums:80px,80px,80px;
すると、300px×300pxの中の、左上に配置されているのがわかります。
これを変えるのに、justify-contentなどを使います。
.container{
background:#eee;
width:300px;
height:300px;
display:grid;
grid-template-rows:80px,80px,80px;
grid-template-colums:80px,80px,80px;
justify-content:end;
aline-content:center;
このようにすると、
横方向はend（左から始まるので、エンドは右端）に。
縦方向には中央揃えな感じになるはずです。
ブラウザで見てみましょう。
300×300の中で、右端に寄って上下には中央揃えになりましたね！
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
ちなみにjustify-contentは「実践：ウェブサイトを作ろう」の#14でも軽くふれられています。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
左上に戻しました。
グリッドの要素は、
基本はグリッドのセルいっぱいに配置されています。
これを、セル内のどこかに寄せたい場合には
justify-itemsと
aline-itemsを使います。
.container{
background:#eee;
width:300px;
height:300px;
display:grid;
grid-template-rows:80px,80px,80px;
grid-template-colums:80px,80px,80px;
justify-items:end;
aline-items:center;
このようにすると、グリッドの要素が右の中央に寄ります。
こんな感じになります。
（予想外すぎてちょっとびっくりしたのは秘密にしておこう…
フォントだけが右によるのかな、と思っていたよ…）
「なのに、色までなくなってるよ！」
そうかあ…よく考えたら、色もグリッドの要素のひとつだものね…。
気を取り直すことにいたしましょう。
このようにすると、どのグリッドにも一気に指定することができます。
特定の要素だけ、別の配置にしたい場合には
そのアイテムにだけ指定をします。
今回はitem-1に指定をするとしましょう。
このような場合には、justify-selfeとaline-selfを使います。
.item-1{
background:hsl(300,80%,30%);
grid-area:header;
justify-self:center;
aline-self:end;
}
今回はどちらもセンターですね＾皿＾
ブラウザで見ると、１だけが右揃えでなくて中央揃えになりました。
おもしろいですね。
おさらい。
- グリッドの位置揃えを操作するには、justify-content,aline-contentを使う。
- グリッドの要素の位置を変えるには、justify-items,aline-itemsを使う。
- 要素のひとつを変えるには、justify-self,aline-selfを使う。
#10 レスポンシブデザインを実装しよう
次は、グリッドデザインを使ってレスポンシブデザインを実装してみましょう。
レスポンシブデザインに関しては、こちらのカテゴリでご紹介しています。
コードはすっきりさせ、アイテムは4まで減らしました。
ブラウザで見るとこのような感じになっています。
最近は、スマホの利用者の方が多いので、
モバイルファーストでページを作られることが多いようです。
.container{
background:#eee;
display:grid;
grid-template:
"header"50px
"main"50px
"sidebar"50px
"footer"50px
/ 100%;
}
すべての高さを50pxにして、
スマホの場合は一列で表示されるので
横幅は100%とします。
次は各アイテムの指定。
item-1{
background:hsl(300;80%,30%);
grid-area:header;
}
このように指定します。
item2から4までも同じように
item-2{
background:hsl(300;80%,40%);
grid-area:main;
}
item-3{
background:hsl(300;80%,50%);
grid-area:sidebar;
}
item-4{
background:hsl(200;80%,30%);
grid-area:footer;
}
このようにします。
ブラウザで見てみましょう。
高さがそれぞれ50px、横幅いっぱいに表示されていますね。
ブラウザの幅を変えても大丈夫です。
次は、ブラウザの幅が570pxよりも大きくなった場合には
2カラムになるようにします。
@media(min-width:570px){
container{
grid-template:
"header"50px
"main"50px
"sidebar"50px
"footer"50px
/ 100%;
}
}
grid-template以下は先ほどのものをコピペしました。
さて、2カラムにしたいので
コピペしたgrid-template以下をいじっていきます。
@media(min-width:570px){
container{
grid-template:
"header header"50px
"main sidebar"50px
"footer footer"50px
/ 1fr 200px;
}
}
このような配置になりますね。
みたままの通りに書けばよいようです。
幅は、サイドバーを200pxにしつつ、メインは可変幅にしたいのでこのように記述しました。
ブラウザで見てみましょう。
幅が狭い時は先ほどと同じです。
幅を広げると、このようにサイドバーが現れます。
サイドバー（3の部分）の幅は200pxで固定され、
メインの幅（2の部分）の幅は
ブラウザの幅の残りが配分されるようになっています。
グリッドレイアウトを使って
レスポンシブデザインを作るととっても便利ですね。
今後サイトを作るときには
モバイルファーストで考えて生きたいと思います！
