yoshii読めるかな？視力検査なみに小さいフォント
レスポンシブ対応などの際、デザイン性を重視し、「ここだけは文字サイズを小さくしてエリア内に納めたい!」という要望があったとします。その場合、みなさんはどんな方法で対応しますか？
ブラウザ上でフォントを 10px以下のサイズとして表示させたい
ブラウザが表示できるテキストの大きさ（font-size）には限界があります。最小サイズはブラウザの設定によっても異なりますが、例えば chrome では 10pxが一番小さいフォントサイズです。
transform:scaleを使ってみる！
CSS3 の機能で要素を拡大・縮小表示する際に使う scale。こちらを利用し、font-size:10px; に設定した文字を縮小させ、ブラウザが表示できる限界のサイズを超えていきたいと思います。
では早速。
CSSコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | div{ font-size: 10px;}.font_01{ transform:scale(0.9);}.font_02{ transform:scale(0.8);}.font_03{ transform:scale(0.7);}.font_04{ transform:scale(0.6);}.font_05{ transform:scale(0.5);}.font_06{ transform:scale(0.4);}.font_07{ transform:scale(0.3);}.font_08{ transform:scale(0.2);}.font_09{ transform:scale(0.1);} |
サンプル
font_normal フォントをscaleで小さくするよ
font_01フォントをscaleで小さくするよ
font_02フォントをscaleで小さくするよ
font_03フォントをscaleで小さくするよ
font_04フォントをscaleで小さくするよ
font_05フォントをscaleで小さくするよ
font_06フォントをscaleで小さくするよ
雑学 ドラえもんの青い体はボディースーツらしい
font_08フォントをscaleで小さくするよ
font_09フォントをscaleで小さくするよ
使い方
まず、フォントサイズを指定します。この時のサイズを基準に縮小されるので、もちろん20pxなどで指定すると20pxから何パーセントづつしか小さくなりません。
次に transform: scale(値) でどのくらい小さくするのかを指定します。
アクセシビリティ等の観点からは懸念もありますので、乱用は避けたいところですね。「どうしても！」という場面での利用にとどめておければと思います。
エピローグ
仕組みは意外と簡単です。10pxで表示したフォントをさらに80%で表示させる、といったかたちです。
工夫次第でいろいろなことが実装できておもしろいですね。偏見を捨てて、自由な発想で楽しくコーディングしていきたいと思います。
参考サイト
