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

読みやすいように!閲覧者に色を自由に変更させる方法(2ページ目)

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

それでは、実現方法のご紹介です。
HTMLでプルダウンメニューを用意して、プルダウンメニューが変化すると、背景色や文字色が変化するようJavaScriptを記述します。

スクリプト部:

まずは、head要素(<head>~</head>タグ)内に、次のスクリプトを記述しておきます。 どこも書き換える必要はありませんので、そのままコピー&ペーストして下さい。

<script type="text/javascript"><!--
   function changebgcolor(cn) {
      document.bgColor = cn;
   }
   function changefgcolor(cn) {
      document.fgColor = cn;
   }
// --></script>

document.bgColor:色名を代入することで、ページの背景色を変更できます。
document.fgColor:色名を代入することで、ページの文字色を変更できます。

HTML部:

次に、プルダウンメニューを作るHTMLを記述します。 様々な色を追加したい場合には書き換えたり追加したりする必要がありますが、 このままコピー&ペーストするだけでも、とりあえず使えます。

<form>
  背景色:
  <select onChange="changebgcolor(this.value);">
    <option value="white" selected></option>
    <option value="#e0e0e0">12.5%灰色</option>
    <option value="#c0c0c0">25%灰色</option>
    <option value="#a0a0a0">37.5%灰色</option>
    <option value="#808080">50%灰色</option>
    <option value="#404040">75%灰色</option>
    <option value="black"></option>
    <option value="green"></option>
    <option value="yellowgreen">黄緑</option>
    <option value="#ffffcc">淡い黄色</option>
    <option value="#c08080">暗い赤</option>
    <option value="pink">ピンク</option>
  </select><br>
  文字色:
  <select onChange="changefgcolor(this.value);">
    <option value="white"></option>
    <option value="#e0e0e0">12.5%灰色</option>
    <option value="#c0c0c0">25%灰色</option>
    <option value="#a0a0a0">37.5%灰色</option>
    <option value="#808080">50%灰色</option>
    <option value="#404040">75%灰色</option>
    <option value="black" selected></option>
    <option value="green"></option>
    <option value="#ffff55">黄色</option>
    <option value="#ff5555"></option>
    <option value="darkred">暗い赤</option>
    <option value="#5555ff"></option>
    <option value="darkblue">暗い青</option>
  </select>
</form>

value属性の値にHTMLでの色名を指定します。option要素の内容にはプルダウンメニューに表示される文字を指定します。
selected」と付いている部分が、最初から選択されている項目になります。

他の色を追加したい場合は、

<option value="#123456">表示する文字</option>

のような感じで、select要素(<select>~</select>)内に、いくつでも追加記述できます。

おわりに

今回は、閲覧者自身が背景色と文字色を選択できるようにする方法をご紹介致しました。
ぜひ、ご活用下さい。

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
  • 前のページへ
  • 1
  • 2
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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