幅を割合で決めて横に並べる

01 / 05

同じ形をいくつも並べる

一覧に並ぶカードは、中身が違うだけで形は同じ。だからHTMLも同じ形をくり返して書き、CSSは class ひとつぶんで済む。

並べる数が2つでも10個でも、CSSは1つのルールで足りるよ。

<div class="card">  <h3>おりがみ教室</h3></div><div class="card">  <h3>星の話を聞く会</h3></div>

02 / 05

横に並べるのは覚えた float。今回は左からつめたいので float: left; を使うよ。

問題は幅のほう。width: 200px; のように数を決め打ちすると、入れ物の幅を変えたとたんに崩れる。入れ物が 500px しかなければ 3つで 600px なので、3つ目がはみ出して下に落ちてしまう。

.card {  float: left;  width: 200px;}

03 / 05

% を使うと「親の幅の何割」という意味になる。親が広ければカードも広く、狭ければ狭くなる。

width: 50%; なら半分。親が 600px のときは 300px、800px のときは 400px になるよ。

.card {  float: left;  width: 50%;}

04 / 05

3つ並べたいときの割合は 33.33…% になって書き切れない。だから少し小さめの 33% にしておく。

合計 99% なら1%ぶん余るだけで、はみ出して下に落ちることはない。足りないほうが安全なんだ。

.card {  float: left;  width: 33%;}

05 / 05

4つ並べたいなら 25%、5つなら 20%。変えるのは割合の数字ひとつで、HTMLはさわらなくていい。

これが「同じ形をくり返す」作りの強みだよ。ここから書いてみよう。