【簡単】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以下だとスマホのユーザビリティを下げるので避けた方が良いです。

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

Ads

関連記事

JavaScript プログラミング

【簡単】datapickerに日本の祝日を自動で登録し、選択不可にする方法【jQuery】

2022.02.25
151
WordPress プログラミング

【簡単】Advanced Custom Fieldsを使い、手動で任意の関連記事を出力するフィールドを導入

2022.03.21
98
HTMLCSS

tableのtd・thタグ内テキストが改行されない原因と解決方法

2022.06.06
100
JavaScript プログラミング

【簡単】slickスライダーでサムネイルを連動・固定2列2段以上で表示させる方法

2022.01.27
973