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

PDF形式でダウンロード

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

方法 1

方法 1 の 4:

HTMLを編集する準備をする

PDF形式でダウンロード

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

方法 2

方法 2 の 4:

単色の背景色を指定する

PDF形式でダウンロード

文書の上部にあるはずです。
2
body要素にbackground-colorプロパティを指定する　body要素のセレクタ内にbackground-color:と記述します。これで、以下のようなbody要素が出来上がるはずです。
- この文脈では、「color」の綴りは1つしか使用できず、「colour」は使用できません。
3
background-colorプロパティに任意の背景色を指定する　選択した色の数値コードとセミコロンを「background-color:」要素に続いて記述しましょう。例えば、ページの背景をピンクにするには、以下のように記述します。
4
スタイル情報を確認する　この時点で、HTML文書のヘッダは以下のようになっているはずです。
5
background-colorで他の要素の背景色を指定する　body要素の背景色を指定したように、background-colorを使って見出しや段落などの他の要素の背景色を指定することも可能です。例えば、大見出し（<p>）や段落（<h1>）の背景色を指定するには、以下のようなコードを記述します。^{[2]X出典文献}
広告

方法 3

方法 3 の 4:

グラデーション背景を作成する

PDF形式でダウンロード

文書の上部にあるはずです。
2
このステップの基本構文を理解する　グラデーションを作成する際に必要な情報は、開始位置または角度、およびグラデーションで変化する色の2つです。また、複数の色を指定して、その色でグラデーションが変化するようにしたり、グラデーションの方向や角度を指定したりすることもできます。^{[3]X出典文献}
3
垂直方向のグラデーションを作成する　グラデーションの方向を指定しない場合、グラデーションは上から下に向かって変化します。グラデーションを作成するには、<style></style>タグの間に以下のコードを挿入します。
- ブラウザによってgradient関数の実装が異なるため、コードは数種類記述する必要があります。
4
グラデーションの方向を指定する　垂直方向以外のグラデーションを作成したい場合は、グラデーションの方向を指定して、色が変化する方向を変えることができます。グラデーションの方向を指定するには、<style></style>タグの間に以下のように記述します。^{[4]X出典文献}
- グラデーションの方向は、leftプロパティとrightプロパティで変えることができます。
5
他のプロパティでグラデーションを調整する　グラデーションでできることは他にもたくさんあります。
- 例えば、複数の色を指定できるだけでなく、それぞれの色の後にパーセンテージを記述して、各色の間隔を指定することもできます。これを用いたグラデーションのサンプルコードは以下の通りです。
  background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
6
色の透明度を指定する　透明度を指定した色は薄くなります。同じ色を使用することで、その色はだんだん薄くなり、最後には無色になるわけです。ただし、色の透明度を指定するには、rgba()関数で色を定義する必要があります。また、透明度は終了値によって決まります。0は完全な透明、1は完全な不透明です。

Webサイトの背景にカラーグラデーションを施すコードは以下のようになります。

<!DOCTYPE html><html><head><style>html {    min-height: 100%;} body {    background: -webkit-linear-gradient(left, #216fdb, #C9DCB9);     background: -o-linear-gradient(right, #216fdb, #C9DCB9);    background: -moz-linear-gradient(right, #216fdb, #C9DCB9);     background: linear-gradient(to right, #216fdb, #C9DCB9);     background-color: #216fdb; }</style></head><body></body></html>

方法 4

方法 4 の 4:

色が移り変わる背景を作成する

PDF形式でダウンロード

文書の上部にあるはずです。
2
body要素にanimationプロパティを指定する　body要素のセレクタ内に以下のように記述します。^{[5]X出典文献}
- 上のコードはChromiumベースのブラウザ用、下のコードはその他のブラウザ用です。
3
移り変わる背景色を指定する　次に、移り変わる背景色とそれぞれの色が背景色になる時間の長さを@keyframes規則で指定します。ただし、ここでもブラウザごとに別のコードが必要です。body要素の下に以下のコードを入力しましょう。^{[6]X出典文献}
- この2つの規則（@-webkit-keyframesと@keyframes）は背景色とパーセンテージが同じなので注意が必要です。どのブラウザでも同じように表示されるように、これらを統一しておきましょう。
- パーセンテージ（0%、25%など）は、背景色が移り変わるアニメーション全体の長さ（60s）に対するものです。ページが読み込まれると、背景は0%に指定した色（#33FFF3）になります。例えば、背景色が移り変わるアニメーションが60秒のうち25％再生されると、背景色は#7821Fに変わります。
- 自分の好みの仕上がりになるように時間や色を変更してみましょう。

色が移り変わる背景のコードは以下のようになるはずです。

<!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>