cman.jp > WEBページ作成TOP > CSSリファレンス > 「背景色の設定」
WEBページ作成
広告
background-color 「背景色の設定」
background-color プロパティは背景色の設定を行うことができます。背景色以外もまとめて背景を指定する場合は、backgroundを使用します。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 2.1 (※ 3.0で拡張) | 全て | しない |
広告
background-color の値
【構文】
background-color:[color] ;
| color [背景色の指定] | |
|---|---|
| background: #rrggbb; | 16進数RGB指定 [例] #00ffff、#660033 (色作成) |
| background: カラー名; | カラー名指定 [例] red、bule (一覧) |
| background: rgb(r, g, b); | 10進数RGB指定 [例] rgb(0,255,255) (色作成) |
| background: rgba(r, g, b, a); | 透明度付きRGB指定 [例] rgba(0,255,255,0.5) (色作成) ※ CSS3の機能 |
| background: hsl(h, l%, s%); | HSL指定 [例] hsl(10,50%,90%) (色作成) |
| background: hsla(h, l%, s%, a); | 透明度付きHSL指定 [例] hsla(0,30%,25%,0.5) (色作成) ※ CSS3の機能 |
| background: transparent; | 透明（無色） |
background-color のサンプル
1.背景色の指定
<html>
<head>
<title>背景色サンプル</title>
<style type="text/css">
body { background: #abe1fa; } /* 全体:淡青色 */
h1 { background: rgb(236,0,140); } /* 見出し1：紅紫色 */
th.s1-1 { background: #fff450; } /* 見出しセル1:檸檬色 */
th.s1-2 { background: rgb(255,244,80); } /* 見出しセル2:檸檬色 */
td.s1-1 { background: #9dd29c; } /* セル1:若緑 */
td.s1-2 { background: transparent; } /* セル2:透過 */
td.s2-1 { background: rgba(255,0,0,0.0); } /* 透過1:赤(透過率0.0) */
td.s2-2 { background: rgba(255,0,0,0.2); } /* 透過2:赤(透過率0.2) */
td.s2-3 { background: rgba(255,0,0,0.4); } /* 透過3:赤(透過率0.4) */
td.s2-4 { background: rgba(255,0,0,0.6); } /* 透過4:赤(透過率0.6) */
td.s2-5 { background: rgba(255,0,0,0.8); } /* 透過5:赤(透過率0.8) */
td.s2-6 { background: rgba(255,0,0,1.0); } /* 透過6:赤(透過率1.0) */
</style>
</head>
<body>
<h1>見出し１（紅紫色）</h1>
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th class="s1-1">見出しセル１（檸檬色）</th>
<th class="s1-2">見出しセル２（檸檬色）</th>
</tr>
<tr>
<td class="s1-1">セル１（若緑）</td>
<td class="s1-2">セル２（透過）</td>
</tr>
</table>
<br>
<span style="font-size:14pt;" >透過サンプル（CSS3 RGBA対応ブラウザのみ）</span>
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<td class="s2-1">透過1<br>(透過率 0.0)</td>
<td class="s2-2">透過2<br>(透過率 0.2)</td>
<td class="s2-3">透過3<br>(透過率 0.4)</td>
<td class="s2-4">透過4<br>(透過率 0.6)</td>
<td class="s2-5">透過5<br>(透過率 0.8)</td>
<td class="s2-6">透過6<br>(透過率 1.0)</td>
</tr>
</table>
</body>
</html>
ページTOP
| 関連するCSS(STYLE) | |
|---|---|
| background | 背景全般の設定 |
| background-attachment | 背景画像のスクロール |
| background-blend-mode | 背景をブレンド |
| background-clip | 背景画像の表示エリア |
| background-image | 背景画像の設定 |
| background-origin | 背景画像の表示位置の基点 |
| background-position | 背景画像の表示位置の設定 |
| background-repeat | 背景画像の繰返し設定 |
| background-size | 背景画像の表示サイズ設定 |
| border-bottom-color | 罫線の底辺の色設定 |
| border-color | 罫線の色設定 |
| border-left-color | 罫線の左辺の色設定 |
| border-right-color | 罫線の右辺の色設定 |
| border-top-color | 罫線の上辺の色設定 |
| color | 文字の色 |
| column-rule-color | マルチカラムの区切り線の色 |
| opacity | 透明度 |
| outline-color | アウトラインの色 |
| text-decoration-color | 文字の装飾線の色を指定 |
| text-emphasis-color | 圏点の色を指定 |
広告