文字の色とフォント

>>ホームページの作り方TOP　>>文字の色とフォント

■文字の色とフォント

文字に色を付けるにはcolor:#RRGGBB;で指定します。中身は以下のように記述します。

#のあとの6桁の数字はRed:Green:Blue=2:2:2となっていて、ff0000ならRのみで構成される色なので赤となります。0000ffなら青になります。

たぶん16進法チックなので0・・9、a・・fとなってるように思えます。

ちなみにこの＃のあとの6桁は3桁だけの入力でも大丈夫な場合があります。例えばff0000はf00の3桁でも同じです。

p.a1 {
　　　color:#444;
　　　}

フォントのタグ(font)には先に述べたfont-size（文字の大きさ）以外にもいくつかありますが、font-size以外によく使うのは、font-weightとfont-styleの二つくらいで、他は初心者は使わないと思うので覚えなくていいと思います。

文字の太さを指定するにはfont-weightを使います。デフォルトならnormal、太字ならbold、細めならlighter、100～900までの数値のいずれかで指定します。（例：normal＝400、bold＝700）。

文字体を指定するにはfont-styleを使います。デフォルトならnormal、斜体ならitalicで指定します。

p.a1 {
　　　font-weight:bold;
　　　font-style:normal;
　　　}

これらを使ってサイトのデザインを変えてみましょう。変えるのはCSSファイルのみでHTMLファイルはいじりません。

h1 {
　　　　font-size:1.25em;
　　　　font-weight:normal;
　　　　}
p.a1 {
　　　　font-size:0.875em;
　　　　color:#444;
　　　　}
p.a2 {
　　　　font-size:0.875em;
　　　　color:#909090;
　　　　}
address {
　　　　font-size:1em;
　　　　font-style:normal;
　　　　}

ここまでのサンプル

ホームページの作り方（HP作成法）を解説

STEP1

STEP2

STEP3

STEP4

STEP5

STEP6

STEP7

■文字の色とフォント