攻略!サーチエンジン最適化

SEO対策・検索エンジン最適化対策・検索順位上位表示・検索順位向上・アクセスアップ

サイト内検索
SEO対策書籍
検索エンジン

文字サイズ変更

通常、ホームページにはさまざまな年齢層の方が訪れます。モニターの画面の大きさによる観やすさは勿論、目の良い方、悪い方と、状況に応じて文字のサイズを変更したい場合もありますよね?
文字には「絶対サイズ」と「相対サイズ」という2つが存在します。レイアウト、サイト構成に合わせ上手に使い分けましょう。

絶対サイズと相対サイズ

ホームページで表す文字サイズの単位はいろいろありますが、ブラウザによる文字サイズの変更が可能な相対サイズと変更不可な絶対サイズがあります。

相対サイズは、emexpx%、などがあります。
絶対サイズは、pcptcmmmin、などがあります。

一般的には、px(ピクセル)を使う方が多いかもしれませんが、相対サイズであるpxはWindows版のInternet Explorer(インターネットエクスプローラー)ではサイズ変更ができません。
もっとも使用頻度の高いブラウザですから、IEでサイズ変更できないということはほとんど絶対サイズと同じことになります。ユーザビリティ的にはpx単位はおすすめできません。

文字単位「em」を使用する

「em」単位はWin版のIEでも文字サイズの変更が可能です。これによって小さく読みにくい文字もブラウザの「文字のサイズ」(IEの場合)の変更により拡大して見ることができる様になります。emの「1」がpxの「16」と同じサイズになります。

他は以下の通りです。
px em
32 2
24 1.5
18 1.125
16 1
12 0.75
10 0.625

余白サイズの単位は「px」を使用?

スタイルシート(CSS)の使用によりHTMLではできなかった細かいデザイン設定が可能になりました。文字の背景色の”余白”(padding)をemで設定すると、IEのブラウザで「文字のサイズ」を大きくした時に、その”余白”も一緒に拡大されてしまいます。
余白の幅は一定を保ち文字だけ大きくしたいのに、文字サイズと一緒に余白も拡大されてしまうのです。これではレイアウトが崩れてしまいます。
文字サイズだけ拡大し、ブラウザの余白を一定にする場合は基本的に”px”を指定して下さい。
ページトップ