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 プログラミング

【簡単】html・cssを使ってtable(テーブル)タグを角丸にする方法

2022.02.15
246
HTMLCSS

CSSでテキストを大文字・小文字に自動変換する方法

2022.08.04
253
HTMLCSS プログラミング

スマホなどでaタグのリンクが2回タップしないと機能しない原因

2021.01.17
2031
WordPress プログラミング

【簡単】wordpressのショートコードを使って、投稿記事内にphpファイルを呼び出す方法

2022.02.04
437