中級編の下地を組む

01 / 05

中級編でやること

初級編でページの骨組みはできた。ここからは面と文字の質感を上げていく回だよ。

透明度、字の間隔、角の丸み、重ね順——細かい指定を1つずつ増やして、「それっぽく見える」ところまで持っていこう。

02 / 05

いきなり色や飾りをつけると、あとで並べ直すのが大変になる。作る順番は箱 → 面 → 文字。

まずは初級編の指定だけで、土台になる箱を組み直すところから始めるよ。

03 / 05

中身を真ん中に集めるときは、幅を決めて左右の余白を auto にする。

幅を決めないと auto は効かないので、この2行はいつもセットで書くよ。

.container {  width: 640px;  margin: 0 auto;}

04 / 05

まとまりごとに背景色と padding を与えると、線を引かなくてもどこまでが1つの話題かが見えるようになる。

枠線で全部を囲むより、面で分けたほうが落ち着いて見えることが多いよ。

.section {  background-color: #f7f3ea;  padding: 40px;}

05 / 05

この回の演習は初級編で習った指定だけで解けるようになっている。

忘れていても大丈夫。プレビューを見ながら値を変えて試せば、すぐ思い出せるよ。ここから書いてみよう。