ドリル式ホームページの作り方

文字・背景の色を変える

ドリル式ホームページの作り方TOP  >>  Lesson3〜CSSを使った装飾〜  >>  文字・背景の色を変える

文字・背景の色を変える

RGBカラーというもの

文字の色を変えるタグは、「color:#RGB;」、背景の色を変えるタグは、「background-color:#RGB」もしくは「background:#RGB」で、#の後のRGBはRed(赤),Green(緑),Blue(青)の略で、3色それぞれが0,1,2・・・9,a・・fまでの16段階(16進法ですね)の濃さを持っています。

0は色がないことで、fは色が最も濃いことを表します。「#RGB=#00f」の場合は、赤と緑に色がなく、青がMAXなので、真青色となります。

「#RGB=#000」は全ての色がないので黒色、「#RGB=#fff」は全ての色が重なり合って白色となります(太陽の光はいろんな色の光の集まりですが、重なり合って透明になっています。空に水滴が多いときは屈折して色がバラバラになってしまいます。これが虹です)。

ついでにもう一つ、バラが赤くみえるのは、太陽の光(うち可視光線)がバラに当たったときに、バラが赤以外の光を吸収してしまうため、吸収されない赤色の光が反射して目に入ってきて赤と認識されるためです。

話は戻り、#の後の数字の桁数は本来6桁(R+G+B=2桁+2桁+2桁)まであります。上では3桁しか書いてませんが、これは#0000ffは#00fと同じなのでそうしているだけです。

もちろん#0000f2とかだったら3桁に直すことはできません。

ぶっちゃけ3桁で十分だと思いますので、3桁サンプル(30通り/4096通り)を下に示しますが、3桁で表現できない色を使いたいアナタはペイントソフトで好きな色を指定して表示される6桁の数字を使うとよいでしょう。

#000   #400   #800   #b00   #f00  
#fff   #bff   #8ff   #4ff   #0ff  
#000   #040   #080   #0b0   #0f0  
#fff   #fbf   #f8f   #f4f   #f0f  
#000   #004   #008   #00b   #00f  
#fff   #ffb   #ff8   #ff4   #ff0  

サンプルの文字・背景色を変える

RGB値を指定してサンプルの文字色と背景色を変えてみましょう。

bodyに背景色を指定するとブラウザ画面全体の背景色を変えることができます。

@charset "shift_jis";

body {
background-color:#efe;
}
h2 {
font-size:16px;
color:#494;
}
h3 {
font-size:14px;
color:#f44;
}
dl {
background-color:#fff;
} dt,dd {
font-size:13px;
}
ul {
font-size:14px;
color:#555;
}

ここまでの作成経過はコチラ→サンプル(ホームページ作成講座)


Lesson3〜CSSを使った装飾〜

  1. htmlの骨格を作成する
  2. CSS(スタイルシート)の組込み方法
  3. CSSの基本構造
  4. @規則の指定
  5. 文字の大きさを変える
  6. 文字・背景の色を変える
  7. 文字のスタイルと太さを変える
  8. 幅と高さを変える
  9. 間隔と枠線を指定する
  10. カーソルを当てたときのリンクの色

CGIの設置

  1. 掲示板を設置する
  2. カウンターを設置する
  3. アクセス解析を導入する
  4. アクセスランキングを設置する

ホームページの公開

  1. ドメインを取る
  2. サーバーを選ぶ
  3. ファイルをアップロード(公開)
Copyright(C) ドリル式ホームページの作り方 all right reserved.