中年おっちゃんでも出来たウェブページ作成講座 with ? mark

widthプロパティは、ブロック要素の表示幅を指定します。

値 (value)	長さ	幅や高さの単位参照。マイナスは指定出来ません。
	％	親要素の横幅から計算。
	auto	自動
	inherit	親要素からの継承
適用要素	THEAD、TBODY、TFOOT、TR要素を除くブロック要素と display プロパティで block/ inline-block 指定された要素。
初期値	auto
継承	しません

min-widthプロパティ

min-widthプロパティは、ブロック要素の最小表示幅を指定します。

値 (value)	長さ	幅や高さの単位参照。マイナスは指定出来ません。
	％	親要素の横幅から計算。
	inherit	親要素からの継承
適用要素	THEAD、TBODY、TFOOT、TR要素を除くブロック要素と display プロパティで block/ inline-block 指定された要素。
初期値	0
継承	しません

max-widthプロパティは、ブロック要素の最大表示幅を指定します

値 (value)	長さ	幅や高さの単位参照。マイナスは指定出来ません。
	％	親要素の横幅から計算。
	none	親要素の表示可能横幅
	inherit	親要素からの継承
適用要素	THEAD、TBODY、TFOOT、TR要素を除くブロック要素と display プロパティで block/ inline-block 指定された要素。
初期値	none
継承	しません

XXXX はスタイルシート記述です。

XXXX はHTML記述です。

XXXX 背景色と内枠線は修飾対象要素の範囲です。

XXXX 背景色と外枠線は親要素です。

width指定無しの表示を

とします。

スタイルシート記述

.wd50

{

width

50%

;

}

HTML記述

<p class="wd50">とりなくこゑすゆめさませみよあけわたるひんかしをそらいろはえておきつへにほふねむれゐぬもやのうち</p>

表示例

とりなくこゑすゆめさませみよあけわたるひんかしをそらいろはえておきつへにほふねむれゐぬもやのうち

スタイルシート記述

.mnwd20	{	min-width	:	20em	;	}
.mxwd30	{	max-width	:	30em	;	}

HTML記述

表示例

	表示幅が３０em です
	ブラウザの表示幅を狭めて行き、表示幅が２０em 以下になると、表示幅は変化せず、横方向のスライドバーが現れ、表示幅２０em が確保されます。