Written by Kasumi

【簡単】CSSでフォントサイズ(font-size)を10px以下で表示する方法

フォントサイズ(font-size)を10px以下に指定したのに小さくならない。

これはブラウザの仕様によるものでChromeだと10px、safariだと9pxと規定があります。

本記事では、CSSのtransformプロパティを使って、見た目上10px以下にする方法について解説します。

transformを指定する

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

10px以下にしたいhtml要素にtransform: scale(倍率);を指定します。

CSSのtransform: scale();を使うことで要素を拡大・縮小する事ができます。

scale値に縮小倍率を入れます。1以下の値を入れる事で、設定しているフォントサイズを縮小してくれます。

以上で解決です。

まとめ

スマホのフォントサイズを指定する時、デザイン上どうしても10px以下にしなければいけない場合は本記事を参考にtransformプロパティを使いましょう。

基本テキストのサイズは16px以下だとスマホのユーザビリティを下げるので避けた方が良いです。

以上で解説を終わります。

目次

関連記事

HTMLCSS

CSSだけで行数を指定。三点リーダーを表示する方法

2023.04.18
752
HTMLCSS

【コピペ用】ハンバーガーメニューをCSSのみで実装する方法

2022.06.05
7696
HTMLCSS プログラミング

【簡単】iphone(ios)でinputタグをタップしたらズームされるのを回避する方法

2022.02.12
8775
HTMLCSS

【CSS】data属性の値を擬似要素のcontentプロパティで取得する方法

2023.04.22
1807