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

position: sticky;で要素が追従しない時の原因・対処方法

2022.10.06
1441
HTMLCSS

CSSで見出しの左右に1本の斜線を引く方法

2022.11.27
1877
HTMLCSS

【簡単】CSSで背景画像だけ回転させる方法

2022.12.02
10562
プログラミング

webサイトで過去ページのデザイン・内容を見る方法【Wayback Machineで簡単】

2020.07.16
502