cssを使って文字サイズを指定する方法をご紹介します。
フォントサイズを指定する単位の代表的なものにpx、em、remがあります。これらの特徴を確認しましょう。
pxでフォントサイズを指定すると文字通りピクセルで指定がされます。
その結果、ブラウザでフォントの設定をすると適用されないようになります。
デザイン的な制限がないのであれば、ユーザーの視力を考慮して、なるべく変更が可能なemやremを使う方法を採用すると良いでしょう。
※IE確認方法 [Alt]キー(メニューバー表示)→表示→文字のサイズ→(任意のサイズ)
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="fontSample01">テスト</div> </body> </html>
@charset "UTF-8"; .fontSample01 { font-size: 20px; }
pxはピクセルによる単位ですので、そのサイズは絶対指定となります。それに対してemは1文字分の大きさを1.0emとする相対単位になります。
こちらを指定すると、px指定の時に動作できなかったフォントサイズの指定ができるようになります。
しかし、注意が必要です。文字列「テスト3」のようにフォントサイズがemにより、親子のボックスで指定がされていた場合、その値は累積されます。つまり、この場合は2倍×2倍となってしまうのです。フォントのサイズを指定するルールをサイト内で統一しなければなりません。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="fontSample01">テスト1</div> <div class="antiPatternOuter"> テスト2 <div class="antiPatternInner">テスト3</div> </div> </body> </html>
bodyタグにfont-sizeを62.5%で指定しています。この設定を行うと、1.0em→10px、1.3em→13pxとなりますので、サイズの把握をしやすくなります。
@charset "UTF-8"; body { font-size: 62.5%; } .fontSample01 { font-size: 2.0em; /* 20px */ } .antiPatternOuter { font-size: 2.0em; /* 20px */ } .antiPatternInner { font-size: 2.0em; /* not 20px */ }
emは先述のとおり、入れ子にした際の問題に配慮した作りをしなければなりません。 少々面倒だったのですが、CSS3からはこれをより分かりやすく指定することができるremという単位が追加されました。
remのrはルート(根)を意味し、htmlタグに指定がされたフォントサイズが基準になります。 入れ子で複数指定があったとしてもremで指定する限り、htmlでの設定に対する相対値で表示されます。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="fontSample01">テスト1</div> <div class="fontSample02"> テスト2 <div class="fontSample03">テスト3</div> </div> </body> </html>
@charset "UTF-8"; html { font-size: 62.5%; } .fontSample01 { font-size: 2.0rem; } .fontSample02 { font-size: 2.0rem; } .fontSample03 { font-size: 2.0rem; }
remを使うと、入れ子による重複設定を回避することができますが、css3に対応しているブラウザでしか機能しません。
そこで、解決策の一つとして、ほかの単位(px)と組み合わせて表示をする方法を紹介します。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="fontSample01">テスト</div> </body> </html>
@charset "UTF-8"; html { font-size: 62.5%; } .fontSample01 { font-size: 20px; font-size: 2.0rem; }