HTML&CSS

【CSS】背景色を指定するbackground-colorプロパティの使い方

【CSS】背景色を指定するbackground-colorプロパティ

背景色を指定するプロパティはbackground-colorです。

色の指定の方法はcolorプロパティと同様で「#ff0000;」のように16進数のカラーコードで色を指定しますが、主要な色であれば、redなどのように指定することができます。

 css
h1{
	background-color: #ff0000;
}

また、「#dddddd」のように同じ値が続く場合は、「#ddd」と省略できます。

 css
p{
	background-color: #ddd;
}

【CSS】背景色を指定するbackground-colorプロパティの使い方

background-colorは画面全体だけではなく、要素の色を指定できるので、様々な使い方ができます。

WEBサイト全体の印象に影響を与える「ヘッダー、メインコンテンツ、フッター」のい配色は特に重要です。

ヘッダーを黒(black)、メインコンテンツを白(white)、フッターをグレー(gray)にした場合の記述です。

 css
header {
	background-color: #000000;  /* 背景色指定 */
	border-bottom:  solid 1px;  /* 枠線指定 */
	padding:  10px;             /* 余白指定 */
}
main {
	background-color: #ffffff;  /* 背景色指定 */
	padding:  20px;             /* 余白指定 */
	height:  300px;             /* 高さ指定 */
}
footer {
	background-color: #808080;  /* 背景色指定 */
	border-top: solid 1px;      /* 枠線指定 */
	padding:  10px;             /* 余白指定 */
}







-HTML&CSS

© 2021 Issy9174 official web site