CSSで文字をブラウザ最小フォントサイズよりも小さくする方法

どうも、ブラウザで小さく表示したいと思ったときに10px以下でフォントサイズを指定してもブラウザの最小フォントサイズ(10px)で表示されてしまいますよね?そんなときに無理矢理CSSで小さくする方法をご紹介します。

文字の可読性の点で言うと10px以下にすることは好ましくないと思いますが、「いや、この文字はもっと小さい方がおしゃれなんだ」とか「入れなきゃいけないけど目立たせたくない、むしろ消したい、けど消せない」というときに使用できるかと思います。

transform:scaleを使用

小さくしたい文字にtransform:scaleを使用します。そうすれば10px以下に表示することができます。下記がサンプルになります。

display:inlineではtransform:scaleすることはできません。

サンプル

10pxより文字を小さくします。
10pxより文字を小さくします。
10pxより文字を小さくします。
10pxより文字を小さくします。
10pxより文字を小さくします。
10pxより文字を小さくします。
10pxより文字を小さくします。
10pxより文字を小さくします。
10pxより文字を小さくします。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。