HTMLで背景色を指定する方法

共同執筆者 wikiHow編集チーム | 出典

HTMLでウェブページの背景色を設定するのはさほど難しくありません。<style></style>タグ内の 「body」要素を変更するだけで色の変更ができます。背景をどのように表示させたいかによって、指定方法は少し異なります。ここではウェブサイトの背景を単色、画像、グラデーション、または複数色のアニメーションに設定する方法を説明します。

方法 1 の 4:
単色で背景色を設定する

  1. 2609629 1 1というタイトルの画像
    1
    テキストエディタでHTMLファイルを開く　HTML5では、「bgcolor」属性は既にサポートされていません。他のスタイルと同様、背景色の設定にはCSSを使用します。[1]
  2. 2609629 2 1というタイトルの画像
    2
    ファイルに<style></style>タグを追加する　背景色を含め、ページのスタイル情報はすべてこのタグの間で指定します。<style>タグが既に設定されている場合は、その部分に移動します。 
    <!DOCTYPE html>
<html>
<head>

<style>

</style>

</head>
</html>
  3. 2609629 3 1というタイトルの画像
    3
    「body」要素を<style></style> タグ内に入力する　CSSでは「body」要素についての定義は、ページ全体に適応されます。 
    <!DOCTYPE html>
<html>
<head>

<style>
body { 

}

</style>
</head>
<body>
</body>

</html>
  4. 2609629 4 1というタイトルの画像
    4
    「body」要素に「background-color」プロパティを追加する　スペルを間違わないように注意します。 
    <!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: 
}
</style>
</head>
<body>
</body>
</html>
  5. 2609629 5 1というタイトルの画像
    5
    背景色を「background-color」プロパティに追加する　色の指定には3種類の方法があります。色の英語名（green, blue, red等）、16進数コード（例えば黒の場合は＃000000、赤の場合は＃ff0000等）、またはRGB値（黄色はrgb（255,255,0）等）が使用できます。下記の例では、wikiHowのバナーと同じ色を16進数コードで指定しています。 
    <!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: #93B874;
}
</style>
</head>
<body>
</body>
</html>
    • 白: #FFFFFF
    • 淡いピンク: #FFCCE6
    • 深い橙色: #993300
    • インディゴ - #4B0082
    • すみれ色 - #EE82EE
    • 色の16進法コードについてはw3schools.com HTML カラーピッカーを参照します（ページが英語で表示される場合は、右上の地球のアイコンをクリックして日本語を選択します）。
  6. 2609629 6 1というタイトルの画像
    6
    「background-color」プロパティを使用して他の要素の背景色を指定する　「body」要素と同様に、他の要素の背景も「background-color」プロパティで設定できます。<style></style>の中に背景を設定したい要素を追加して、「background-color」プロパティを設定します。[2] 
    <!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: #93B874;
}
h1 {
    background-color: orange;
}
p {
    background-color: rgb(255,0,0);
}
</style>
</head>
<body>
<h1>このヘッダーの背景はオレンジ色です</h1>
<p>この段落の背景は赤です</p>
</body>
</html>
    広告

方法 2 の 4:
画像を背景として使う

  1. 2609629 7 1というタイトルの画像
    1
    テキストエディタでHTMLファイルを開く　背景に画像が使用されているウェブサイトも多く見かけます。パターン、テクスチャ、写真、その他の画像を追加すると、背景に風合いが出ます。HTML5では、背景色を含め、ページのスタイル情報はすべてCSSを使用して設定します。
  2. 2609629 8 1というタイトルの画像
    2
    HTMLファイルに<style></style>タグを追加する　背景色を含め、ページのスタイル情報はすべてこのタグの間で指定します。<style>タグが既に設定されている場合は、その部分に移動します。 
    <!DOCTYPE html>
<html>
<head>

<style>

</style>

</head>
</html>
  3. 2609629 9 1というタイトルの画像
    3
    「body」要素を><style> </ style>タグ内に入力する　CSSでは「body」要素についての定義は、ページ全体に適応されます。 
    <!DOCTYPE html>
<html>
<head>

<style>
body { 

}

</style>
</head>
<body>
</body>

</html>
  4. 2609629 10 1というタイトルの画像
    4
    「body」要素に「background-image」プロパティを追加する　このプロパティを追加する場合には、画像のファイル名が必要です。画像ファイルが編集しているHTMLファイルと同じフォルダに保存されていることを確認します（そうでない場合は、ディレクトリを含めたフルパスでWebサーバー上の画像ファイルの保存場所を入力します）。[3] 
    <!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("画像名.png");
    background-color: #93B874;
}
</style>
</head>
<body>
</body>
</html>
    • 背景画像が正常に読み込まれない場合に備えて、background-colorプロパティも追加しておきましょう。
  5. 2609629 11 1というタイトルの画像
    5
    複数の画像を重ねる　複数の画像を重ね合わせて表示することもできます。重ねると味わいが増す透過素材を使いたい場合に役に立ちます。 
    <!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("画像1.png"), url("画像2.gif");
    background-color: #93B874;
}
</style>
</head>
<body>
</body>
</html>
    • 最初に入力する画像が上に表示され、二番目の画像が背後に重なります。
    広告

方法 3 の 4:
背景をグラデーションにする

  1. 2609629 12というタイトルの画像
    1
    CSSを使って背景にグラデーションをかける　単色よりも洗練された印象で、カラフルなアニメーションより目立ち過ぎない背景が欲しい時には、背景にグラデーションをつける方法を試してみましょう。グラデーションとは、色が徐々に他の色に変化していく描画方法のことです。CSSを使用してグラデーションのカスタマイズができます。グラデーションの方法を学ぶ前にCSSを使用したスタイル設定の基本を復習しておきましょう。
  2. 2609629 13というタイトルの画像
    2
    グラデーションを指定する　グラデーションをかけるには、2つの情報が必要です。「開始点もしくは角度」及び、「何色から何色に変化させるか」です。色は3色以上を指定することも可能です。また、グラデーションの方向あるいは角度を設定することも可能です。[4] 
    background: linear-gradient(方向あるいは角度, 色1, 色2, 色3, etc.);
  3. 2609629 14というタイトルの画像
    3
    縦方向のグラデーションをかける　方向を指定しないとグラデーションは上から下に移り変わります。ブラウザによってグラデーションの指定の仕方が少し異なるため、数種類の指定を入力する必要があります。 
    <!DOCTYPE html>
<html>
<head>
<style>
html {
    min-height: 100%; /* ページ全体にグラデーションを適用させます。 */
}

body {
    background: -webkit-linear-gradient(#93B874, #C9DCB9); /* Chrome 10+, Safari 5.1+に対応 */
    background: -o-linear-gradient(#93B874, #C9DCB9); /* Opera 11.1+に対応 */
    background: -moz-linear-gradient(#93B874, #C9DCB9); /* Firefox 3.6+に対応 */
    background: linear-gradient(#93B874, #C9DCB9); /* 標準構文（一番最後に指定する） */
    background-color: #93B874; /* グラデーションが読み込まれない場合に備えて背景色を設定しておきます */
}
</style>
</head>
<body>
</body>
</html>
  4. 2609629 15というタイトルの画像
    4
    グラデーションの方向を指定する　方向を追加すると、色が変化する向きを変更することができます。ブラウザによって方向の指定方法は異なりますが、効果は同じです。[5] 
    <!DOCTYPE html>
<html>
<head>
<style>
html {
    min-height: 100%;
}

body {
    background: -webkit-linear-gradient(left, #93B874, #C9DCB9); /* 左から右方向 */
    background: -o-linear-gradient(right, #93B874, #C9DCB9); /* 右で終了 */
    background: -moz-linear-gradient(right, #93B874, #C9DCB9); /* 右で終了 */
    background: linear-gradient(to right, #93B874, #C9DCB9); /* 右方向 */
    background-color: #93B874; /* グラデーションが読み込まれない場合に備えて背景色を設定しておきます */
}
</style>
</head>
<body>
</body>
</html>
  5. 2609629 16というタイトルの画像
    5
    他のプロパティを使ってグラデーションを調整する　グラデーションにはその他様々なニュアンスをつけることができます。
    • 例えば、複数の色を追加したり、それぞれの色の後にパーセントを入力して、各色の幅を自由に指定することも可能です。 
      background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
    • 透過グラデーションをかけ、色が次第に消えていく効果をつけることもできます。1つの色に対して有色から無色まで任意の指定が可能です。rgba()関数を利用して色の指定を行います。最初の3つのプロパティは指定したい色のRGB値、最後の1つは透過度となります。透過度は0が完全な不透明、1が完全な透明です。 
      background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1));
    広告

方法 4 の 4:
色が変化する背景を設定する

  1. 2609629 17というタイトルの画像
    1
    HTMLコードの<style>部分に移動する　単色の背景ではもの足りない場合は、少しずつ色が変わっていくアニメーション背景を試してみましょう。HTML 5では、背景色の定義はCSS（カスケードスタイルシート）で行います。CSSでの背景色の設定の経験がない場合は、この方法を試す前に、上記の「単色で背景色を設定する」方法を理解しておきましょう。
  2. 2609629 18というタイトルの画像
    2
    「animation」プロパティを「body」要素に追加する　ブラウザによって設定方法が違うため、2種類のプロパティを追加する必要があります。 [6]
    <!DOCTYPE html>
<html>
<head>
<style>
body {
    -webkit-animation: colorchange 60s infinite; 
    animation: colorchange 60s infinite;
    }
</style>
</head>
<body>
</body>
</html>
    • -webkit-animationは、Chromiumベースのブラウザ（Chrome、Opera、Safari）対応のプロパティです。animationは、その他のブラウザに対応しています。
    • この例のcolorchangeがアニメーションの設定部分です。
    • 60sは色が変化するアニメーションの長さ（60秒）の指定です。Webkitと標準構文の両方に設定を追加します。
    • infiniteを使うとアニメーションが永遠に繰り返されます。一度だけループさせた後、背景を最終色のままにしたい場合は、この部分は指定しません。
  3. 2609629 19というタイトルの画像
    3
    アニメーションに色を追加する　@keyframesルールを使用して、ループさせる背景色と、それぞれの色が表示される時間を設定します。この場合もブラウザの種類毎に別個の設定を入力する必要があります。[7] 
    <!DOCTYPE html>
<html>
<head>
<style>

body {
    -webkit-animation: colorchange 60s infinite; 
    animation: colorchange 60s infinite;
}


@-webkit-keyframes colorchange {

     0%  {background: #33FFF3;}
    25%  {background: #78281F;}
    50%  {background: #117A65;}
    75%  {background: #DC7633;}
    100% {background: #9B59B6;}
}


@keyframes colorchange {
     0%  {background: #33FFF3;}
    25%  {background: #78281F;}
    50%  {background: #117A65;}
    75%  {background: #DC7633;}
    100% {background: #9B59B6;}
}   

</style>
</head>
<body>
</body>
</html>
    • (@-webkit-keyframesと@keyframesの2つのルールには同じ背景色とパーセントを指定するように注意します。異なるブラウザでも一貫した形式で表示されるようにします。
    • (0%, 25%, etc)のパーセント値はアニメーション時間全体(60s)の割合になります。ページが読み込まれると、背景は0% (#33FFF3)で指定した色で表示されます。アニメーションが60秒の25％再生されると、背景は#78281Fに変わります。それ以降も同様に、指定された時間が経過すると色が変化します。
    • 上記の例を参考にして、あなたのウェブページにふさわしいアニメーションを設定してみましょう。
    広告

関連記事

Googleに問い合わせをする

How to

Googleに問い合わせをする
画像検索で簡単に人物を特定する

How to

画像検索で簡単に人物を特定する
トレントのダウンロード速度を上げる

How to

トレントのダウンロード速度を上げる
画像のURLを取得する

How to

画像のURLを取得する
ページリダイレクトをブロックする

How to

ページリダイレクトをブロックする
2台のルーターを接続する

How to

2台のルーターを接続する
Googleドキュメントを保存する

How to

Googleドキュメントを保存する
ダウンロード速度を上げる

How to

ダウンロード速度を上げる
閲覧履歴を確認する

How to

閲覧履歴を確認する
Firefoxでウェブサイトをブロックする

How to

Firefoxでウェブサイトをブロックする
YouTubeをブロックする

How to

YouTubeをブロックする
携帯電話を使ってノートパソコンをインターネットに接続する

How to

携帯電話を使ってノートパソコンをインターネットに接続する
YouTube動画の年齢制限を回避する

How to

YouTube動画の年齢制限を回避する
Chrome上でのダウンロード履歴を確認する

How to

Chrome上でのダウンロード履歴を確認する
広告

出典

  1. ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
  2. ↑ http://www.w3schools.com/css/css_background.asp
  3. ↑ http://www.w3schools.com/cssref/pr_background-image.asp
  4. ↑ https://css-tricks.com/css3-gradients/
  5. ↑ http://www.w3schools.com/css/css3_gradients.asp
  6. ↑ https://codepen.io/metagrapher/pen/tgcLl
  7. ↑ http://www.w3schools.com/css/css3_animations.asp

このwikiHow記事について

共著：
wikiHowスタッフ編集者
この記事は、経験豊富なwikiHowの編集者と調査員から成るチームによって執筆されています。調査員チームは内容の正確性と網羅性を確認しています。
カテゴリ: インターネット | パソコン・電子機器
他言語版
このページは 19,814 回アクセスされました。

この記事は役に立ちましたか？

広告