トップ > HTMLの解説

※ここの解説は、後になるほど省略されている場合がありますのでできるだけ順番に読んでください。

■ 3.背景色の決定

ホームページの基本はわかりましたか?
どんなことでも、基本は大事です。
基本を理解していないと、複雑なことを行うとき判断を誤ることになります。
これから、少しずつ難しくなっていきますがすべては基本の積み重ねに過ぎません。

さて、あなたがホームページのデザインをしようとしたとき、最初に決めなければならないことは何でしょう?

たくさんある中で、最初に行うことは、背景ではないでしょうか。
もちろん、画像を埋め込んでしまえば背景色を設定する必要はありませんが、全体のバランスを考えるとき、背景色は重要な構成要素の一つになります。

また、画像を埋め込むにしてもその画像を埋め込んだときページ全体がどういう配色になるのかを知らないといけません。
画像を作成してページに埋め込んでみると、意外と見にくいページが出来上がったりします。

一つ一つは丁寧できれいであっても、「合成すると思ったような効果が出ない」ということは、私もたびたびあります。

前置きが長くなりましたが、背景色の指定は<BODY>タグで指定します。
記述方法は、

<BODY BGCOLOR="green"> や
<BODY BGCOLOR="#008000"> と記述します。

また、スタイル属性を使用して次のように記述する方法もあります。
<BODY STYLE="background-color: green"> や
<BODY STYLE="background-color: #008000">

さらに、背景画像を埋め込む場合は、
<BODY BACKGROUND="image0.gif"> や
<BODY STYLE="background-image: url(image0.gif)"> と記述します。

これら「BGCOLOR=""」「BACKGROUND=""」属性などもHTML4.01などでは非推奨です。
スタイル属性の方を使用してください。

green「緑」のことですね。他に、black,white,blue,red など皆さんがご存知の英語表記のほとんどが使えます。
詳しくは文献や本屋さんの専門書で調べてください。

#008000は、カラーコードと呼ばれパソコンでは、古くMS-DOSの時代から使われていた表記方法です。
以前、「RGB対応」等とテレビのコマーシャルでしてたのをご存知ないですか?
「ん〜..、知らない!!」 お〜っと世代が違いましたか。(*_*)

ともかく、左から2桁ずつR(ed),G(reen)B(lue)(赤、緑、青)の光の3原色ですべての色が表現できるようにしたものです。

2桁の数字は、16進数と呼ばれる一般の人にはなじみの少ない数字で表します。
通常の数字は、0〜9までしかないのですが、コンピュータであらわすときに0〜15までの数字を1文字で表現するようにした数字です。

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

となります。

従って、2桁だと00〜FFまでということになり、10進数では0〜255までの256種類(16種×16種)の数字を表現することになります。
(ちなみに、「1C」は1×16+12で「28」、「84」は8×16+4で「132」となります。)

この各色2桁の数字を3つ組み合わせて1677万7216色を表現できるようになっているのです。
でもこんな細かい色の違いを人間が判断するのは難しい話なので、ほとんど何段階かの色しか実際には使われていないようです。

以下に主な色のカラーコードを記述します。
#000000 黒(black)
#0000FF 青(blue)
#008000 緑(green)
#FF0000 赤(red)
#00FFFF 水色(aqua)
#800080 紫(purple)
#FFFF00 黄色(yellow)
#FFFFFF 白(white)

また、一覧形式のカラーサンプルを作成していますので参考にしてください。
カラーサンプル文字カラーピッカー背景カラーピッカー
フル(全色)カラーピッカー


page update:2010/01/23 20:32

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom