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

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

目次

関連記事

WordPress プログラミング

【wordpress】先頭固定記事かどうかを判別して条件分岐する方法

2021.10.26
364
PHP プログラミング

phpを使って、ヘッダーやフッターを共通パーツ化・インクルードさせる方法

2021.06.11
472
プログラミング

is not a function at chrome-extensionの原因と対処方法

2022.10.05
273
WordPress プログラミング

【wordpress.orgにログインできず、プラグインの新規追加・外部へ接続する際の通信がうまくいかない】原因・解決方法を紹介

更新日:2022.10.19
2464