読めるかな？視力検査なみに小さいフォント

HTML・CSS

レスポンシブ対応などの際、デザイン性を重視し、「ここだけは文字サイズを小さくしてエリア内に納めたい!」という要望があったとします。その場合、みなさんはどんな方法で対応しますか？

ブラウザ上でフォントを 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);
}