【CSS】font-style: italic vs obliqueを使いこなす！ サンプルコード付き
2024-07-27
CSSにおける font-style: italic と oblique の違い
CSSの font-style プロパティは、テキストのスタイルを指定するために使用されます。 italic と oblique は、どちらもテキストを斜体にするために使用できる値ですが、微妙な違いがあります。
イタリック
- イタリックフォントは、筆記体を模倣した傾斜を持つフォントです。
- 通常、通常のフォントよりも細い線で構成されており、より装飾的な外観になります。
- 多くの場合、強調や対比のために使用されます。
オブリーク
- オブリークフォントは、通常のフォントを単に傾けたものです。
- イタリックフォントほど装飾的ではなく、よりニュートラルな外観になります。
比較
| 項目 | イタリック | オブリーク |
|---|---|---|
| デザイン | 筆記体を模倣 | 単に傾斜 |
| 線幅 | 細い | 太い |
| 用途 | 強調、対比 | 強調以外 |
| ブラウザサポート | 良好 | 一部フォントのみ |
フォントのサポート
すべてのフォントがイタリックとオブリークの両方をサポートしているわけではありません。 フォントがイタリックまたはオブリークスタイルをサポートしていない場合、ブラウザは代わりに別のフォントまたはシミュレートされたスタイルを使用する可能性があります。
例
p {
font-style: italic;
}
span {
font-style: oblique;
}
この例では、段落内のテキストはイタリックフォントで、span 要素内のテキストはオブリークフォントで表示されます。
font-style: italicは、テキストを筆記体風の斜体にします。font-style: obliqueは、テキストを単に傾斜させます。- どちらの値を使用するかは、目的とフォントのサポート状況によって異なります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>font-style: italic vs oblique</title>
<style>
p {
font-family: Arial, sans-serif;
font-size: 16px;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p>通常のテキスト</p>
<p class="italic">イタリック体のテキスト</p>
<p class="oblique">オブリーク体のテキスト</p>
</body>
</html>
説明
このコードは、以下の内容を定義しています。
Arialまたはsans-serifフォントをサイズ 16px で設定します。.italicクラスにはfont-style: italicを設定し、テキストをイタリック体にします。
結果
ブラウザでこのコードを開くと、以下の結果が表示されます。
- 通常のテキスト: 通常のフォントで表示されます。
- イタリック体のテキスト: 筆記体風の斜体で表示されます。
- オブリーク体のテキスト: 単に傾斜したフォントで表示されます。
- デフォルトの値です。
- テキストを通常のスタイルで表示します。
initial
- 要素の初期値に設定します。
- 継承されるスタイルがない場合、ブラウザのデフォルト設定が適用されます。
inherit
- 親要素の
font-style値を継承します。
uppercase
- すべての文字を大文字に変換します。
lowercase
small-caps
- 小文字を大文字の高さにして表示します。
uppercase-lowercase
- 偶数番目の文字を大文字、奇数番目の文字を小文字に変換します。
これらの値は、以下の例のように組み合わせて使用することができます。
p {
font-style: italic small-caps;
}
この例では、段落内のテキストはイタリック体で小文字の高さで表示されます。
すべてのフォントがすべての font-style 値をサポートしているわけではありません。 フォントがサポートしていない値を指定した場合、ブラウザは代わりに別の値またはシミュレートされたスタイルを使用する可能性があります。
css fonts
