CSSのfont-styleプロパティとは？イタリック・斜体の指定方法を解説
CSSのfont-styleプロパティは、要素のテキストに対して「通常（normal）」「イタリック（italic）」「斜体（oblique）」のいずれかのスタイルを指定するために使用されます。italicはフォント自体が持つ斜めの書体を利用するのに対し、obliqueはテキストを指定した角度で傾けられる点が特徴です。
構文
CSSのfont-styleプロパティの構文は以下のとおりです。
Selector {
font-style: /*値*/
}
指定できる主な値
- normal … 通常の書体を表示します（初期値）。
- italic … フォントのイタリック体（斜めの書体）を表示します。
- oblique … テキストを傾けて表示します。「oblique 10deg」のように角度を指定することも可能です。
使用例
以下の例は、CSSのfont-styleプロパティの基本的な使い方を示したものです。
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
font-style: italic;
background-color: steelblue;
color: white;
}
p {
font-style: oblique 10deg;
}
</style>
</head>
<body>
<h2>Fortran Tutorial for Beginners</h2>
<p>Fortran, as derived from Formula Translating System, is a general-purpose, imperative programming language.</p>
<p>It is used for numeric and scientific computing.</p>
</body>
</html>
出力結果
上記のコードを実行すると、次のような出力が得られます。見出し（h2要素）にはイタリック体が適用され、段落（p要素）には10度の角度で傾いた斜体が適用されます。
使用例（角度を指定した斜体）
次の例では、リスト項目に対して「oblique 5deg」と角度を指定し、テキストを軽く傾けて表示しています。
<!DOCTYPE html>
<html>
<head>
<style>
h3 {
font-style: italic;
background-color: mediumpurple;
color: white;
text-align: center;
}
li {
font-family: "Comic Sans MS", cursive;
font-style: oblique 5deg;
}
</style>
</head>
<body>
<h3>Developers Best Practices Tutorial</h3>
<ul>
<li>Documentation is the key</li>
<li>Follow the standards</li>
<li>Write to be Reviewed</li>
</ul>
</body>
</html>
出力結果
上記のコードを実行すると、次のような出力が得られます。見出しは中央揃えのイタリック体になり、リスト項目は5度傾いた斜体で表示されます。
-
CSSのfont-variantプロパティとは？使い方と実例をわかりやすく解説
CSSのfont-variantプロパティは、テキストの字形（グリフ）のバリエーションを指定するためのショートハンド（一括指定）プロパティです。このプロパティを使うことで、以下の個別プロパティの値をまとめて設定できます。font-variant-caps（大文字・小文字の字形）font-variant-numeric（数字の字形）font-variant-alternates（代替字形）font-variant-ligatures（合字）font-variant-east-asian（東アジア言語向けの字形）構文font-variantプロパティの基本的な書き方は次のとおりです。Selecto
-
CSSのfont-sizeプロパティとは？フォントサイズの指定方法を実例付きで解説
CSSのfont-sizeプロパティは、テキストのフォントサイズ（文字の大きさ）を設定するために使用されるプロパティです。値はパーセンテージ（%）や、px（ピクセル）、cm、pt（ポイント）、emなどの単位、さらには絶対的なキーワードによって指定できます。特に相対的な値を使用することで、ユーザーがブラウザの設定を変更しても文字サイズが追従し、アクセシビリティを最大限に高めることができます。なお、フォントサイズのデフォルト値は16px（または12pt）です。構文CSSのfont-sizeプロパティの基本構文は以下の通りです。セレクタ { font-size: /*値*/ }font-si