[Sponsor] 「Web制作者のための黒い画面(ターミナル)入門講座」
という無料講座を渋谷で開催!
はじめてのWebデザイン『HTML・CSS』入門

3-3. 文字を太くする(font-weight)・斜めにする(font-style)・下線をつける(text-decoration)

CSSの記法には慣れましたでしょうか?文字の色に続いて、文字を太くしたり(font-weight)、斜めにしたり(font-style)、下線を引く(text-decoration)方法を解説します。

  • HTML・CSS
  • Webデザイン

公開日:2019/06/19最終更新日:2019/06/20

1.文字の太さを変える(font-weight)

文字の太さを変えてみましょう。文字の太さを調節するCSSプロパティは「font-weight」です。

「font-weight」には以下の値が入れられます。

  • normal(標準です)
  • bold
  • bolder
  • lighter
  • 100〜900(標準は400、最高で9種類)

boldは太く、bolderはより太く、lighterは細くなります。

どれぐらいまで太くなるかは用意されているフォントによって違います。多くの太さが用意されているフォントは、最高で9種類まで太さを指定することができます。

それでは「font-weight」の値を「bold」に指定してみましょう。

サンプルHTML:

<html>
<head>
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>
  <p class="bold">文字を太くする</p>
</body>
</html>

サンプルCSS:

.bold {
  font-weight: bold;
}

プレビュー:

2.文字を斜めにする(font-style)

文字を斜めにしてみましょう。文字を斜めにするCSSプロパティは「font-style」です。

「font-style」には以下の値が入れられます。

  • normal(標準です)
  • italic
  • oblique

文字を斜めにする値は「italic」と「oblique」の2つあります。両方とも斜めになりますが、フォントによってはイタリック体と斜体の2パターンが用意されていることがあります。欧文フォントの場合は用意されていることがあります。フォントがitalicを持っていない場合にitalicを指定するとobliqueが適用され、その逆の場合も同様の動作となります。

それでは「font-style」の値を「italic」に指定してみましょう。

サンプルHTML:

<html>
<head>
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>
  <p class="italic">文字を斜体にする</p>
</body>
</html>

サンプルCSS:

.italic {
  font-style: italic;
}

プレビュー:

3.文字に下線を引いてみる(text-decoration)

文字に下線を引いてみましょう。文字に下線を引くCSSプロパティは「text-decoration」です。

「text-decoration」には以下の値が入れられます。

  • none(標準です)
  • underline
  • overline
  • line-through

文字には下線だけでなく、上に線を引いたり(overline)、真ん中に線を引くことができます(line-through)。

それでは「text-decoration」の値を「underline」に指定してみましょう。

サンプルHTML:

<html>
<head>
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>
  <p class="underline">文字に下線を引く</p>
</body>
</html>

サンプルCSS:

.underline {
  text-decoration : underline;
}

プレビュー:

理解度チェック

はじめてのWebデザイン『HTML・CSS』入門

1. HTMLとCSSを学ぶ準備

2. HTMLの基礎知識

3. CSSの基礎知識

このレッスンの著者