Macの使い方講座：ホームページ更新その9（文字加工）

ホームページ更新その9（文字加工）

ホームページの見出しの文字の加工を行いました。

もともと背景が白ベースだったところを黒と白のある背景に変更しました。
そのため、文字の色がグレーでは読みにくくなってしまいました。

黒ベースの背景であれば文字の色は白、白ベースの背景であれば文字の色は黒にすれば良いのですが、黒も白もある場合、どちらの色にしても読みにくくなってしまいます。

文字を加工する場所はセレクタで指定します。
セレクタは、タグの名前やIDの名前やクラスの名前です。

マウスを右クリックし「検証」を選択すると検証ツールが表示され、様々な情報を見ることができます。
マウスを右クリックした場所のhtmlが選択されるので、その部分のタグの名前やIDの名前やクラスの名前を確認しておきます。

文字に影をつけてみました。
スタイルシートで、文字に影をつけます。

style.cssに影をつける記述を追加します。
見出し（h2）に影をつけるには
h2 { text-shadow: 1px 2px 3px #808080; }
です。
1px右に、2px下に、ぼかし3pxの影をつけます。

影をつけましたがあまりみやすくならなかったので、文字の色を変えることにしました。

スタイルシートで、文字の色を変えます。

style.cssに文字の色を変える記述を追加します。
見出し（h2）を白くするには
h2 { color: white; }
です。

スタイルシートで、文字の大きさを変えます。

style.cssに文字の大きさを変える記述を追加します。
見出し（h2）の文字の大きさを変えるには
h2 { font-size: 36px; }
です。
文字のサイズが36pxになります。

文字の色と文字のサイズをまとめて指定するには
h2 {
color: white;
font-size: 36px;
}
とします。

SAInoLESSON（サイのレッスン） Macの使い方講座、詳しい情報はこちら。