等幅フォント不要！CSSで数字の幅を揃えるtabular-numsの紹介と使用例

Webサイトで数字を並べて表示すると、桁数を揃えているのに、なぜかガタガタに見えてしまうことがあります。

これは多くのフォントが「プロポーショナルフォント」と呼ばれる設計になっており、文字ごとに横幅が異なるためです。

例えば、1は幅が小さく、8や0は横幅が大きく作られています。

対策として、数字部分に等幅フォント（モノスペースフォント）を使う方法もありますが、デザインの都合上フォント自体は変えたくない場合もありますよね。

そこで今回の記事では、CSS1行でフォントを変えずに数字だけを等幅で表示する方法を紹介します。

実際の使用例や注意点も合わせて説明していきますので、ぜひ参考にしてみてください。

数字を等幅で表示するfont-variant-numeric: tabular-nums

font-variant-numericプロパティにtabular-numsを指定すると、数字の幅を等幅で表示することができます。

    .number {
  font-variant-numeric: tabular-nums;
}
  

このプロパティは数字の幅だけを等幅に切り替えるので、アルファベットや仮名などの文字幅には影響しません。

可読性を保持しつつ、数字のガタつきのみを綺麗に整えることができます。

tabular-numsを指定すると実際にどうなるか？

実際にtabular-numsを指定するとどうなるかを見てみましょう。

6桁の数字をtabular-numsを指定した場合と指定しない場合で比較してみました。

tabular-numsを指定していない列は、数字の幅がガタガタになっているのが確認できますね。

反対に、tabular-numsを指定している列は、0~9の数字の幅が全て等しくなっているのがわかるかと思います。

tabular-numsの実用例

次に、Web制作でtabular-numsを実際に使用すると便利な場面を、デモを交えて紹介します。

1. olの数字を等幅で表示する

まずよくあるパターンとして、ol（ordered list）タグで、数字の順番付きリストを実装する際にtabular-numsを指定すると便利です。

ほんの数pxのズレなので気にならないかもしれませんが、よく見るとガタついているのが確認できます。

「ガイドを表示」して比較するとよりはっきりと確認できるので、ぜひ試してみてください。

2. タイマーの数字を等幅で表示する

次に、タイマーの数字を等幅で表示する場合です。

サイトにカウントダウンタイマーやデジタル時計を実装する際に有効です。

tabular-numsを指定していないタイマーは、カウントのたびにガタついてしまっていますね。

対してtabular-numsを指定しているタイマーは、数字が変化しても横幅が等幅であることが確認できます。

3. カウントアップアニメーションの数字を等幅で表示する

次に、数字が徐々に増加していくカウントアップアニメーションを使用する場合です。

当サイトのTOPページでも使用しているアニメーションで、コーポレートサイトの「数字で見る」ページでよく使われるアニメーションですね。

tabular-numsがある場合とない場合で、見た目の印象が大きく違ってしまいます。

カウントアップアニメーションを実装する場合は、tabular-numsを指定するようにしましょう。

tabular-numsの注意点

font-variant-numeric: tabular-nums;は非常に便利なプロパティですが、使用する際にいくつか注意点があります。

1. フォントが対応していない場合がある

tabular-numsはCSSだけで完結する機能ではなく、フォント側が「等幅数字（tabular numbers）」に対応している必要があります。

このプロパティは、OpenTypeフォントの tnum（tabular figures）という機能を有効化するものです。

そのため、フォント側に等幅数字のデータが含まれていない場合は、CSSを指定しても数字の幅は揃いません。

2. 数字以外の文字には影響しない

font-variant-numericは 数字の表示に関する機能のみを変更するプロパティです。

そのため、このプロパティを指定しても、

• アルファベット
• 記号
• 日本語

などの文字幅には影響しません。

もしアルファベットや記号も含めてすべての文字幅を揃えたい場合は、モノスペースフォント（等幅フォント）を使用するなど、別のアプローチが必要になります。

まとめ

今回の記事では、CSSで数字の幅を揃えるfont-variant-numericプロパティのtabular-numsの紹介と使用例を紹介しました。

    .number {
  font-variant-numeric: tabular-nums;
}
  

等幅フォントを使用せずに数字の幅を揃えたい場合は、ぜひ活用してみてください。