レスポンシブ対応などの際、デザイン性を重視し、「ここだけは文字サイズを小さくしてエリア内に納めたい!」という要望があったとします。その場合、みなさんはどんな方法で対応しますか？
ブラウザ上でフォントを 10px以下のサイズとして表示させたい
ブラウザが表示できるテキストの大きさ（font-size）には限界があります。最小サイズはブラウザの設定によっても異なりますが、例えば chrome では 10pxが一番小さいフォントサイズです。
transform:scaleを使ってみる！
CSS3 の機能で要素を拡大・縮小表示する際に使う scale。こちらを利用し、font-size:10px; に設定した文字を縮小させ、ブラウザが表示できる限界のサイズを超えていきたいと思います。
では早速。
CSSコード
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%で表示させる、といったかたちです。
工夫次第でいろいろなことが実装できておもしろいですね。偏見を捨てて、自由な発想で楽しくコーディングしていきたいと思います。