text-size

文字のサイズや色の設定のやり方

ホームページ内の文字サイズや色の設定は、適当にしてはいけません。

なぜなら、あなたにとっては見やすい文字の大きさや色でも、他の方にとっては見やすいとは限らないからです。

特に、健常者の方にとっては普通に読める文字の大きさや色でも、視覚に障害を持っている方にとっては非常に読みにくいことがあります。

  • 文字の大きさが小さいと、高齢者や視覚に障害を持った方は読むことができません。
  • 背景色と文字色のコントラストが弱いと、高齢者や視覚に障害を持った方は読むことができません。

以上の問題を解決させるには、文字の大きさを大きく、コントラストを強くすればいいのですが、文字のサイズに関しては、大きくし過ぎるとページのデザイン性が損なわれることがあります。

では、ページのデザイン性を維持した上で、文字サイズの問題もクリアするためにはどうすればいいのでしょうか?

それを今から説明します。

文字の大きさに関しては、CSSでのサイズ指定を絶対指定ではなく、相対指定ですること。

絶対指定
絶対指定とは、pxやptなどでの指定のことです。
相対指定
相対指定とは、%やemなどでの指定のことです。

文字サイズを相対指定することによって、閲覧者がブラウザのメニューから自由に文字の大きさを変更することができます。
しかし、文字サイズを絶対指定していると、閲覧者側で文字の大きさを変更することができません。(補足:厳密には、px指定はモニタの解像度に影響されるので絶対指定ではなく相対指定になるのですが、InternetExplorerではpxしていると文字サイズを変更できなくなるため、ここでは理解しやすいように絶対指定の扱いをしてあります。)

つまり、閲覧者が「このページは文字の大きさが小さくて読みにくいな」と感じれば、文字サイズを大きくして読むことが可能なのです。

しかし、もし文字サイズが絶対指定されていたらどうなるでしょうか?

その通り。閲覧者はサイズ変更ができないのです。文字が小さくて読めない閲覧者にとっては、読む手段がありません。そのようなページは閲覧者のことを考えていない、制作者の独りよがりなページであると言えるでしょう。閲覧者に優しくないページといえます。

どのような文字の大きさが読みやすいのかは、人によって違います。つまり、正解がありません。だからこそ閲覧者が自由に文字のサイズを変更できるような設定にしておくことが大事であるといえるでしょう。

文字の大きさ

ホームページ作成に関するコラム

最近のつぶやき

自画像

ホームページ更新したよ。

自画像

うんこしたい。

自画像

ぽんぽん痛い。

XHTML+CSS

このページは正当なCSSです
このページはインターネット上の技術標準を定める組織「W3C」から、正当なCSS2.1として検証を受けています。
このページは正当なXHTMLです
このページはインターネット上の技術標準を定める組織「W3C」から、正当なXHTML1.0として検証を受けています。
このファイルはすべてのチェックをクリアした優秀なページです
このページはウェブサイトのアクセシビリティを診断するFUJITSU製のソフトウェア・WebInspectorで、「このファイルはすべてのチェックをクリアした優秀なページです。」との認定を受けています。

サイト内検索