呼びかけの帯を作る

01 / 05

ひとことだけ置く場所

一覧のあいだや下に、大きな文字がひとつだけ置かれた帯を見たことがあるかな。「はじめてみよう」みたいな呼びかけの部分だね。

情報を伝える場所ではなく、読む速さを落とすための場所。だから中身は少ないほどいい。

02 / 05

新しい指定は出てこない。作りは前に組んだ一覧の土台とまったく同じで、

この二重の箱を、もう一度組み立てるだけだよ。

<div class="message">  <div class="container">    <h2>いっしょに作ろう</h2>  </div></div>

03 / 05

前後の帯より濃い色にすると、そこだけ空気が変わって目が止まる。濃い背景には白い文字を合わせるよ。

上下の余白も大きめに。まわりに何もないほど、置いたひとことが強くなる。

.message {  background-color: #1f4f5f;  padding: 72px 0;  color: white;}

04 / 05

呼びかけの文字は text-align: center; でまん中にそろえる。左そろえだと「読み物」に見えてしまうんだ。

帯のほうに書けば、中の見出しも段落もまとめてそろうよ。

.message {  text-align: center;}

05 / 05

最後に見出しを大きくする。font-size を上げるだけで、ページの中でいちばん強い1行になる。

色・余白・そろえ・大きさ——ぜんぶ知っている指定でここまで作れる。ここから書いてみよう。