ホームページ(HP)の背景の設定

ホームページを閲覧しているとページの背景(壁紙)に画像を使用しているものがあり、その上に書いた文字が読みにくいことがよくあります。ホームページを作成する時、「背景画像」 に画像ファイルを選択すると、ページ背面に指定した画像が表示されます。これはホームページを見た印象に影響を与え、うまく使うと効果的だと思います。しかし、文字の下地に使うのは読みにくくなることが多くできればやめましょう。

ホームページで最も重要なのは文字の情報です。画像だけを見てもらって文字はどうでも良いページならその必要はないかも知れません。そんなページは検索にも掛からないので元々見てもらえません。従ってホームページは文字の情報をいかに読みやすくわかりやすく伝えるかが最も重要となります。

ページの背景に壁紙を使う時の注意事項

ページの背景の壁紙は使い方によってはページの イメージ楽天 を高めるのに役立ちます。色の薄い物、模様があまり目だたない物やテキスト文字とのコントラストがあるものの方が良いと思います。テキスト文字の背景の壁紙の模様が際だつと文字が非常に読みにくくなります。できれば壁紙はテキスト文字の無いところで使いましょう。

できれば文字の背景には壁紙を使わない

ページのイメージや印象を決めるだけなら、壁紙を使わず背景色を設定した方が良いと思います。画像を使わないので表示が速くなるメリットもあります。私は基本的に壁紙は使わない方針です。

ホームページの背景の指定には、外部スタイルシートを使うのが便利です。外部スタイルシートで次のように設定します。

body {background-color: #rrggbb}

#rrggbbは背景の色を指定しています。赤緑青の3原色を16進数で00からffまでの数値で表わしています。(例 #ffeedd、黒は #000000、白は #ffffffです。)

見やすい文字と背景の配色

一般的には文字(テキスト)は黒色を使って、背景には白か灰色または淡色の明るい色が良いと思います。あまり暗い色だと黒とのコントラストが無くなって読みにくくなります。好みの問題かも知れませんが、私は黒地に白文字は読みやすいとは思えません。

背景を灰色にすると画面のまぶしさがなくなって少し見やすくなるのですが、あまり暗くすると暗いイメージになります。暖色系や寒色系の淡い色の中間色の中から好みのものを使ったらいかがでしょうか。

背景や壁紙で文字が読みにくい時の対処(ページ閲覧者側での対策)

インターネットのページを閲覧していて、背景や壁紙が適切でなくて文字が読みにくいページは見ないでさっさと閉じるのも手ですが、どうしても読みたい時は次のようにします。(インターネットエクスプローラの場合)

[インターネットオプション]の[全般]タブの中の[デザイン]内の[ユーザー補助]で[Webページで指定された色を使用しない]に設定すると、背景に使ってある色や壁紙が白色に統一されます。テキスト文字は黒色になります。独自のスタイルシートを指定することもできます。

FirefoxやOpera等のブラウザでは、スタイルシートを使用しない設定にしたり、独自のスタイルシートを使用したりするとうまく表示して読むことができます。