MAJIDEKA.COM－背景色

● ２時限目 ●



[背景画像] or [★ HTML講座 ★] or [改行]

[背景色]

　背景色を変更するには

　ラジオボタン選択で背景色を変更するには

　セレクトボックス選択で背景色を変更するには

・<body>タグにbgcolor属性を指定する方法(<body bgcolor="～">)

　背景色を変更するには、<body>タグにbgcolor属性を指定します。
　色の指定は#XXXXXXまたは色の名前を記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<body bgcolor="#00ffff">
　ブラウザにはこのように表示されます。

・スタイルシートを使用して背景色を変更する方法

背景色を変更するには、スタイルシートを使用します。
　色の指定は#XXXXXXまたは色の名前を記入してください。
　例えば、テキストエディタに下記のような記述を<head>～</head>の間にしてから、ブラウザで確認してください。
　　<style type="text/css">  </style>
　ブラウザにはこのように表示されます。

ラジオボタン選択で背景色を変更するには

・<input>タグにtype属性にradioを指定しonclick属性を指定する方法

　ラジオボタン選択で背景色を変更するには、<input>タグにonclick属性を指定します。
　bgColor='～'の～には#XXXXXXまたは色の名前を記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <input type="radio" name="col" onclick="document.bgColor='#ff00ff'">fuchsia <input type="radio" name="col" onclick="document.bgColor='#808000'">olive <input type="radio" name="col" onclick="document.bgColor='#000080'">navy <input type="radio" name="col" onclick="document.bgColor='#0000ff'">blue <input type="radio" name="col" onclick="document.bgColor='#008080'">teal <input type="radio" name="col" onclick="document.bgColor='#008000'">green <input type="radio" name="col" onclick="document.bgColor='#00ff00'">lime <input type="radio" name="col" onclick="document.bgColor='#ffff00'">yellow </form>
　ブラウザにはこのように表示されます。

▲ページトップへ

セレクトボックス選択で背景色を変更するには

・<select>タグにonchange属性を指定する方法

　セレクトボックス選択で背景色を変更するには、<input>にonclick属性を指定します。
　value="～"の～には#XXXXXXまたは色の名前を記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <select onchange="document.bgColor=this.options[this.selectedIndex].value"> <option value="#ff00ff">fuchsia <option value="#808000">olive <option value="#000080">navy <option value="#0000ff">blue <option value="#008080">teal <option value="#008000">green <option value="#00ff00">lime <option value="#ffff00">yellow </select> </form>
　ブラウザにはこのように表示されます。

ボタンクリックで背景色を変更するには

・<input>タグにtype属性にbuttonを指定しonclick属性を指定する方法

　ボタンクリックで背景色を変更するには、<input>タグにonclick属性を指定します。
　value="～"の～にはボタン内に表示する文字を記述してください。
　bgColor='～'の～には#XXXXXXまたは色の名前を記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <input type="button" value="fuchsia" onclick="document.bgColor='#ff00ff'"> <input type="button" value="olive" onclick="document.bgColor='#808000'"> <input type="button" value="navy" onclick="document.bgColor='#000080'"> <input type="button" value="blue" onclick="document.bgColor='#0000ff'"> <input type="button" value="teal" onclick="document.bgColor='#008080'"> <input type="button" value="green" onclick="document.bgColor='#008000'"> <input type="button" value="lime" onclick="document.bgColor='#00ff00'"> <input type="button" value="yellow" onclick="document.bgColor='#ffff00'"> </form>
　ブラウザにはこのように表示されます。

▲ページトップへ

曜日別に背景色を表示するには

・JavaScriptを使用して曜日別に背景色を表示する方法

曜日別に背景色を表示するには、JavaScriptを使用します。
　wbg[0]から順に日曜日～土曜日となっています。
　wbg[n]="～"の～には#XXXXXXまたは色の名前を記入してください。
　例えば、テキストエディタに下記のような記述を<body>～</body>の間にしてから、ブラウザで確認してください。
　　<script type="text/javascript">  </script>
　ブラウザにはこのように表示されます。

ランダムに背景色を表示するには

・JavaScriptを使用してランダムに背景色を表示する方法

ランダムに背景色を表示するには、JavaScriptを使用します。
　色の指定は#XXXXXXまたは色の名前を記入してください。
　index=Math.floor(n*Math.random());のnには、指定した色の数を記入してください。
　例えば、テキストエディタに下記のような記述を<body>～</body>の間にしてから、ブラウザで確認してください。
　下記の例では、色の指定を故意に統一してませんが本来は統一した方がよいでしょう。
　　<script type="text/javascript">  </script>
　ブラウザにはこのように表示されます。

▲ページトップへ

Copyright (c) 2006～ MAJIDEKA.COM. All Rights Reserved.