CSSの1行で数字を美しく表示・整列する方法

この記事は DeepL によって翻訳されました。誤訳があれば教えてください！

フロントエンド開発者なら、次のような会話を一度は経験したことがあるでしょう：

💬 デザイナー： 「この表の数字がバラバラなのはなぜですか？幅が全部違いますよね。」
開発者： 「フォントの関係で数字ごとに幅が異なるので...」
デザイナー： 「等幅フォントを使うしかないんですか？」

この記事を読めば、こう答えられるようになります：

「いいえ、font-variant-numericの1行で解決できます。」

font-variant-numeric属性について

font-variant-numericは数字の表示方法を制御し、特定の数字関連スタイルを適用できるCSS属性です。主にタイポグラフィーにおいて、数字の形状、間隔、整列などを細かく調整する際に使用されます。

幅の制御 (numeric-spacing-values)

tabular-nums：プロポーショナルフォントの数字の幅を均一にします。
css
```
font-variant-numeric: tabular-nums;
```
before
0123456789
1231231231
after
0123456789
1231231231
proportional-nums：逆に、等幅フォントの数字を比例幅にします。
css
```
font-variant-numeric: proportional-nums;
```
before
0123456789
1231231231
after
0123456789
1231231231

スタイルの制御 (numeric-figure-values)

lining-nums：すべての数字をベースライン（基準線）に合わせて同じ高さで表示します。
css
```
font-variant-numeric: lining-nums;
```
before
0123456789
after
0123456789
oldstyle-nums：一部の数字（3, 4, 5, 7, 9）を小文字のように下に下げて表示します。
css
```
font-variant-numeric: oldstyle-nums;
```
before
0123456789
after
0123456789

分数値の制御 (numeric-fraction-values)

diagonal-fractions：通常の分数表記（1/2, 3/4）を自動的に対角線分数（½, ¾）に変換します。
css
```
font-variant-numeric: diagonal-fractions;
```
before
小麦粉 1/2カップ
砂糖 3/4カップ
after
小麦粉 1/2カップ
砂糖 3/4カップ
stacked-fractions：分数を上下に積み重ねた形で表示します。
css
```
font-variant-numeric: stacked-fractions;
```
before
1/2
砂糖 3/4
after
1/2
砂糖 3/4

その他の便利な機能

slashed-zero：数字の0にスラッシュを入れて、アルファベットのOと明確に区別します。
css
```
font-variant-numeric: slashed-zero;
```
before
ID: U00123O0
after
ID: U00123O0
ordinal：1st, 2nd, 3rdなどのテキストを序数形式で表示します。
css
```
font-variant-numeric: ordinal;
```
before
1st, 2nd, 3rd
after
1st, 2nd, 3rd

注意事項

すべてのフォントが前述のCSS属性に対応しているわけではありません。使用するフォントが該当するOpenType機能をサポートしている必要があります。 font-variant-numeric属性はOpenTypeフォントの高度な機能を活用するものであるため、ウェブフォントやシステムフォントがこれらの機能を内蔵していなければ正常に動作しません。例えば、古いフォントや基本的なウェブフォントの場合、diagonal-fractionsやoldstyle-numsなどの機能がサポートされていない可能性があります。

まとめ

これからはデザイナーが「表の数字の整列がなぜこんなにバラバラなの？」と聞いてきても慌てる必要はありません。font-variant-numericの1行で十分です。小さなCSS1行ですが、ユーザーが感じる完成度の差は大きいです。次のプロジェクトで数字を含むUIを作業する際は、font-variant-numericを思い出してください。きっとより良いユーザー体験を作ることができるでしょう。

参考