こんにちは、
前回は画面サイズ(厳密には親要素のサイズ)に応じて
大きさが変わる正方形の要素の作り方
を紹介しました↓↓↓
[css]画像を正方形にして入れたい
そして今回はその要素たちを
画面内に均等に並べてみようという
試みです。
画面内に均等に並べると言えば、
皆さんご存知Flex boxですね！
display: というプロパティがありますが、
これらは元来、子要素を縦に並べるか横に並べるかくらいの
違いしかありませんでした。
(厳密にいうと違うんでしょうけどプロフェッショナルの方々怒らないでください笑)
しかし、display: flex; という値を用いることで
親要素に合わせて自動的に均等に並べることができるようになったのです！
今回の目標物はざっくり以下の感じにします。
もちろん皆さんが試されるときは若干の変更を加えれば臨機応変に変更できます。
[目標物]
-正方形を3x3でほぼ画面いっぱいに並べる。
-2列目の正方形は画面の中央に位置する。
-1行目の正方形を青、2行目を緑、3行目を黄色とする。
-それぞれの正方形同士は少しだけ離れている。
-それぞれの正方形にはThis is blue.のように色の説明がある。
-色の説明はそれぞれの正方形の中心に位置する。
実際に使ってみるとこんな感じになります↓↓↓
Flex boxes by shefuyuta (@shefuyuta) on CodePen.
このように正方形が均等に画面中央に並んでくれます。
目標物のイメージ通りになっていますでしょうか？
さて、ここから詳しく解説していきます。
まず、htmlで親要素を作ります。
分かりやすいようにclass名はparentとします。
この中に正方形にする要素が9つ欲しいので、
<div>を9つ作ります。
そして行ごとに色を変えるので、
最初の3つのclass名をblue、次の3つをgreen、最後の3つをyellowとします。
さらにそれぞれの<div>の中に<a>要素を追加し、それぞれ"This is [色]."とします。
htmlはこれで整いました。
ではcssを見ていきましょう。
まず、親要素である.parentはwidth: 100%;とします。
それぞれの正方形の幅を%で指定する為、
その親要素のwidthを必ず%で指定しないといけないのです。
厳密にはその親というか元祖であるhtml要素も
width: 100%;と指定する必要があります。
ちなみにhtml要素は基本的に100%を推奨しますが、.parent要素は必ずしも100%でなくても構いません。
気になる人はどうなるか試してみると理解が深まります。
私は初心者ながらこういう実験的なものが好きなのでなぜそうしなければならないのか理解できないと気持ちが悪いのでつい試してしまいます。
(良い事のようにも聞こえますが、細かいことをいちいち気にしているとそれだけ学習が遅くなります...。気を付けます...。)
次に、子要素である正方形予備軍たちを均等に並べたいので、
ここでdisplay: flex;としましょう。
※displayは子要素の並びを制御するものです。子要素に直接display: flex;と入れても効かないので気をつけましょう。
さらにflex boxの詳細を設定していきます。
flex-direction: row; (並べる向き: 横;)
flex-wrap: wrap; (端まで行ったときに折り返して2行目に行くか: 行く;)
※ここまでデフォルト値なので実は入力不要です。
justify-content: center; (子要素をどのように並べるか(横軸): 中央揃え;)
align-items: center; (子要素をどのように並べるか(縦軸): 中央揃え;)
これで親要素は完了です。
次に子要素(正方形予備軍)ですが、
子要素の正方形予備軍たちは3つずつclass名が分かれています。
ただ大きさなどについては全部一度に指定したいので、
.parent > div(.parent要素の子要素であるdiv、孫要素以下は対象外)で指定していきます。
今回の場合は.parent div(parent要素内のdiv全て)でも問題ないです。
その前に前回お話した通り、
.parent > div::beforeから設定します。
.parent > div::before {
padding-top(またはbottom): 100%;
content: "";
display: block;
}
これでいいですね。
ではdiv要素自体をいじっていきましょう。
一番大事なのはここのwidthプロパティですね。
このプロパティが何%かによって、1行あたりに何個の正方形が並ぶかが決まります。
今回は1行あたり3つずつ並べたいので、widthの値は33.333333.....%以下にします。
つまり、100%の中に3つ入るようにしたいのです。
33.333....4%を以上になってしまうと3つ目が入らないので、
flex-wrapによって3つ目が2行目に追いやられてしまいます。
反対に25%以下にしてしまうと4つ目が入ってしまうので気をつけましょう。
今回は適当に30%としています。
合計90%しかないじゃんと思うかもしれませんが、正方形同士の間にスペースが必要なので、スペースをどのくらい確保するのかも計算に入れなければいけません。
今回は正方形のmarginを全辺1%にしているので、1%×正方形3つ×2辺で6%になります。
あれ？それでも合計96%では？と思ったあなた。その通りなんです。
ただし、
親要素にdisplay: flex;、justify-content: center;
と指定しているので、
残りの4%は両端に均等に割り振られます。
align-itemsもcenterなので上下のスペースについても同じです。
親要素に<div>をもう1個挟んでmargin: 2%;とし、
子要素の正方形予備軍は::firstとかを使ったりして細かーく設定しても同じ結果にできますが、
同じ結果になるならdisplay: flex;で自動的にスペースを割り振った方が
圧倒的に楽ですし、見やすいので後からの変更もしやすいです。圧倒的に。
さて、flexboxの圧倒的便利さを痛感しながら
正方形を並べられたところで
次に行きましょう。
正方形内のThis is[色]の文字を各正方形の真ん中に入れたいので、
その親要素である正方形自体もdisplay: flex;にする必要があります。
これも.parent > div内で大丈夫ですね！
display: flex;
flex-directionはデフォルト値でいいので省略
justify-content: center;
align-items: center;
これでいいでしょう。
次に正方形に色を付けていきます。
色ごとにclass分けをしたので
素直に各クラスのbackground-colorを指定しましょう。
次は各正方形の中の<a>要素について
ケアしていきます。
特に何もいらないですが、
目立つようにfont-weight: bold;を入れてます。
またfont-sizeについては
正方形のように柔軟に変わってほしいので
5vhとしています。
ちなみにvhはviewport heightの略で画面の高さの5%となります。
さて、ちょっと長くなりましたが
分かりやすく説明できていたでしょうか。
分かりにくかったり質問があったりしたら
お気軽に、というか是非SNSからコメントください！
お待ちしています。