文字を赤、下線、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で求める」です。

一番上に戻る

この「初めてのホームページ作成」の分類には以下のページがあります。

  1. ホームページとは
  2. ホームページ作成に必要なもの
  3. 拡張子の変更方法
  4. 拡張子「.html」ファイルの作成方法
  5. HTMLのルール
  6. HTMLタグ一覧表
  7. スタイルシートとは
  8. スタイルシートの書き方
  9. 文字を赤、下線、14ピクセル現在のページ
  10. 色を16進数の#RRGGBBで求める
  11. カラーピッカー comin
  12. marginで空間作成
  13. paddingで空間作成
  14. backgroundで背景に画像
  15. font-familyで書式を変更
  16. font-weightで文字の太さ
  17. スタイルシートのプロパティ一覧
自作パソコンのキモ

ここより下はホームページに関するメニュー

ここより下はホームページに関するメニュー

ここより下は自作パソコン基礎&組み立てメニュー

ここより下はパソコンを納得して選ぶにはメニュー

ここより下はレンタルサーバーに関するメニュー


スマフォ時代にWiMAXが熱い!キャッシュバック有りの月額3,880円。クレードル(1,490円)も買えば、家では据え置きの一台二役で家ネットもパケット定額も解約出来る!?