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

PDF形式でダウンロード
PDF形式でダウンロード

この記事では、HTMLを編集してWebページの背景色を変更する方法を紹介します。

方法 1
方法 1 の 4:
HTMLを編集する準備をする

  1. 2609629 1 2というタイトルの画像
    1
    使用する背景色を決める　HTMLでは色をカラーコードで指定します。使用する色のカラーコードは、「W3Schools」という無料のHTMLカラーピッカーで調べることができます。
    • パソコンのブラウザでhttps://www.w3schools.com/colors/colors_picker.aspにアクセスします。
    • 「Pick a Color（色を選ぶ）」で、使用する基本色をクリックします。
    • 画面右側で色調を選択します。
    • 色調の右側に表示される数値コードをメモに控えます。
  2. 2609629 2 2というタイトルの画像
    2
    任意のテキストエディタでHTMLファイルを開く　<bgcolor>というHTML属性は、HTML5でサポートが終了しました。背景色を含むページのスタイル情報は、すべてCSSで処理する必要があります。[1]
    • Windowsの場合は「Notepad++」や「メモ帳」、Macの場合は「テキストエディット」や「BBEdit」で編集することができます。
  3. 2609629 3 2というタイトルの画像
    3
    HTMLヘッダを文書に挿入する　背景色を含むページのスタイル情報は、すべて<style></style>タグの間に記述する必要があります。 
      <!DOCTYPE html>
<html>
<head>
<style>
</style> 
</head>
</html>
  4. 2609629 4 2というタイトルの画像
    4
    styleタグの間に空行を作る　<style>タグと</style>タグの間に情報を挿入できる空行を作りましょう。
  5. 2609629 5 2というタイトルの画像
    5
    body要素を指定する　<style></style>タグの間に以下のように記述します。 
      body { 
}
    • CSSでbody要素に指定したものは、ページ全体に適用されます。
    • グラデーションを作成したい場合は、このステップをスキップしましょう。
    広告

方法 2
方法 2 の 4:
単色の背景色を指定する

  1. 2609629 6 2というタイトルの画像
    1
    文書のHTMLヘッダを探す　文書の上部にあるはずです。
  2. 2609629 7 2というタイトルの画像
    2
    body要素にbackground-colorプロパティを指定する　body要素のセレクタ内にbackground-color:と記述します。これで、以下のようなbody要素が出来上がるはずです。 
      body {
    background-color: 
}
    • この文脈では、「color」の綴りは1つしか使用できず、「colour」は使用できません。
  3. 2609629 8 3というタイトルの画像
    3
    background-colorプロパティに任意の背景色を指定する　選択した色の数値コードとセミコロンを「background-color:」要素に続いて記述しましょう。例えば、ページの背景をピンクにするには、以下のように記述します。 
      body {
    background-color: #d24dff;
}
  4. 2609629 9 2というタイトルの画像
    4
    スタイル情報を確認する　この時点で、HTML文書のヘッダは以下のようになっているはずです。 
      <!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #d24dff
}
</style>
</head>
</html>
  5. 2609629 10 2というタイトルの画像
    5
    background-colorで他の要素の背景色を指定する　body要素の背景色を指定したように、background-colorを使って見出しや段落などの他の要素の背景色を指定することも可能です。例えば、大見出し（<p>）や段落（<h1>）の背景色を指定するには、以下のようなコードを記述します。[2] 
      <!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: #93B874;
}
h1 {
    background-color: #00b33c;
}
p {
    background-color: #FFFFFF);
}
</style>
</head>
<body>
<h1>背景が緑色の見出し</h1>
<p>背景が白色の段落</p>
</body>
</html>
    広告

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

  1. 2609629 11 2というタイトルの画像
    1
    文書のHTMLヘッダを探す　文書の上部にあるはずです。
  2. 2609629 12 2というタイトルの画像
    2
    このステップの基本構文を理解する　グラデーションを作成する際に必要な情報は、開始位置または角度、およびグラデーションで変化する色の2つです。また、複数の色を指定して、その色でグラデーションが変化するようにしたり、グラデーションの方向や角度を指定したりすることもできます。[3] 
      background: linear-gradient(direction/angle, color1, color2, color3, etc.);
  3. 2609629 13 2というタイトルの画像
    3
    垂直方向のグラデーションを作成する　グラデーションの方向を指定しない場合、グラデーションは上から下に向かって変化します。グラデーションを作成するには、<style></style>タグの間に以下のコードを挿入します。 
      html {
    min-height: 100%; 
}
body {
    background: -webkit-linear-gradient(#93B874, #C9DCB9); 
    background: -o-linear-gradient(#93B874, #C9DCB9); 
    background: -moz-linear-gradient(#93B874, #C9DCB9); 
    background: linear-gradient(#93B874, #C9DCB9); 
    background-color: #93B874; 
}
    • ブラウザによってgradient関数の実装が異なるため、コードは数種類記述する必要があります。
  4. 2609629 14 2というタイトルの画像
    4
    グラデーションの方向を指定する　垂直方向以外のグラデーションを作成したい場合は、グラデーションの方向を指定して、色が変化する方向を変えることができます。グラデーションの方向を指定するには、<style></style>タグの間に以下のように記述します。[4] 
      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; 
}
    • グラデーションの方向は、leftプロパティとrightプロパティで変えることができます。
  5. 2609629 15 2というタイトルの画像
    5
    他のプロパティでグラデーションを調整する　グラデーションでできることは他にもたくさんあります。
    • 例えば、複数の色を指定できるだけでなく、それぞれの色の後にパーセンテージを記述して、各色の間隔を指定することもできます。これを用いたグラデーションのサンプルコードは以下の通りです。 
      background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
  6. 6
    色の透明度を指定する　透明度を指定した色は薄くなります。同じ色を使用することで、その色はだんだん薄くなり、最後には無色になるわけです。ただし、色の透明度を指定するには、rgba()関数で色を定義する必要があります。また、透明度は終了値によって決まります。0は完全な透明、1は完全な不透明です。 
      background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1));
  7. 2609629 16 2というタイトルの画像
    7
    完成したコードを確認する　Webサイトの背景にカラーグラデーションを施すコードは以下のようになります。 
      <!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>
    広告

方法 4
方法 4 の 4:
色が移り変わる背景を作成する

  1. 2609629 17 2というタイトルの画像
    1
    文書のHTMLヘッダを探す　文書の上部にあるはずです。
  2. 2609629 18 2というタイトルの画像
    2
    body要素にanimationプロパティを指定する　body要素のセレクタ内に以下のように記述します。[5] 
          -webkit-animation: colorchange 60s infinite; 
    animation: colorchange 60s infinite;
    • 上のコードはChromiumベースのブラウザ用、下のコードはその他のブラウザ用です。
  3. 2609629 19 2というタイトルの画像
    3
    移り変わる背景色を指定する　次に、移り変わる背景色とそれぞれの色が背景色になる時間の長さを@keyframes規則で指定します。ただし、ここでもブラウザごとに別のコードが必要です。body要素の下に以下のコードを入力しましょう。[6] 
      @-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;}
}
    • この2つの規則（@-webkit-keyframesと@keyframes）は背景色とパーセンテージが同じなので注意が必要です。どのブラウザでも同じように表示されるように、これらを統一しておきましょう。
    • パーセンテージ（0%、25%など）は、背景色が移り変わるアニメーション全体の長さ（60s）に対するものです。ページが読み込まれると、背景は0%に指定した色（#33FFF3）になります。例えば、背景色が移り変わるアニメーションが60秒のうち25％再生されると、背景色は#7821Fに変わります。
    • 自分の好みの仕上がりになるように時間や色を変更してみましょう。
  4. 2609629 20 2というタイトルの画像
    4
    コードを確認する　色が移り変わる背景のコードは以下のようになるはずです。 
      <!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>
    広告

ポイント

  • 基本色をHTMLで記述したい場合は、HTMLカラーコードの代わりに、色名をハッシュ記号（#）なしで記述しましょう。例えば、背景をオレンジ色にしたい場合は、background-color: orange;と記述します。
  • また、HTMLでWebサイトの背景に画像を指定するすることも可能です。
広告

注意事項

  • Webサイトに変更を加えた場合は、公開前に必ずテストを行いましょう。
広告

関連記事

USBメモリーに音楽を入れる
 
USBメモリーに音楽を入れる
Spotifyの再生時間を確認する
 
Spotifyの再生時間を確認する
HPでスクリーンショットを撮る
 
HPでスクリーンショットを撮る
Facebookグループの管理者を確認するメンバー以外の人がFacebookグループの管理者を確認する方法
Instagramアカウントのロックを解除する
 
Instagramアカウントのロックを解除する
Windows PCでコマンドプロンプトからexeを実行する
 
Windows PCでコマンドプロンプトからexeを実行する
Nintendo SwitchをDiscordに配信する
 
Nintendo SwitchをDiscordに配信する
iPhoneでApple IDの主電話番号を変更する
 
iPhoneでApple IDの主電話番号を変更する
マウスの代わりにキーボードでクリックする
 
マウスの代わりにキーボードでクリックする
充電器なしでノートパソコンのバッテリーを充電する充電器を忘れたときに代用してノートパソコンを充電する方法4選
ノートパソコンのカメラで写真を撮る
 
ノートパソコンのカメラで写真を撮る
Webページの画面をコピーする
 
Webページの画面をコピーする
パソコン上で開いているすべてのウィンドウを一覧する
 
パソコン上で開いているすべてのウィンドウを一覧する
液晶モニターを修理する
 
液晶モニターを修理する
広告

出典

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

このwikiHow記事について

wikiHow編集チーム
共著者 ::
wikiHow編集チーム
wikiHowスタッフライター
この記事は、経験豊富なwikiHowの編集者と調査員から成るチームによって執筆されています。調査員チームは内容の正確性と網羅性を確認しています。

wikiHowのコンテンツ管理チームは、編集チームが編集した記事を細心の注意を払って精査し、すべての記事がwikiHowの高品質基準を満たしているかどうかを確認しています。 この記事は32,447回アクセスされました。
カテゴリ: コンピューター
他言語版
このページは 32,447 回アクセスされました。

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

広告