【CSS】フォントサイズが小さくならない！10px以下で表示する方法を解説

こんなお悩みを解決します。

本記事の内容

フォントサイズが小さくならない原因

まずフォントサイズが小さくならない原因ですが、

Google Chromeでは、読みさすさを維持するために最小フォントサイズが10pxとなっているためです。

そのため、フォントサイズを10px以下に指定しても反映されないのです。

フォントサイズを10px以下で表示する方法

それではフォントサイズを10px以下で表示する方法を解説します。

CSSコード

まずはCSSのコードから。

.text {
    display: block;
    font-size: 10px;
    transform: scale(0.8);
    transform-origin: left;
}

上記のコードで、フォントサイズを10px以下で指定できます。

CSSコードの解説

コードの解説をします。

要素をブロック要素にする

.text {
    display: block;
}

対象の要素がインライン要素の場合は、transformプロパティが効かないので、ブロック要素にします。

フォントサイズを10px以下にする

.text {
    font-size: 10px;
    transform: scale(0.8);
}

10pxに対して、どれくらい縮小するか指定します。

今回は、transform: scale(0.8);をつけているので8pxになります。

フォントサイズ10pxに対して、0.8倍＝8pxという計算です。

要素の位置を調整する

.text {
    transform-origin: left;
}

デフォルトではtransform-origin: center;となっており、要素が中央に寄ってしまうので位置を調整します。

まとめ：フォントサイズが小さくならない！10px以下で表示する方法を解説

フォントサイズを10px以下で表示する方法について解説しました。

このブログでは、自身がコーディングの際につまずいたことを備忘録としてまとめているので、よかったら他の記事も参考にしてみてくださいね。