HTML背景色チュートリアル–コード例で説明されているDiv背景色を変更する方法

Web開発者として行う必要がある最も一般的なことの1つは、HTML要素の背景色を変更することです。ただし、CSSbackground-colorプロパティの使用方法を理解していないと、混乱する可能性があります。

記事では、

  • HTML要素のデフォルトの背景色の値
  • 非常に一般的な要素であるdivの背景色を変更する方法
  • CSSボックスモデルのどの部分がbackground-colorプロパティの影響を受けるか、および
  • このプロパティが取ることができるさまざまな値。

要素のデフォルトの背景色

divのデフォルトの背景色はtransparentです。したがって、divの背景色を指定しない場合、その親要素の背景色が表示されます。

Divの背景色の変更

この例では、次のdivの背景色を変更します。

 I love HTML I love CSS I love JavaScript 

スタイリングなしで、これは視覚的に次のように変換されます。

クラスにスタイルを追加して、divの背景色を変更してみましょう。HTMLファイルの例を試してみてください。

 .div-1 { background-color: #EBEBEB; } .div-2 { background-color: #ABBAEA; } .div-3 { background-color: #FBD603; } I love HTML I love CSS I love JavaScript 

これにより、次のようになります。

涼しい!このdivの背景色を正常に変更しました。次に、このプロパティについて詳しく見ていきましょう。background-colorプロパティがCSSボックスモデルの一部にどのように影響するかを見てみましょう。

背景色とCSSボックスモデル

CSSボックスモデルによると、すべてのHTML要素は長方形のボックスとしてモデル化できます。下の図に示すように、すべてのボックスは4つの部分で構成されています。

ボックスモデルに慣れていない場合は、ボックスモデルを確認できます。問題は、divの背景色を変更すると、ボックスモデルのどの部分が影響を受けるかということです。簡単な答えは、パディング領域とコンテンツ領域です。例を使ってこれを確認しましょう。

  body { background-color: #ABBAEA; } div { height: 200px; margin: 20px; border: 5px solid; background-color: #FBD603; } 

This is the parent div which contains the div we are testing

This example shows that changing the background color of a div does not affect the border and margin of the div.

これにより、次のようになります。

上記の例から、余白領域と境界領域は背景色の変更の影響を受けないことがわかります。border-colorプロパティを使用して、境界線の色を変更できます。マージン領域は透明のままで、親コンテナの背景色を反映します。

最後に、background-colorプロパティが取ることができる値について説明しましょう。

背景色の値

colorプロパティと同様に、background-colorプロパティは6つの異なる値を取ることができます。例を挙げて、最も一般的な3つの値について考えてみましょう。この例では、divの背景色をさまざまな値で赤に設定しています。

 /* Keyword value/name of color */ .div-1 { background-color: red; } /* Hexadecimal value */ .div-2 { background-color: #FF0000; } /* RGB value */ .div-3 { background-color: rgb(255,0,0); } 

The background property can take six different values.

The background property can take six different values.

The background property can take six different values.

それらはすべて同じ背景色になることに注意してください。

background-colorプロパティが取ることができる他の値には、HSL値、特別なキーワード値、およびグローバル値が含まれます。それぞれの例を次に示します。

/* HSL value */ background-color: hsl(0, 100%, 25%; /* Special keyword values */ background-color: currentcolor; background-color: transparent; /* Global values */ background-color: inherit; background-color: initial; background-color: unset; 

これらの各値の詳細については、こちらをご覧ください。

追記

要素の背景色を設定するときは、背景色とそれに含まれるテキストの色のコントラスト比が十分に高いことを確認することが重要です。これは、視力の弱い人がテキストを簡単に読めるようにするためです。

これらの2つのdivを検討してください。

The contrast between the background color of the first div and the color of the text is not high enough for everyone to see. So unless you are the only one using the website you are building and you have very good eyesight, you should avoid such color combinations.

The second div has a much better contrast ratio between the background color and the color of the text . Thus, it is more accessible and clearer for people to read.

Conclusion

In this article, we saw how you can change the background-color of a div. We also discussed which parts of the CSS box model are affected by the change in background-color. Finally, we discussed the values the background-color property can take.

I hope you found this article useful. Thanks for reading.