 トップページ > HTML講座 トップ > 第５章 タグの要素と値 |
|
第５章 タグの要素と値前回、タグは大きく分けて３種類あることを説明しました。今回は、もう少し深いところに入って行きたいと思います。少し難しくなってきましたが、頑張って下さい。 ３種類のタグのうち「開始タグ」のなかには要素（タグの細かな設定）を指定することが出来るタグもあります。 今までに出てきたタグは４種類ですが、このなかの「<body>タグ」は、いろいろな要素を指定することが出来ます。 要素は、「色」、「背景色」、「文字の大きさ」、「文字の種類」など、いろいろな種類があります。（詳しくはタグ事典をご覧ください。） それではここで、タグと要素について簡単に説明します。 背景色の要素、「bgcolor」を例にして説明します。 例えば、<body>タグに背景色を設定する場合、次のように書きます。 <body bgcolor="#FF0000">
． ． ← ここに本文等が入る ． </body> <body>タグの中の「bgcolor」というのが「要素」で、半角の「”（ダブルクオーテーション）」で囲まれた「#FF0000」というのが「値」になります。 ちなみに、HTMLでは全ての色を赤・緑・青の３種類に分けて表現しています。 色に関する詳しい説明は次回することにします。今回は、そういう風にやるんだという感じで覚えて下さい。 HTMLでは、次のように色を表すことができます。 #RRGGBB いきなりなので、「何だこの文字列は！？」と思った方もいらっしゃると思うので、これから分かりやすく説明していきます。 まずHTMLでは、それが色を表しているということが分かるように、先頭に半角の"#（シャープ）"を付けます。 そして、次のカラフルな文字列について、左から順番に２文字ずつ、 「赤の成分」「緑の成分」「青の成分」を表しています。 今回は分かりやすくするために、各色の頭文字をつけましたが、実際は、０〜２５５までの数字になります。 ちなみに、０が一番暗く、２５５が一番明るい状態を表しています。 ０は黒、２５５は白、と覚えると分かりやすいと思います。 ただしHTMLでは、この数字を「１６進数」と呼ばれる数字で表さなければいけません。 皆さんが普段の生活で使っている０〜９までの数字で表された数字のことを「１０進数」といいます。 ．．．ということは、「１６進数」は．．．？ そうです、勘のいい方ならすぐに分かったかもしれませんが、「１６進数」は、１６個の数字を使います。 でも、０〜９は分かるけど、残りの６個は．．．？ 残りの６個は、A〜Fのアルファベットを使うことになっています。 それぞれ１０進数に直すと．．． A＝１０ B=１１ C=１２ D=１３ E＝１４ F＝１５ ．．．となります。 つまり、１６進数の数字というのは ０，１，２，３，４，５，６，７，８，９，A，B，C，D，E，F の１６個の数字を使った数字ということです。 ちなみに先程の色のところで、なぜ０〜２５５までの２５６段階で表すかというと、HTMLでは、それぞれの色の要素を２文字ずつ使用して表します。 １６進数も使うので、１６×１６＝２５６ ．．．ということで、２５６段階で表すことになっています。 さぁ、今までのことをおさらいしてみます。 「<body>タグ」は、背景色の要素（bgcolor）を指定することが出来ますが、 #RRGGBB という方法で指定することになります。 ここで、先程やったことを活用してみると、 背景色を白色に変えたい場合は、#FFFFFF、 黒色に変えたい場合は、#000000、 灰色に変えたい場合は、#999999 となります。 では、前々回打ち込んだHTMLファイルの「<body>タグ」の背景色の要素に、灰色を意味する「#999999」という値を加えてみます。 その前に．．． 要素の値を書くに当たって、ある２つの決まりごとを守らなければいけません。 それは、要素の値は半角の「”（ダブルクオーテーション）」で囲まなければいけない、という決まりです。 （囲まなかったり、半角の「’（シングルクオーテーション）」で囲ってもエラーにはなりませんが、あまり推奨されていません。） もう１つは、タグの文字列と各要素の間は、半角スペースを入れなければいけない、という決まりです。 そうしないと、タグの文字列と各要素がひとつの文字列になってしまうからです。 これは、各要素同士のときも同じです。注意して下さい。 それも頭に入れて、実際に打ち込んでみます。 <html> このファイルを上書き保存して、実際に確かめて下さい。 前回ファイルを開いたときは、背景が白色でしたが、今回は灰色になっているはずです。 そのように表示できれば成功です。 成功しなかった場合は、どこかがおかしいはずなので、もう一度、上の文章と合っているかどうか確かめて下さい。 確認のため、成功時の写真を載せておきます。  |
|
[ ← 前へ ] [ 戻る ] [ 次へ → ] (C)2006 はむ / AHD |
|