HTML&CSS

【CSS】横幅を指定するwidthプロパティと高さを指定するheightプロパティの使い方

【CSS】横幅を指定するwidthプロパティと高さを指定するheightプロパティ

要素の高さを指定するプロパティはwidth、要素の横幅を指定するプロパティはheightです。

それぞれwidthプロパティ、heightプロパティは併用して使用されることが多いです。

横幅を指定するwidthプロパティ

横幅を指定する場合はwidthプロパティを使用しますが、横幅は「px」という単位を用います。

 css
h1{
	width: 500px;
}

高さを指定するheightプロパティ

高さを指定する場合はheightプロパティを使用しますが、widthプロパティと同様に高さは「px」という単位を用います。

 css
h1{
	height: 80px;
}

【CSS】横幅を指定するwidthプロパティと高さを指定するheightプロパティの使い方

横幅と高さはWEBサイト全体の印象に影響を与える重要な項目です。

あらゆる要素に適用できるため、使いどころは豊富ですが、ヘッダー、メインコンテンツ、フッターにそれぞれ横幅と高さを指定した場合の記述です。

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







-HTML&CSS

© 2021 Issy9174 official web site