<p data-line="0" class="code-line">今日以下のポストを見て感銘を受けたので覚え書きとして記事を書いてます。</p>
<p data-line="2" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__e97a6f953a28d" src="https://embed.zenn.studio/tweet#zenn-embedded__e97a6f953a28d" data-content="https%3A%2F%2Fx.com%2Fsorenblank%2Fstatus%2F2028520200417706017" frameborder="0" scrolling="no"></iframe></span><a href="https://x.com/sorenblank/status/2028520200417706017" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://x.com/sorenblank/status/2028520200417706017</a></p>
<h1 id="0%E3%81%A81%E3%81%AE%E6%A8%AA%E5%B9%85%E3%82%92%E5%90%8C%E3%81%98%E3%81%AB%E3%81%99%E3%82%8B" data-line="4" class="code-line">
<a class="header-anchor-link" href="#0%E3%81%A81%E3%81%AE%E6%A8%AA%E5%B9%85%E3%82%92%E5%90%8C%E3%81%98%E3%81%AB%E3%81%99%E3%82%8B" aria-hidden="true"></a> 0と1の横幅を同じにする</h1>
<p data-line="6" class="code-line">記事のタイトルの通り、<code>font-variant-numeric: tabular-nums;</code> を指定することで 0 と 1 の横幅を同じにすることができます。</p>
<p data-line="8" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/616c03527422-20260303.png" alt="" class="md-img" loading="lazy"></p>
<h1 id="font-variant-numeric" data-line="10" class="code-line">
<a class="header-anchor-link" href="#font-variant-numeric" aria-hidden="true"></a> font-variant-numeric</h1>
<p data-line="12" class="code-line"><code>font-variant-numeric</code> には <code>tabular-nums</code> 以外にも色々な値があります。</p>
<p data-line="14" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/74e61959af05-20260303.png" alt="" class="md-img" loading="lazy"></p>
<p data-line="16" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/c83037967fdb-20260303.png" alt="" class="md-img" loading="lazy"></p>
<p data-line="18" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/4bbbd4d8e154-20260303.png" alt="" class="md-img" loading="lazy"></p>
<p data-line="20" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/1ce8c26f699c-20260303.png" alt="" class="md-img" loading="lazy"></p>
<p data-line="22" class="code-line">フォントの種類によって効かなかったりしたので、CSSを指定しても変わらない場合はそこら辺を確認したほうが良いです。</p>
<p data-line="24" class="code-line">そのほか詳しいことは MDN をご覧ください↓</p>
<p data-line="26" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__2512e63d5b70e" src="https://embed.zenn.studio/card#zenn-embedded__2512e63d5b70e" data-content="https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FCSS%2FReference%2FProperties%2Ffont-variant-numeric" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/font-variant-numeric" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/font-variant-numeric</a></p>


0と1の横幅を同じにするCSS、font-variant-numeric: tabular-nums;

0と1の横幅を同じにする

font-variant-numeric

Discussion