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>

これは、次の結果を生成します-

Html-backgrounds

HTML-背景

色付きのHTML背景

例

画像付きのHTML背景

例

パターン化された透明な背景

例

目次