背景・文字色の変更
| <html> <head> </head> <body text="black" bgcolor="white"> <center> <hr>背景色チェンジボタン<hr> <br>ボタンをクリックして背景色を変えてみましょう<br> <form name="form1"> <input type="button" value=" 赤 " onclick="document.bgColor='red';document.fgColor='white'"> <input type="button" value=" 青 " onclick="document.bgColor='blue';document.fgColor='white'"> <input type="button" value=" 緑 " onclick="document.bgColor='green';document.fgColor='white'"> <input type="button" value=" 黄 " onclick="document.bgColor='yellow';document.fgColor='black'"> <input type="button" value=" 黒 " onclick="document.bgColor='black';document.fgColor='white'"> <input type="button" value=" 白 " onclick="document.bgColor='white';document.fgColor='black'"> <input type="button" value="シアン" onclick="document.bgColor='cyan';document.fgColor='black'"> <br> </form> </center> </body> </html> |
| 【解説】 ここは色に注目します。 まず、bodyタグで文字色(text)、背景(bgcolor)を設定しています。 そして、formタグにはそれぞれの色をボタンに割り振ってあります。 それぞれのボタンの機能には、 document.bgColor 背景色の設定 document.fgColor 文字色の設定（大文字に注意） bgColor=のあとは色の名前をはめ込みます。必ず ' をはさみましょう。 カラーコードで入力するときも同様です。 【カラーコードについて】 １６進数が６つ並んでいますが、それぞれ２つずつが光の３原色に対応していて、 最初の２文字が赤、真ん中の２文字が緑、最後の２文字が青です。 それぞれ00（暗）〜FF（明）まで２５６段階、約１６７７万色の組み合わせがあります。 それをいちいち覚える必要はないので、ペイントソフトで抽出したり、 段階的に変えてみて試行錯誤するといいでしょう。 言い忘れましたが先頭には＃がつきます。 |
| <html> <head> </head> <body bgcolor="#000000"> <center> <font color="red"> <hr>ランプのオン・オフ<hr> </font> <font color="white"><br>あれ、部屋が暗いぞ。ランプをつけよう。<bg></font> <font color="black"><br>やぁ、ついたついた。やっぱり電気を消そう<bg></font> <br><br> <form name="form1"> <input type="button" value="ランプをつける" onclick="document.bgColor='white'"> <input type="button" value="ランプを消す" onclick="document.bgColor='black'"> </form> <br> </center> </body> </html> |
| 【解説】 これは応用編です。 まずからくりについて。 「あれ、部屋が･･･」は白い字で描かれています。 ｢ついたついた・・・」は黒い字で描かれています。 この２つはボタンを押しても変化しません。つまり、両方ともあらかじ めあって、背景になじませることによって見えたり、見えなかったり しています。 そして、「ランプをつける｣に背景を白くする機能を、 「ランプを消す」に背景を黒くする機能をつけておけばいいのです。 あとは前の問題を参照すれば楽勝かな？ |