文字の装飾

文字の表示をCSSを使って操作する方法をまとめました。

CSSでサイトをデザインする際の参考にしてください。

文字の色を変える

では、文字の色を変える方法を紹介します。

文字の色を変えるにはcolorを使用します。

以下のようにh1タグをCSSファイルで赤色に指定します。

【index.html】

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>オブジェクト</h1>
</body>
</html>

【style.css】

h1{color:#FF0000;}

index.htmlをブラウザで見ると

実行結果

となります。

「FF0000」が赤色を示しています。

色は2桁の16進数で表記されます。16進数なので

「0,1,2,…,9,A,B,C,D,E,F」

の16個の数字を使います。「FF0000」のうちはじめの2つの数字「FF」が赤、中間の「00」が緑、最後の2つの数字「00」が青を表しています。

赤だけが最大の値FFとなっているので、赤が指定されたことになります。

もし、青を指定したいなら

0000FF

とします。

文字の背景色を変える

次に背景色を指定します。先ほどのCSSを

h1{
	color:#FF0000;
	background-color:#00FF00;
}

と書き換えます。するとindex.htmlは

背景を緑にした結果

と表示されます。background-colorで文字の背景を指定できます。

ここでは、「#00FF00」としたので緑色の背景になっています。

文字に線をつける

最後に文字に線をつけてみます。

線には

  1. 種類
  2. 太さ

の3つの要素を指定できます。例えば、先ほどのCSSを

h1{
	color:#FF0000;
	background-color:#00FF00;
	border: solid 5px #0000FF;
}

とすれば

ボーダー

と表示されます(右の方はキャプチャしていません)。このように周りが

  1. 種類:ソリッド
  2. 太さ:5px
  3. 色:青(0000FF)

で線が表示されます。

線の種類

線の種類は

  1. none
  2. solid
  3. double
  4. dotted
  5. dashed
  6. groove
  7. ridge
  8. inset
  9. outset

を指定できます。以下を参考にしてください。

線の種類

線を一部表示する

線を下だけに表示させたりすることが可能です。その場合はborderの部分を

  1. border-top:上
  2. border-bottom:下
  3. border-left:左
  4. border-right:右

というようにします。

h1{
	color:#FF0000;
	background-color:#00FF00;
	border-bottom: solid 5px #0000FF;
}

なかんじにすると

下線のみを表示

となります。

種類・太さ・色だけを設定する

種類、太さ、色を同時に指定するのでなく、一部のみを指定したい場合は

  1. 種類のみ:border-style
  2. 太さのみ:border-width
  3. 色のみ:border-color

とします。もし、下線で種類のみ指定したいなら

border-style-bottom

とします。

余白の調整

最後に文字と線の余白の調整方法を解説します。

考え方は基本的に「paddingとmarginの考え方」と同じです。

paddingにより文字とボーダーとの間の余白を設定します。

 

とすれば、上下に5px、左右に20pxの余白ができます。実際

【Before】

ボーダー

【After】

Mozilla_Firefox

のように表示されます。

 文字のサイズの設定

文字のサイズは

font-size: X;

により設定します。Xには

  1. xx-small:超極小
  2. x-small:極小
  3. small:小
  4. medium:標準
  5. large:大
  6. x-large:特大
  7. xx-large:超特大
  8. smaller:より小さく
  9. larger:より大きく
  10. %:親要素に対するパーセンテージ
  11. px:ピクセルで指定

が入ります。

行間の指定

行間は文字の高さの指定を

line-height: 2;

のようにすることで指定できます。この場合、文字の2倍が文字の高さに指定されます。

ですから、もし文字サイズが10pxなら、文字の高さは20pxになります。

よって、文字と文字の間の空白は10pxとなります。

行間

文字の太さの設定

文字の太さは

font-weight: X;

により設定します。Xには

  1. normal:標準
  2. bold:太字
  3. bolder:より太く表示
  4. lighter:より細く表示
  5. 100〜900:100刻みで太さを指定する

が入ります。

文字のフォントの設定

文字フォントは

font-family: X;

により指定します。Xにフォント名が入ります。以下、代表的なフォントをあげておきます。

  1. serif:明朝系
  2. sans-serif:ゴシック系
  3. cursive:筆記体
  4. monospace:固定幅の書体
  5. fantasy:装飾系の書体

フォント集

フォントがない場合に備え

font-family: フォント1,フォント2,フォント3;

のように複数のフォントを用意することができます。

著者:安井 真人(やすい まさと)