同じ形のかたまりを並べる

1つぶんを div の箱にして、item のような class をつける。あとはそれをそのままコピーして中身だけ変える。

同じ class がついていれば、CSSは1回書くだけで全部に効くよ。

大事なのは中の並びもそろえること。1つ目が「見出し → 段落」なら、2つ目も同じ順番にする。

どれか1つだけ形が違うと、あとでCSSを当てたときにそこだけ崩れる。そろっていることが仕組みなんだ。

一覧の中で1つだけ見た目がおかしいときは、そのかたまりのタグを他と見比べるのが早いよ。

• class の綴りがちがう
• 閉じタグが抜けている
• 中のタグの順番がちがう

CSSを疑う前に、まずHTMLの形をそろえる。原因はたいていこちらにあるんだ。

いまは同じ形を手でコピーして並べている。数が増えると大変だし、直すときに全部を直すことになるよね。

実際のアプリでは、この「同じ形」を1つだけ書いて、データの数だけくり返して出すという作り方をする。JavaScriptのくり返しの出番だよ。

そのときのために、まったく同じ形で書く練習をここでしておこう。形がそろっていないと、自動化できないんだ。ここから書いてみよう。