CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのfont-variantプロパティとは？基本構文と実装例をわかりやすく解説

CSSのfont-variantプロパティは、テキストの字形（グリフ）の表示方法を制御するためのショートハンド（一括指定）プロパティです。このプロパティを使うことで、スモールキャップス（小型大文字）などの特殊な文字スタイルを簡単に適用できます。

font-variantがまとめて指定できる個別プロパティ

font-variantは、以下の5つの個別プロパティの一括指定として機能します。

  • font-variant-caps：大文字・小文字の字形を制御
  • font-variant-numeric：数字の字形（タブular数値や分数など）を制御
  • font-variant-alternates：代替グリフの使用を制御
  • font-variant-ligatures：合字（リガチャ）の有効・無効を制御
  • font-variant-east-asian：東アジア言語向けの字形を制御

基本構文

font-variantプロパティには、以下の値を指定できます。

font-variant: normal | small-caps | initial | inherit;
  • normal：通常の字形で表示（デフォルト）
  • small-caps：小文字を小型の大文字に変換して表示
  • initial：初期値に戻す
  • inherit：親要素の値を継承する

実装例1：font-variant: normal の場合

まずは、font-variantに「normal」を指定した基本的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: linear-gradient(to right, yellow, orange, yellow, green, blue, indigo, violet);
}
.demo {
    text-decoration: overline;
    text-decoration-color: yellow;
    font-variant: normal;
}
</style>
</head>
<body>
<h1>Examination Details</h1>
<p class="demo">Exam on 20th December.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

出力結果

このコードでは、グラデーション背景の上に、上線（オーバーライン）付きのテキストが通常の字形で表示されます。

実装例2：font-variant: small-caps の場合

次に、「small-caps」を指定した例です。小文字がすべて小型の大文字に変換されて表示されます。

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
    text-decoration: overline underline;
    text-decoration-color: blue;
    font-variant: small-caps;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

出力結果

「examination center near abc college」のように入力した小文字部分が、小型の大文字（スモールキャップス）で表示されます。元々大文字だった部分は通常サイズの大文字のまま維持されるため、見出しや強調したいテキストに洗練された印象を与えられます。

まとめ

font-variantプロパティは、特に欧文タイポグラフィにおいて表現力を高める便利なプロパティです。「small-caps」を活用すれば、HTMLのマークアップを変更することなく視覚的な階層を作れるため、見出しデザインやナビゲーションメニューなどにも効果的です。対応ブラウザも多いため、積極的に活用してみてください。

  1. CSSのwhite-spaceプロパティとは？要素内の空白・改行の扱い方を徹底解説

    CSSのwhite-spaceプロパティを使うと、HTML要素内の半角スペース、タブ、改行などの空白文字をどのように表示するかを細かく制御できます。デフォルトでは連続する空白は1つにまとめられますが、このプロパティを指定することで、ソースコード上の空白や改行をそのまま反映させたり、逆に折り返しを禁止したりすることが可能です。 white-spaceプロパティの基本例 以下は、normalとpreという2つの値を使って、空白の扱いの違いを比較するサンプルコードです。 <!DOCTYPE html> <html> <head> <style>

  2. CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

    writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し