ウェブサイトに背景を追加する方法

背景はウェブサイトの最も重要な要素の 1 つです。適切な背景は、Web サイトの雰囲気を設定し、Web サイトのコンテンツを補完します。背景を追加する方法はいろいろありますが、それぞれ目的が異なります。いくつかの方法では、Web サイトのすべてのページに背景を追加できますが、他の方法では、特定のページの背景のみを設定できます。このwikiHowでは、HTMLまたはCSSを使用してWebサイトに背景を追加する方法を説明します。

方法1方法1/2:

HTML方式

単色の背景

1単色の背景は、Web サイトに配置できる最も基本的な背景です。事実上すべての Web サイトは、デフォルトの白い背景から始まります。ただし、調和のとれた配色の白い背景は洗練されてすっきりと見えますが、テーマによっては他の色の背景の方が適している場合があります。
2Webページのソースコードを開きます。広告する

body タグに bgcolor 属性を追加します。 body タグは次のようになります: <body bgcolor="COLORNAME">ここで、COLORNAME は色の名前です。 COLORNAME には、複数の種類の色表現を入力できます。

1
- <body bgcolor="red"> (色名)
- <body bgcolor="#FF0000"> (16進数値)
- <body bgcolor="rgb(255, 8, 9)"> (RGB値)
2さまざまな色を生成できる RGB を試してみましょう。最初は簡単な色から始めて、難しい色に進んでください。ただし、Ultramarine Blue Green を入力すると白が生成されることを覚えておいてください。広告する

背景画像を追加する

背景画像を追加するのは、単色の背景を追加するよりも少し複雑です。

body タグに背景属性を追加します。次のように表示されます: <body background="SRC">ここで、SRC はソースイメージです。 src は同じフォルダー、別のフォルダー、または別のページに配置できます。

1
- <body background="red.gif"> (同じフォルダ内)
- <body background="\Folder1\red.gif"> (別のフォルダ内)
- <body background="imagepage1/red.gif"> (異なるウェブページ上)
2..gif/.jpeg/.bmp 拡張子を忘れずに入力してください。広告する

方法2方法2/2:

CSS メソッド

単色の背景

1CSS で単色の背景を追加するには、スタイル属性を追加します。 ID とクラスを指定したり、内部スタイルシートと外部スタイルシートの両方を使用したりすることもできます。
2 body タグは次のようになります。
- <body style="background-color: COLORNAME;">
  COLORNAME は色の名前、16 進数値、または RGB です (HTML の単色背景の最後のいくつかの手順もここで適用されることに注意してください)。
広告する

写真を追加

1画像を追加するには、bodyタグにスタイル属性を追加します。 ID とクラスを指定したり、内部スタイルシートと外部スタイルシートの両方を使用したりすることもできます。
2 body タグは次のようになります。
- <body style="background-image:url('SRC'); ">
3 SRC はソースイメージであることに注意してください。 src は同じフォルダー、別のフォルダー、または別のページに配置できます。
- <body style="background-image:red.gif;"> (同じフォルダ内)
- <body style="background-image:\Folder1\red.gif"> (別のフォルダ内)
- <body style="background-image:imagepage1/red.gif"> (異なるウェブページ上)
4拡張子を忘れずに追加してください。広告する

繰り返しパターンの背景

繰り返しパターンの背景を作成するには、上記のように背景を追加します。ここで、body タグを次のように変更する必要があります: <body style="background-image: url('SRC'); background-repeat:REPEAT-SETTINGS; ">ここで、REPEAT-SETTINGS は設定です。次のような重複した設定が多数存在する可能性があります。

1
- <body style="background-image: red.gif; background-repeat: repeat;"> (背景は垂直方向と水平方向に繰り返されます。)
- <body style="background-image: red.gif; background-repeat: repeat-x;"> (背景は水平方向に繰り返されます。)
- <body style="background-image: red.gif; background-repeat: repeat-y;"> (背景は垂直方向に繰り返されます。)

画像の背景を修正

1固定画像の背景は見た目がかっこよく、ページを下にスクロールしても変化しません。これを行うには、上記のコードにいくつかの簡単な調整を加えるだけです。 body タグを次のようにします。
- <body style="background-image:url('SRC'); background-attachment:fixed; background-position:POSITION; background-repeat:REPEAT SETTINGS;">
  SRC は背景画像のソース、POSITION は画像の位置 (中央から右上隅までの範囲) です。背景アタッチメントは、このタイプの背景の主な「触媒」です。背景の位置を示すために使用するもので、変更しないことをお勧めします。
広告する