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

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

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

transform:scaleを使用

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

{
　　display:block;
    transform:scale(0.9);
}

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

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

2,063円

Amazonで見る