Html-backgrounds
提供:Dev Guides
HTML-背景
デフォルトでは、ウェブページの背景は白色です。 気に入らないかもしれませんが、心配はありません。 HTMLでは、次の2つの方法でWebページの背景を装飾できます。
- 色付きのHTML背景
- 画像を含むHTML背景
次に、適切な例を使用して、両方のアプローチを1つずつ見てみましょう。
色付きのHTML背景
*bgcolor* 属性は、HTML要素の背景、特にページの本文と表の背景を制御するために使用されます。
'_注-HTML5で廃止された_bgcolor_属性。 この属性は使用しないでください。_
HTMLタグでbgcolor属性を使用する構文は次のとおりです。
<tagname bgcolor = "color_value"...>
このcolor_valueは、次の形式のいずれかで与えることができます-
<!-- Format 1 - Use color name -->
<table bgcolor = "lime" >
<!-- Format 2 - Use hex value -->
<table bgcolor = "#f1f1f1" >
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(0,0,120)" >
例
HTMLタグの背景を設定する例を次に示します-
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Colors</title>
</head>
<body>
<!-- Format 1 - Use color name -->
<table bgcolor = "yellow" width = "100%">
<tr>
<td>
This background is yellow
</td>
</tr>
</table>
<!-- Format 2 - Use hex value -->
<table bgcolor = "#6666FF" width = "100%">
<tr>
<td>
This background is sky blue
</td>
</tr>
</table>
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(255,0,255)" width = "100%">
<tr>
<td>
This background is green
</td>
</tr>
</table>
</body>
</html>
これは、次の結果を生成します-
画像付きのHTML背景
*background* 属性を使用して、HTML要素の背景、特にページ本文と表の背景を制御することもできます。 画像を指定して、HTMLページまたは表の背景を設定できます。
'_注-HTML5で廃止された_background_属性。 この属性は使用しないでください。_
以下は、HTMLタグでbackground属性を使用する構文です。
'_注意-_background_属性は非推奨です。背景設定にはスタイルシートを使用することをお勧めします。_
<tagname background = "Image URL"...>
最も頻繁に使用される画像形式は、JPEG、GIF、およびPNG画像です。
例
以下は、テーブルの背景画像を設定する例です。
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>
<!-- Set table background -->
<table background = "/images/html.gif" width = "100%" height = "100">
<tr><td>
This background is filled up with HTML image.
</td></tr>
</table>
</body>
</html>
これは、次の結果を生成します-
パターン化された透明な背景
さまざまなWebサイトで多くのパターンまたは透明な背景を見たことがあります。 これは、バックグラウンドでパターン画像または透明画像を使用することで簡単に実現できます。
パターンや透明なGIFまたはPNG画像を作成するときは、読み込みが遅くならないように、1x1の最小サイズでも使用することをお勧めします。
例
ここにテーブルの背景パターンを設定する例があります-
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>
<!-- Set a table background using pattern -->
<table background = "/images/pattern1.gif" width = "100%" height = "100">
<tr>
<td>
This background is filled up with a pattern image.
</td>
</tr>
</table>
<!-- Another example on table background using pattern -->
<table background = "/images/pattern2.gif" width = "100%" height = "100">
<tr>
<td>
This background is filled up with a pattern image.
</td>
</tr>
</table>
</body>
</html>
これは、次の結果を生成します-