iPentec.com / Doc / CSS / HTML

テキストをイタリック・斜体にする - CSS

CSSでテキストをイタリック・斜体にするコードを紹介します。

概要

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

書式

font-style: (スタイル値)

設定できる値は以下になります。

値	意味
normal	標準フォントで表示します。
italic	イタリック体フォントで表示します。
oblique	斜体フォントで表示します。
oblique (角度)	指定した角度の斜体フォントで表示します。

記述例

font-style: italic;

font-style: oblique;

font-style: oblique 18deg;

表示例

下記のHTMLファイル、CSSファイルを記述します。

StyleFontStyle.css

body {
  font-family: "MS Gothic";
}

.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>