閲覧者に色を自由に変更させる方法
それでは、実現方法のご紹介です。
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>）内に、いくつでも追加記述できます。
おわりに
今回は、閲覧者自身が背景色と文字色を選択できるようにする方法をご紹介致しました。
ぜひ、ご活用下さい。
