ホーム > HTML講座 > HTML編 > 第5章 タグの属性と値

第5章 タグの属性と値

登録タグ: HTML 属性 16進数


前回、タグは大きく分けて3種類あることを説明しました。今回は、もう少し深いところに入って行きたいと思います。
少し難しくなってきましたが、頑張って下さい。

3種類のタグのうち「開始タグ」のなかには属性(タグの細かな設定)を指定することが出来るタグもあります。

今までに出てきたタグは4種類ですが、このなかの「<body>タグ」は、いろいろな属性を指定することが出来ます。
属性は、「色」、「背景色」、「文字の大きさ」、「文字の種類」など、いろいろな種類があります。(詳しくはタグ事典をご覧ください。)

それではここで、タグと属性について簡単に説明します。
背景色の属性、「bgcolor」を例にして説明します。

例えば、<body>タグに背景色を設定する場合、次のように書きます。

<body bgcolor="#FF0000">
.
. ← ここに本文等が入る
.
</body>

<body>タグの中の「bgcolor」というのが「属性」で、半角の「”(ダブルクオーテーション)」で囲まれた「#FF0000」というのが「値」になります。

ちなみに、HTMLでは全ての色を赤・緑・青の3種類に分けて表現しています。
色に関する詳しい説明は次回することにします。今回は、そういう風にやるんだという感じで覚えてもらっても構いません。

HTMLでは、次のように色を表すことができます。

#RRGGBB

いきなりなので、「何だこの文字列は!?」と思った方もいらっしゃると思うので、これから分かりやすく説明していきます。

まずHTMLでは、それが色を表しているということが分かるように、先頭に半角の"#(シャープ)"を付けます。
そして、次のカラフルな文字列について、左から順番に2文字ずつ、 「赤の成分」「緑の成分」「青の成分」を表しています。

今回は分かりやすくするために、各色の頭文字をつけましたが、実際は、0?255までの数字になります。

ちなみに、0が一番暗く、255が一番明るい状態を表しています。
0は黒、255は白、と覚えると分かりやすいと思います。

ただしHTMLでは、この数字を「16進数」と呼ばれる数字で表さなければいけません。

皆さんが普段の生活で使っている0?9までの数字で表された数字のことを「10進数」といいます。

しかし、「16進数」では16個の数字を使います。
といっても、0?9の数字の他にA?Fのアルファベットを使うことになっています。
それぞれ10進数に直すと...

10進数 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
16進数 0 1 2 3 4 5 6 7 8 9 A B C D E F

...となります。

つまり、16進数の数字というのは上記の16個の英数字を使った数字ということです。

ちなみに先程の色のところで、なぜ0?255までの256段階で表すかというと、HTMLでは、それぞれの色の値を2文字ずつ使用して表します。
16進数も使うので、16×16=256 ...ということで、256段階で表すことになっています。

さぁ、今までのことをおさらいしてみます。

「<body>タグ」は、背景色の属性(bgcolor)を指定することが出来ますが、

#RRGGBB

という方法で指定することになります。

ここで、先程やったことを活用してみると、

背景色を白色に変えたい場合は、#FFFFFF、
黒色に変えたい場合は、#000000、
灰色に変えたい場合は、#999999

となります。

では、前々回打ち込んだHTMLファイルの「<body>タグ」の背景色の属性に、灰色を意味する「#999999」という値を加えてみます。

その前に...

属性の値を書くに当たって、ある2つの決まりごとを守らなければいけません。

それは、属性の値は半角の「”(ダブルクオーテーション)」で囲まなければいけない、という決まりです。
(囲まなかったり、半角の「’(シングルクオーテーション)」で囲ってもエラーにはなりませんが、あまり推奨されていません。)

もう1つは、タグの文字列と各属性の間は、半角スペースを入れなければいけない、という決まりです。
そうしないと、タグの文字列と各属性がひとつの文字列になってしまうからです。

これは、各属性同士のときも同じです。注意して下さい。

それも頭に入れて、実際に打ち込んでみます。

<html>
<head>
<title>ホームページのタイトル</title>
</head>
<body bgcolor="#999999">
ホームページの本文
</body>
</html>

(上のサンプルの中で、今回新たに加えた部分は分かりやすくするために色を変えてあります。)

このファイルを上書き保存して、実際に確かめて下さい。

前回ファイルを開いたときは、背景が白色でしたが、今回は灰色になっているはずです。
そのように表示できれば成功です。

成功しなかった場合は、どこかがおかしいはずなので、もう一度、上の文章と合っているかどうか確かめて下さい。
確認のため、成功時の写真を載せておきます。

← 前へ | 次へ →


カテゴリー:HTML編
2011/09/11 16:34:42 更新

Powered by AkiWiki. Wiki syntax is based on PukiWiki, and extends it.

スポンサード リンク

メニュー

HTML講座

HSP講座

Inkscape講座

スポンサード リンク