HTML-背景

デフォルトでは、Webページの背景の色は白です。気に入らないかもしれませんが、心配はいりません。HTMLは、Webページの背景を装飾するための次の2つの優れた方法を提供します。

色付きのHTML背景
画像とHTMLの背景

次に、適切な例を使用して、両方のアプローチを1つずつ見ていきましょう。

色付きのHTMLの背景

ザ・ bgcolor 属性は、HTML要素の背景、特にページ本体とテーブルの背景を制御するために使用されます。

Note- BGCOLORの属性はHTML5で廃止予定。この属性は使用しないでください。

以下は、任意の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ページまたはテーブルの背景を設定できます。

Note-バックグラウンドの属性はHTML5で廃止予定。この属性は使用しないでください。

以下は、任意のHTMLタグでbackground属性を使用するための構文です。

Note− 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>

これにより、次の結果が生成されます-