今日は「汎用性を持った複数行にまたがるlist」の作り方について学んだので、備忘録として残しておこうと思う。
作りたいものについて
タイトルがややこしいが、作りたいものは以下の画像の様なものである。これをリストを使って、数が増えたり余白のサイズが変わったりしても、大幅な記述変更をすることなく対応出来る様にしたい。なお今回は1行辺り5アイテムずつとする。
0.初期状態
CSSにまだ何も記述を行っていない初期段階では、ブロック要素である<li>が縦に並んでおり、それぞれの<li>の中に<img>が入っている、という状態である。
See the Pen
【Step.0】汎用性のある複数行listの作り方 by Ken (@kaneyan)
on CodePen.
1.リストアイテムを横並びにする
まず初めに<ul>に対して<display: flex>をかける。フレックス化したことによって<li>を横並びになったことが分かる。
See the Pen
【Step.1】汎用性のある複数行listの作り方 by Ken (@kaneyan)
on CodePen.
2.画像が要素内で100%のサイズで表示される様にする
画像の横幅を親要素<li>の横幅に合わせるために<img { width: 100%}>という記述を行う。画像の横幅が<li>の横幅を超える様に試しに画像の数を増やしてみると、サイズが縮小され、画像が<li>の中に収まっていることが分かる。
See the Pen
【Step.2】汎用性のある複数行listの作り方 by Ken (@kaneyan)
on CodePen.
3.リスト自体の左右に余白を作る
次に今回のテーマとはあまり関係のなステップであるが、リスト<ul>の左右に余白を作る設定を行っておく。<width: 88%>と<margin: 0 auto>をセットで指定しても良いが、<margin: 0 6%>の方がスマートなのでこちらを採用する。なお、リストアイテムを<div class="wrapper">いっぱいまで広げたい場合は、このステップは飛ばしても構わない
See the Pen
【Step.3】汎用性のある複数行listの作り方 by Ken (@kaneyan)
on CodePen.
4.横並びになったリストアイテムを折り返す
<ul>に対して< flex-wrap: wrap>をかけることによってリストを折り返す。ステップ2と同じく画像の数を増やしてみると、今度は<ul>内に収まり切らなくなった画像がカラム落ちしていることが分かる。またステップ2と違い、画像はオリジナルサイズのままである点も意識する。
See the Pen
【Step.4】汎用性のある複数行listの作り方 by Ken (@kaneyan)
on CodePen.
5.画像と画像の間に余白を設定する
ここからいよいよ余白の設定に入る。今回は画像間に7pxの余白を作ることにする。1行に5枚の画像を並べるとすると、余白を作りたいのは画像1と2の間、2と3の間、3と4の間、4と5の間の4箇所だ。これを実現するためにCSSにて「要素の左側に余白を作る、ただし1つ目の要素を除く」という記述を行う。使用するのは疑似要素<&:first-child>である。
See the Pen
【Step.5】汎用性のある複数行listの作り方 by Ken (@kaneyan)
on CodePen.
6.画像と画像間の余白を1行に収める
ステップ5で作りたい余白を適切な場所に設定できたが、画像5の右に余白が余っていることが分かる。ここでこの「5つの画像と4つの余白」セットを1列に均等に収めるために<li>に対して<width: calc((100% - 28px) / 5)>という設定を行う。これはどういうことかというと、「100%(=<ul>全体幅)から28px(余白分7pxが4つ)を除いたサイズを5等分する」ということである。
これにより、7pxの余白は保ちつつ、<li>の中身である画像のサイズが自動的に拡大縮小され、1行にきれいに収まったことが分かる。
See the Pen
【Step.6-1】汎用性のある複数行listの作り方 by Ken (@kaneyan)
on CodePen.
2行目以降のレイアウトが崩れている！
さて、これでぱっと見はうまく設定できた様に見えるが、実は現在の記述では2行目以降のレイアウトが崩れてしまう。実際に画像を増やしてみると一目瞭然だ。
See the Pen
【Step.6】汎用性のある複数行listの作り方 by Ken (@kaneyan)
on CodePen.
7.2行目以降のための余白調整を行う
これは何が問題だったのか？答えは、ステップ5の<&:first-child { margin-left: 0;}>の部分にある。この記述では1つ目の要素に対してのみ余白の打ち消しがされており、2行目や3行目の左端の画像（順番でいうと6番目や11番目）の要素に対する余白打ち消しの設定が出来ていなかったのである。これを解決するための記述がこちらだ。
<&:nth-child(5n + 1) { margin-left: 0;}>
See the Pen
【Step.7】（完成）汎用性のある複数行listの作り方 by Ken (@kaneyan)
on CodePen.
これで要素がきれいに並んだ！
汎用性のあるコーディングを目指したい
今回の学んだ記述は汎用性のあるコーディング方法だと思う。何故なら、列数が変わろうが、要素間の余白サイズが変わろうが、何も考えずにCSS内の数字を1-2箇所変更するだけで簡単にスタイリングを修正できるからである。
知識があまりない人が触っても崩れにくい様な記述を増やせる様に日々研鑽していきたいと思う。うそ、まだそんなことを言えるレベルでは無い。まず知識があまりない人から脱したい。
