ホームページ作成/装飾・レイアウトの動的変更 (HTML,CSS,JavaScript)

読みやすいように!閲覧者に色を自由に変更させる方法

白地に黒では、輝度差が大きくて目が疲れてしまいます。読み物ページなどでは、閲覧者の目が疲れないようにしたいですね。背景色・文字色を、閲覧者が自由に変更できるようにしてみましょう。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

目に負担がかかっていませんか?

テキストエディタにせよ、ワープロソフトにせよ、画面の基本は、「白地に黒(白色の背景に黒色の文字)」ですね。 しかし、この白と黒は、輝度差が大きくなりすぎて、目に負担がかかってしまう組み合わせなようです。

特に長い文章を読ませるようなページを作る場合は、閲覧者の目が疲れないような色遣いをしたいですね。

しかし、誰にとっても最適であるような組み合わせというのは、おそらく存在しないでしょう。 そもそも、ディスプレイの設定からして、人それぞれなのですから。

というわけで、ホームページの背景色・文字色を、閲覧者が自由に変更できるような仕組みを用意してみましょう。
今回は、その方法をご紹介致します。

閲覧者に色を自由に変更させる

サンプルを用意しましたので、実際に使って試してみて下さい。 プルダウンメニューから色を選択すると、そのページの背景色や文字色を変化させることができます。

サンプルページはこちら
(新しいウインドウが開きます)

動作イメージ
サンプル画面(オリジナル) サンプル画面(灰色背景&黒色文字)
サンプル画面(淡い黄色背景&暗い赤色文字) サンプル画面(緑色背景&白色文字)

実現の方法は...

それでは、この機能を実現する方法をご紹介致しましょう。

それでは次のページへ →

  • 1
  • 2
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます