色の指定
カラーコードの読み方
#0071e3 のような 6 けたの文字列をカラーコードと呼びます。先頭から 2 けたずつが赤、緑、青の量をあらわし、それぞれ 00 から ff までの 256 段階です。00 が最小、ff が最大なので、#ffffff は白、#000000 は黒になります。
けたの意味がわかると調整もかんたんです。#333333 は 3 色を同じ量だけ少しずつ混ぜた濃いグレーで、まっ黒より目にやさしく、本文の色によく使われます。
テーマカラーを決める
サイトの配色は、色数をしぼるほどまとまって見えます。今回は次の 4 色で組み立てます。背景に #f7f5f0、本文に #333333、見出しに #1f2b46、そしてアクセントとなるテーマカラーに #0071e3 です。
本文の色は body に書けば十分です。文字の色は下の要素へ受けつがれるので、1 か所書けばページ全体に行きわたります。
body {
background-color: #f7f5f0;
color: #333333;
}背景色で面をつくる
background-color は body 以外にも使えます。表の見出しにうすい青を敷き、送信ボタンにはテーマカラーをそのまま敷いて、白い文字をのせます。色のついた面ができると、ページの中で押せる場所が一目でわかります。
button {
color: #ffffff;
background-color: #0071e3;
}課題
- body に color を追加して、本文の文字色を濃いグレーにする
- th に background-color を書いて、表の見出しにうすい色を敷く
- button に文字色と背景色を書いて、送信ボタンを目立たせる