ソフトウェアとは
文字を赤、下線、14ピクセル
ここでは、下記の例のような見た目を実現するためのスタイルシートの記述方法を実際に記述して解説します。
例：見出し4の色を赤、下線、大きさを14ピクセルに
まず、幾つかある方法の中で、「見出し4に対してCLASSを付けて、そのCLASSを使用している見出し4に限定してスタイルを指定する方法」を使用します。
HTMLは以下のようにします。
<h4 class="samplecolor">見出し4</h4>
次に、スタイルシートを以下のようにします。
h4.samplecolor {
color: #FF0000;
text-decoration: underline;
font-size: 14px;
}
簡単に各プロパティを説明すると、「color」で文字の色を、「text-decoration」で文字の装飾を、「font-size」で文字の大きさを、それぞれ指定しています。どれも簡単な英単語で意味はそのままです。これを実際に表示すると、以下のようになります。
見出し4
如何でしょうか？スタイルシートはこのように、「どれに対して」（タグ、CLASS、ID）「どういった部分を」（色、大きさなど、プロパティ）「どのように指定するか」（14pxやunderlinetなど、値）を記述していきます。
見出し4全体を青い線で囲む
見出し4全体を青い線で囲みたい場合、「border」というプロパティを使用します。実際に例をご覧下さい。スタイルシートを以下のようにします。（赤線が追記部分）
h4.samplecolor {
color: #FF0000;
text-decoration: underline;
font-size: 14px;
border: 1px solid blue;
}
実際に確認してみましょう。
見出し4
上記のようになり、スタイルシートの一番下に「border」というプロパティが新たに付いていますが、ここで注意するポイントが2つ出て来ます。それは、「値が3つまとめて指定されている点」と「色の指定の仕方」です。
値をまとめて指定
値に関して、左側から「線の太さ」「線のタイプ」「色」の順番に指定しています。このような指定の方法は、他にも幾つかのプロパティで用いる事が出来ます。指定する値、はプロパティにより異なるのでご注意ください。
この「border」のプロパティに関しては、線の太さ、線のタイプ、色、だけでなく、それぞれ右線、左線、上線、下線にもプロパティが分かれています。例えば、左線だけ付けたい場合は「border-left」というプロパティを使用します。右であれば「border-right」。上であれば「border-top」。下であれば「border-bottom」といった具合です。「border」のみであれば、4方向全てに対して同じように適用します。
色の指定方法
次に、色に関して、今回の「border」の場合は、色を「blue」と英語をそのまま指定しています。しかしながら、文字の色を赤色に指定した場合には「color: #FF00000」という値で適用していました。
今回、色の指定に「blue」を使用したのは、色の名前を直接入力し指定する方法もある、というだけで、一般的には前者の「#FF00000」というRGB値をそれぞれ16進数で2桁づつ並べた値で構いません。
文字の色を指定していた「color: #FF0000」という値は、RGB値（赤・・・Red、緑・・・Green、青・・・Blue）をそれぞれ16進数で2桁ずつ並べた値で、HTMLでは一般的にこの方法で色を指定します。この方法での色の指定の仕方は、次に書きます。
次は「色を16進数の#RRGGBBで求める」です。
この「初めてのホームページ作成」の分類には以下のページがあります。
