フォントをem指定

以前紹介したフォント関連の指定とは別にフォントの指定を紹介します。
と言いましてもWeb Designingで紹介されていたものなので、相変わらずメモの変わりにとっておいている程度です。今回はemを使ってピクセル単位の感覚で文字サイズをコントロールするというものです。

やり方はいたって簡単ですので、覚えておいて損はないかと思います。

bodyの指定
まずbody要素に対して”font-size: 62.5%;”と指定します。

HTML


body {
font-size: 62.5%;
}

これだけですが、詳しく説明しますとそのページの標準状態の文字サイズの大きさが10pxであれば、12pxの大きさは1.2emとなります。20pxであれば2emとなります。

body要素に対して”font-size: 10px;”としてしまうと、IEのメニューから文字サイズを変更できなくなります。そこでパーセント単位で指定するために、62.5%(10px÷16px)を指定しています。

実際にサンプルを作ったときに思ったことは、物凄く使いやすい感じがします。というのもわざわざ計算をしなくてもいいからです。26pxなら2.6em、14pxなら1.4emといった感じで、コーディングがかなりさくさくできます。

フォントサイズをemで指定するのサンプルはこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください