[CSS] [HTML] スタイルシートによるフォントスタイルの変更 - フォントの書体をボールドやイタリックにする

このページのタグ:[CSS] [HTML]
スタイルシートを用いたフォントスタイルの変更方法を紹介します。

斜体、イタリックフォントの表示

斜体やイタリックのフォントを表示する場合、font-styleプロパティを設定します。

書式

font-style: (スタイル値)
設定できる値は以下になります。

意味
normal標準フォントで表示します。
italicイタリック体フォントで表示します。
oblique斜体フォントで表示します。

コード例

下記コードを記述します。

StyleFontStyle.css


.Italic {
  font-style:italic;
}

.oblique {
  font-style:oblique;
}

CssFontStyle.css


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="StyleFontStyle.css" />
</head>
<body>
    <div>通常フォント ABCDE</div>
    <div class="Italic">イタリックフォント ABCDE</div>
    <div class="oblique">斜体フォント ABCDE</div>
</body>
</html>

表示結果

上記のHTMLファイルを表示すると下図の結果となります。スタイルシートで指定した領域の文字がイタリック体で表示されます。

太字、ボールドフォントの表示

ボールド、太字のフォントを表示する場合、font-weightプロパティーを設定します。

書式

font-weight: (フォントウェイト数)
または
font-weight: (キーワード)
となります。値は以下となります。

フォントウェイト数

100, 200, 300, 400, 500, 600, 700, 800, 900 で指定します。数字が大きくなるほど太いフォントになります。

キーワード

キーワード説明
normal標準の太さです。(フォントウェイト数 400に相当します)
bold一般的な太字です。(フォントウェイト数 700に相当します)
lighter設定されているフォントウェイトを(相対的に)一段階細くします。フォントウェイト -100
bolder設定されているフォントウェイトを(相対的に)一段階太くします。フォントウェイト +100

表示例1

下記コードを記述します。

StyleFontStyle.css


.bold {
  font-weight:bold;
}

.bolditalic {
  font-weight:bold;
  font-style:italic;
}

CssFontStyle.css


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="StyleFontStyle.css" />
</head>
<body>
    <div>通常フォント ABCDE</div>
    <div class="bold">ボールドフォント ABCDE</div>
    <div class="bolditalic">ボールドイタリックフォント ABCDE</div>
</body>
</html>

表示結果


表示例2

font-weightを数値で指定した場合の表示例です。

StyleFontStyle.css


.weight100 {font-weight:100;}
.weight200 {font-weight:200;}
.weight300 {font-weight:300;}
.weight400 {font-weight:400;}
.weight500 {font-weight:500;}
.weight600 {font-weight:600;}
.weight700 {font-weight:700;}
.weight800 {font-weight:800;}
.weight900 {font-weight:900;}

CssFontStyle.html


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="StyleFontStyle.css" />
</head>
<body>
    <div class="weight100">Font Weight = 100</div>
    <div class="weight200">Font Weight = 200</div>
    <div class="weight300">Font Weight = 300</div>
    <div class="weight400">Font Weight = 410</div>
    <div class="weight500">Font Weight = 500</div>
    <div class="weight600">Font Weight = 600</div>
    <div class="weight700">Font Weight = 700</div>
    <div class="weight800">Font Weight = 800</div>
    <div class="weight900">Font Weight = 900</div>
</body>
</html>

表示結果

下図の表示結果となります。フォントにより用意されているフォントウェイトの種類が違うため、フォントウェイトの値が変化しても表示内容が変わらない場合があります。

補足

フォントウェイトが多く用意されているフォントの場合は、値によりフォントの太さが変わります。
StyleFontStyle.css

.weight100 { font-family: "AXIS Std"; font-weight: 100; }
.weight200 { font-family: "AXIS Std"; font-weight: 200; }
.weight300 { font-family: "AXIS Std"; font-weight: 300; }
.weight400 { font-family: "AXIS Std"; font-weight: 400; }
.weight500 { font-family: "AXIS Std"; font-weight: 500; }
.weight600 { font-family: "AXIS Std"; font-weight: 600; }
.weight700 { font-family: "AXIS Std"; font-weight: 700; }
.weight800 { font-family: "AXIS Std"; font-weight: 800; }
.weight900 { font-family: "AXIS Std"; font-weight: 900; }
表示結果
font-weightの値によりフォントの太さが変わっています。(下図の実行結果と同じ表示を得るには、クライアントPCに"AXIS Font"がインストールされている必要があります。)

登録日 :2012-12-21    最終更新日 :2013-01-10
このページのタグ:[CSS] [HTML]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)