文字と背景に色をつける
演習1.5 文字と背景に色をつける
☑文字に色をつける <font color= “カラー名 またはRGB値 “>文字</font>
☑背景色を変える <body bgcolor= “カラー名 またはRGB値 “>文字</body>
文字に色をつけると情報が整理されて全体がみやすくなり、また、見た目が楽しくなります。また、強調したい特定の部分だけに色をつけることも効果的です。そして、文字だけではなく、ページ全体の背景の色を変えると、印象に大きな変化を与えます。
1. 文字に色をつける
色を付けたい文字には、<font>タグのcolor属性で色を指定し、</font>で文字を挟んでみましょう。
以下のように、ソースコードの記述を変更してください。
①ソース・フォルダー ：html/ch06
②ファイル名 ：index.html
➢ index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>子猫と子犬の部屋</title>
<body>
<h1><font color="#2A7e55">子猫と子犬の部屋</font></h1>
<h3><font color="red">かわいい動物たちの写真館</font></h3>
<font color="#2A7e55" size="5"><strong>子猫と子犬の部屋にようこそ！</strong></font><br>
<strong>子猫と子犬</strong>の<u><strong>とってもかわいい写真</strong></u>をご用意しました。<br><br>
今後も色々と紹介していきますので、楽しんでください。<br>
<hr width="540">
</body>
</html>
3箇所の文字の色を付けました。
2. 背景に色をつける
続いて、ページ全体の背景に色を付けます。背景の色は、<body>タグのbgcolor属性に色を指定します。
5行目の<body>タグを、以下のように修正してください。
～前略～
<body bgcolor="#FFFFCC">
<h1><font color="#2A7e55">子猫と子犬の部屋</font></h1>
3. HTMLファイルを保存
記述が終わったら、上書き保存をしてください。
4. ブラウザで表示
では、ここまで修正した内容がブラウザでどのように表示されるか、確認してみましょう。
図 1.5.1
一部の文字が緑と赤色になり、また、ページの背景の色は、薄い緑色になりました。
◉色の指定方法
HTMLでの色の指定方法は、2通りあります。
color=”カラー名”
color=”#RGB値”「カラー名」はWebブラウザが内蔵している予約名で、直感的に色がイメージできます。
「ＲＧＢ値」は光の3原色である赤、緑、青の順に並べて指定します。
Webでよく利用する色のRGB値は、「Webカラー見本」などの言葉でインターネット検索すると、色々なページが出てきますので、参考にしてみましょう。
