yoshii

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

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

ブラウザ上でフォントを 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%で表示させる、といったかたちです。
工夫次第でいろいろなことが実装できておもしろいですね。偏見を捨てて、自由な発想で楽しくコーディングしていきたいと思います。

参考サイト

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら