テキストをイタリック・斜体にする
CSSでテキストをイタリック・斜体にするコードを紹介します。
概要
斜体やイタリックのフォントを表示する場合、font-styleプロパティを設定します。
書式
設定できる値は以下になります。
| 値 | 意味 |
|---|
| normal | 標準フォントで表示します。 |
| italic | イタリック体フォントで表示します。 |
| oblique | 斜体フォントで表示します。 |
| oblique (角度) | 指定した角度の斜体フォントで表示します。 |
記述例
font-style: italic;
font-style: oblique;
font-style: oblique 18deg;
表示例
下記のHTMLファイル、CSSファイルを記述します。
body {
font-family: "MS Gothic";
}
.Italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
<!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ファイルをWebブラウザで表示します。下図のページが表示されます。
Italic oblique クラスを指定した文字列が斜体の文字で表示されることが確認できます。
補足
日本語の文字列が斜体にならず、アルファベットの文字のみがイタリック表示される現象については
こちらの記事を確認してください。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最近は生成AIの画像生成の沼に沈んでいる。
作成日: 2012-12-21
改訂日: 2024-02-07
