概要
先日、Webサイトを作成していた際に、font-sizeを10px以下にしようとしたところ、数値を10px以下に設定してもブラウザに適用されませんでした(ブラウザは、Google Chromeを使用)。
調べた結果、解決策が分かったので、今回は、Google Chromeでfont-sizeが10px以下にならない時の解決方法を紹介します。
目次
- 事前知識
- font-sizeを10px以下にする方法
- 最後に...
事前知識
Google Chromeでは、CSSでfont-sizeを10px以下に設定しても、ブラウザ上で10px以下にはならない。
font-sizeを10px以下にする方法
HTML例文
<pclass="small">文字サイズ9px</p>CSS例文
.small{-webkit-transform:scale(0.9);-webkit-transform-origin:00;}「-webkit-transform」を使って、要素を90%の大きさに縮小します。
「-webkit-transform」のみを指定すると、縮小の基準点が要素の真ん中になってしまうので上下左右に余白が空くことになります。
その為、状況に合わせて、臨機応変に対応する必要があります。
今回は、「-webkit-transform-origin」を使って、縮小の基準点を左上(0,0)に設定しています。
補足
・「transform」は、要素の移動、拡大縮小、回転などを制御できます。
・「-webkit-」を使用した場合、safariにも効いてしまうので、他のブラウザには、効かせたくない場合は注意が必要です。
最後に...
今回は、Google Chromeでfont-sizeを10px以下にする方法を紹介しました。
最後まで、読んでいただきありがとうございました。