ホーム >>> HTML整理ノート

background-color　背景色の設定

要素の背景色を設定。
子タグに継承しない（ただし、既定値が「透過」なので見かけ上継承されている）

書式＜background-color:(値)＞
　(値)
　　(color値)　･･･色名やRGB値など（「HTML整理ノート」参照）
　　transparent　･･･（初期値）透明。即ち親要素の背景が透けて見える。

Sample

このページ全体に<body style="background-color:lightcyan">が設定しています。

ブロック要素だけでなくインライン要素にも背景色を設定できるようです。

　　　 　　　
表全体に#ffffff 背景色:#ffff00背景色:#99cc66
行全体に 背景色:#d3d3d3ここだけ透明に
  • リスト１
  • リスト２
Scriptプロパティ＜backgroundColor＞
色を します

Sample Source......................................................................>>>

<script language="JavaScript"><!--
function ColorChange(){    
　c = document.form1.col.value;   //選択ﾘｽﾄから選択された色を取得
　if(c=="??"){    
　　　window.alert("色が選択されてません。選択してください。");  
　}else{
　　　by.style.backgroundColor = c;
　}
}
//--></script>

<body id="by" style="background-color:lightcyan">

<p style="background-color:#ffcccc;margin:3mm">ブロック要素だけでなく
　　<b style="background-color:#ffffff">インライン要素</b>にも
　　<span style="background-color:#99ff33">背景色</span>を設定できるようです</p>
<hr style="width:200px;height:10px;background-color:#d8bfd8">
<table border="1" style="background-color:#ffffff">
　<tbody>
    <tr>
      <td>表全体に#ffffff</td>
      <td style="background-color:#ffff00">背景色:#ffff00</td>
　　　<td style="background-color:#99cc66">背景色:#99cc66</td>
    </tr>
    <tr style="background-color:#d3d3d3">
      <td>行全体に</td>
      <td>背景色:#d3d3d3</td>
　　　<td style="background-color:transparent">ここだけ透明に</td>
    </tr>
　</tbody>
</table>
<ul style="background-color:#ffffff">
  <li style="background-color:#99cc66">リスト１
  <li>リスト２
</ul>

<form name="form1">
　<select name="col">    
 　　<option value="??" selected>(色を選択)</option>    
 　　<option value="white">白</option>    
 　　<option value="black">黒</option>    
 　　<option value="gray">灰</option>    
 　　<option value="red">赤</option>    
 　　<option value="green">緑</option>    
 　　<option value="blue">青</option>    
 　　<option value="yellow">黄</option>    
 　　<option value="pink">ピンク</option>  
　</select>  色を  
　<input type="button" name="bt" value="ページの背景色に適用"
　　　　 onClick="ColorChange()">  します
</form>