章末仕上げ 配色を完成させよう
ここまでの整理
この章で身についたことを並べてみます。link タグで CSS ファイルをつなぎ、セレクタとプロパティと値でルールを書きました。カラーコードで配色を決め、font-size と font-weight と line-height で読みやすさをととのえました。class で要素に名前を付け、詳細度のおかげで狙った 1 か所だけを変えられるようになりました。
新しいプロパティはもう出てきません。今回は、まだ手が回っていないところを自分で見つけて仕上げます。
仕上げの目印
ページを上から下まで見て、浮いている場所をさがすのがこつです。今のページで気になるのは 2 か所です。
1 つ目は送信ボタンです。背景はテーマカラーになりましたが、文字が本文と同じ大きさと太さのままで、押せる感じが弱く見えます。ボタンの文字は少し小さく、そして太くするのが定番です。
2 つ目はフッターです。著作権表示とリンクは、本文と同じ大きさである必要はありません。一段小さくすると、主役の中身が引き立ちます。
.submit-button {
font-size: 15px;
font-weight: bold;
}次の章へ
これで色と文字は決まりました。ただ、まだ要素どうしがくっついていて窮屈です。次の章では余白と枠線をあつかい、それぞれの要素を箱として組み立てていきます。
課題
- .submit-button に font-size と font-weight を足して、ボタンらしい文字にする
- .site-footer に font-size を足して、フッターの文字を一段小さくする