ホームページ作成応援サイト

入門!ホームページNAVI

文字の色とフォント

文字に色を付けるには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=300、bold=600)。
文字体を指定するには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;
    }

幅と高さの設定

サンプルでは、幅も高さも設定されておらず、ブラウザいっぱいに文字が横に広がって表示されています。この状態はでもいいのですが、ワイド画面のモニターをお使いの方などは非常に見にくい為、幅を短く設定します。
幅を設定するタグはwidth、高さを設定するタグはheightを用いられます。

p.a1 {
   width:300px;
   height:200px;
   }

pに対しての幅を指定してみます。

p.a1 {
    font-size:0.875em;
    color:#444;
    width:500px;
    }
p.a2 {
    font-size:0.875em;
    color:#909090;
    width:500px;
    }

次に文字の高さを変えることで行間隔を広げます。文字の高さを変えるのにはline-heightタグを使用します。

p.a1 {
    font-size:0.875em;
    color:#444;
    width:500px;
    line-height:18px;
    }
p.a2 {
    font-size:0.875em;
    color:#909090;
    width:500px;
    line-height:18px;
    }


コピーライト