boxサイズbox背景色の指定 box背景画像の指定box背景の一括指定 ボックスcss ﾘﾌｧﾚﾝｽ へ
(ボックスサイズ) ＊ ＊ 次へ 最後へ
ボックスの大きさを指定する(CSS)
width: *px; height: *px;
　width と height は、全てのタグ（要素）に適用できます。ただし、width は非置換インライン要素、tr要素、thead要素、tfoot要素、tbody要素には適用できません。また、height は非置換インライン要素、colgroup要素、col要素には適用できません。
　width は横幅を、height は高さを指定するプロパティです。
　このプロパティを使用すると、ボックスの大きさを指定できます。
　div { width: 80%; height: 100px; }
プロパティ名値説　　明
width 数値＋単位（px 等）
or パーセント		 ボックスの横幅を指定（初期値は auto）
height ボックスの高さを指定（初期値は auto）
　★ 使用例とブラウザでの表示 (b1-1)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .b1-1div { width: 50%; height: 30px; backGround-color: lightpink; }
.b1-1p { width: 50%; backGround-color: lightsalmon; float: right; }
使　用　例   ブラウザの表示
<div class=b1-1div>横幅50%×高さ30px</div>
横幅50%×高さ30px
<p class=b1-1p>横幅50%：右寄せ</p></div>

横幅50%：右寄せ



(ボックスサイズ) 先頭へ 前へ 次へ 最後へ
■ボックスの最大幅と最小幅を指定する
max-width: *px; min-width: *px;
　このプロパティは、全てのタグ（要素）に適用できます。ただし、非置換インライン要素、表関連要素には適用できません。
　max-width は最大幅を、min-width は最小幅を指定するプロパティです。
　このプロパティを使用することで、ボックスの幅を特定の範囲内に収めることができます。
　div { max-width: 500px; min-width: 200px; }
プロパティ名値説　　明
max-width 数値＋単位（px 等）
or パーセント		 最大の幅を指定（初期値は none）
min-width 最小の幅を指定
＊ max-width の初期値は none（制限なし）です。
Internet Exp.7 では、表示モードが「標準モード」の場合のみ機能するようです。（Internet Exp.6 以前では未対応）
　★ 使用例とブラウザでの表示 (b1-2)スタイルシートの書き方（基本）は、こちら です。
設定例 ： div { max-width: 600px; min-width: 500px; backGround-color: #f0f4f8; }
使　用　例   ブラウザの表示
<div>最小幅 500px 〜 最大幅 600px</div> ここをクリックするとサンプルページを表示します
※ サンプルページは、最大幅を 600px、最小幅を 500px に指定しています。この場合、通常の幅は600pxですが、ブラウザの幅を600pxより狭くすると、それに合わせてボックスの幅も狭くなります。
更にブラウザの幅を狭くしていくと、500pxより狭くなった時点で横スクロールが入ります。
※ Internet Exp.7 は、表示モードが「標準モード」の場合のみ機能するようです（Internet Exp.6 以前は未対応）。
(ボックスサイズ) 先頭へ 前へ ＊ ＊
■ボックスの最大高さと最小高さを指定する
max-height: *px; min-height: *px;
　このプロパティは、全てのタグ（要素）に適用できます。ただし、非置換インライン要素、表関連要素には適用できません。
　max-height は最大高さを、min-height は最小高さを指定するプロパティです。
　このプロパティを使用することで、ボックスの高さを特定の範囲内に収めることができます。
　div { max-height: 400px; min-height: 350px; }
プロパティ名値説　　明
max-height 数値＋単位（px 等）
or パーセント		最大の高さを指定（初期値は none）
min-height 最小の高さを指定（初期値は 0）
＊ max-height の初期値は none（制限なし）、min-height の初期値は 0 です。
Internet Exp.7 は、表示モードが「標準モード」の場合のみ機能するようです（Internet Exp.6 以前は未対応）。
　★ 使用例とブラウザでの表示 (b1-3)スタイルシートの書き方（基本）は、こちら です。
設定例 ： div { max-height: 400px; min-height: 350px; height: 100%;
backGround-color: lightgreen; }
使　用　例   ブラウザの表示
<div>最小高さ 350px 〜 最大高さ 400px </div> ここをクリックするとサンプルページを表示します
※ サンプルページは、最大高さを 400px、最小高さを 350px に指定しています。この場合、通常の高さは400pxですが、ブラウザの高さを400pxより狭くすると、それに合わせてボックスの高さも狭くなります。
更にブラウザの高さを狭くしていくと、350pxより狭くなった時点でスクロールが入ります。
※ Internet Exp.7 は、表示モードが「標準モード」の場合のみ機能するようです（Internet Exp.6 以前は未対応）。
boxサイズbox背景色の指定 box背景画像の指定box背景の一括指定 ボックスcss ﾘﾌｧﾚﾝｽ へ
ボックスの背景色を指定する(CSS)
backGround-color: #ffffff;
　このプロパティは、全てのタグ（要素）に適用できます。
　backGround-color は、背景色を指定するプロパティです。
　div { backGround-color:#c0c0c0; }
プロパティ名値説　　明
backGround-color カラーコード or カラーネーム 背景色を指定（初期値は transparent）
※ 色の指定は、カラーコード（#ffffff,#fff,rgb(255,0,0)）または、カラーネーム（red,blue）で行います。詳細は、「カラーネーム」のページをご覧下さい。カラーネームのページへ
　次のように transparent を指定すると、「透明（透過）」を指定したことになります。
backGround-color: transparent;
背景色を指定する場合は、文字色も同時に指定します（背景色だけを指定すると、ユーザーの環境によっては文字が見づらくなるため）。指定方法の詳細は「関連ページ」をご覧下さい。
　★ 使用例とブラウザでの表示 (b1-4)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .b1-4div { backGround-color: #85b9e9; color: black; }
.b1-4exam1 { backGround-color: #ffe8c0; color: orange }
.b1-4exam2 { backGround-color: #bde9ba; color: teal }
使　用　例   ブラウザの表示
背景色なし。<br>
<div class=b1-4div>水色の背景です。</div>
<span class=b1-4exam1>これはオレンジです。</span>
<span class=b1-4exam2>これは青緑です。</span>		 背景色なし。
水色の背景です。
これはオレンジです。
これは青緑です。
関連するページ
CSS スタイルシート文字色指定：文字色を指定する
HTML タグページ 背景色と文字色：ページの背景色と文字色を指定する
HTML タグページ 文字ｻｲｽﾞと色の指定：文字のサイズと色を指定する
Utilety Page (参考)カラーコード：「カラーネーム と カラーコード」へ
boxサイズbox背景色の指定 box背景画像の指定box背景の一括指定 ボックスcss ﾘﾌｧﾚﾝｽ へ
(ボックス背景画像) ＊ ＊ 次へ 最後へ
ボックスの背景に画像を使う(CSS)
backGround-image: url(URI);
　このプロパティは、全てのタグ（要素）に適用できます。
　backGround-image は、背景画像を指定するプロパティです。
　div { backGround-image:url(back.gif); }
プロパティ名値説　　明
backGround-image url(URI) 表示する画像ファイルを指定（初期値は none）
　【画像の指定方法】
　url( ) … ( ) 内に画像のURIを指定します。
backGround-image: url(back.gif);
　次のように none を指定すると、「画像なし」を指定したことになります。
backGround-image: none;
背景画像を表示できないユーザーのために、同時に背景色を指定しておきましょう（背景画像が表示されない場合でも、文字が判別できるようにするため）。指定方法の詳細は「関連するページ」をご覧下さい。
　★ 使用例とブラウザでの表示 (b1-5)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .b1-5div { backGround-image: url(sealS.gif); backGround-color: lightpink;
color: black; width: 268px; height: 70px; }
使　用　例   ブラウザの表示
<div class=b1-5div>背景画像の表示例</div>
背景画像の表示例

☆ 背景画像に透明化GIFを使用すると、同時に背景色も表示できます。
関連するページ
HTML タグページ ページの背景画像：ページの背景に画像を使う
(ボックス背景画像) 先頭へ 前へ 次へ 最後へ
■背景画像の並べ方を指定する
backGround-repeat: repeat-X;
　このプロパティは、全てのタグ（要素）に適用できます。
　backGround-repeat は、背景画像の並べ方を指定するプロパティです。
　div { backGround-repeat: repeat-X; backGround-image: url(back.gif); }
プロパティ名値説　　明
backGround-repeat repeat敷き詰める（初期値）
repeat-X水平方向に並べる
repeat-Y垂直方向に並べる
no-repeat１つだけ表示する
　★ 使用例とブラウザでの表示 (b1-6)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .b1-6div { width: 220px; height: 28px; backGround-color: honeydew;
border: 1px blue solid; backGround-image: url(ballRed.gif); margin-bottom: 5px; }
.b1-6exam1 { backGround-repeat: repeat; }
.b1-6exam2 { backGround-repeat: repeat-X; }
.b1-6exam3 { backGround-repeat: repeat-Y; }
.b1-6exam4 { backGround-repeat: no-repeat; }
使　用　例   ブラウザの表示
<div class=b1-6exam1>　敷き詰める</div>
　敷き詰める
<div class=b1-6exam2>　水平方向に並べる</div>
　水平方向に並べる
<div class=b1-6exam3>　垂直方向に並べる</div>
　垂直方向に並べる
<div class=b1-6exam4>　1つだけ表示する</div>
　1つだけ表示する
※ margin-bottom: 0.5em; は、ボックスの下側に余白を設定する働きをしています。
(ボックス背景画像) 先頭へ 前へ 次へ 最後へ
■背景画像の表示位置を指定する
backGround-position: left;
　このプロパティは、ブロックレベル要素、置換要素に適用できます。
　backGround-position は、背景画像の表示位置を指定するプロパティです。
　div { backGround-position: right bottom; backGround-image: url(back.gif);
backGround-repeat: repeat-X; }
プロパティ名値説　　明
backGround-position 表示位置 水平方向と垂直方向の位置を指定（初期値は 0% 0%）
　水平方向と垂直方向の位置は、以下のように指定します。
　【キーワードで指定する場合】
水平方向left … 左 center … 中央 right … 右
垂直方向top … 上 center … 中央 bottom … 下
　次のように、水平方向と垂直方向の位置を、半角スペースで区切ります。
backGround-position: right bottom; … 水平方向は右側、垂直方向は下側に表示
backGround-position: center center; … ブラウザの中央部に表示
　また、次のように１つの値で指定することもできます。この場合、省略した方の位置は中央になります。
backGround-position: right; … 水平方向は右側、垂直方向は中央部に表示
backGround-position: bottom; … 水平方向は中央部、垂直方向は下側に表示
backGround-position: center; … ブラウザの中央部に表示
　【長さ・パーセントで指定する場合】
水平方向左からの距離を、数値＋単位（px 等）またはパーセントで指定
垂直方向上からの距離を、数値＋単位（px 等）またはパーセントで指定
　次のように、左からの距離と上からの距離を、半角スペースで区切ります。
backGround-position: 100px 40px; … 左から100px、上から40pxの位置に表示
backGround-position: 30% 60%; … 左から30%、上から60%の位置に表示
　また、次のように水平方向だけで指定することもできます。この場合、垂直方向の位置は50%（中央）になります。
backGround-position: 100px; … 左から100px、上から50%の位置に表示
backGround-position: 50%; … 左から50%（中央）、上から50%（中央）の位置に表示
　★ 使用例とブラウザでの表示 (b1-7)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .b1-7div { width: 210px; height: 28px; backGround-color: cornsilk;
color: black; backGround-image: url(ballRed.gif); margin-bottom: 5px; }
.b1-7exam1 { backGround-position: center; backGround-repeat: no-repeat; }
.b1-7exam2 { backGround-position: bottom; backGround-repeat: repeat-X; }
.b1-7exam3 { backGround-position: right; backGround-repeat:repeat-Y; }
使　用　例   ブラウザの表示
<div class=b1-7exam1>　中央表示する</div>

<div class=b1-7exam2>　水平（下側）に並べる</div>

<div class=b1-7exam3>　垂直（右側）に並べる</div>
　中央表示する
　水平（下側）に並べる
　垂直（右側）に並べる
※ margin-bottom: 5px; は、ボックスの下側に余白を設定する働きをしています。
(ボックス背景画像) 先頭へ 前へ ＊ ＊
■背景画像をスクロールさせない
backGround-attachment: fixed;
　このプロパティは、全てのタグ（要素）に適用できます。
　backGround-attachment は、背景画像の固定表示を指定するプロパティです（ウィンドウに対する固定表示となります）。
　このスタイルを設定すると、ボックスの背景画像がスクロールしなくなります。
　div { backGround-attachment: fixed; backGround-image: url(back.gif);
width: 70%; height: 200px; overflow: auto; }
プロパティ名値説　　明
backGround-attachment scroll背景画像を固定しない - スクロールさせる（初期値）
fixed背景画像を固定する - スクロールさせない
　【fixedを指定する際の注意点】
　ボックスに対する固定表示ではなく、「ウィンドウに対する固定表示である」という点に注意して下さい。（ただし、Internet Exp.6 以前ではボックスに対する固定表示になってしまうようです）
　また、fixed を指定している場合は、「背景画像の表示位置」がウィンドウを基準とした位置になるので注意が必要です。 例えば、垂直に並ぶ画像を右側に配置した場合、それはボックス内の右側に配置されるのではなく、ウィンドウ内の右側に配置されることになります。 （状況によっては、ボックス内に背景画像が表示されなくなってしまいます）
html や body 以外の要素（例えば div タグ（要素）や p タグ（要素） 等）に対しては、fixed は指定しないことをお勧めします。
　★ 使用例とブラウザでの表示 (b1-8)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .b1-8div { backGround-image: url(sealS.gif); margin-bottom: 2px; }
.b1-8exam1 { backGround-attachment: fixed; backGround-color: wheat; }
.b1-8exam2 { backGround-attachment: scroll; }
使　用　例   ブラウザの表示
<DIV class="b1-8div">
<div class="b1-8exam1">
背景画像を固定する（fixed）
<div class="b1-8exam2">
背景画像を固定しない（scroll）<br>
＊ 背景画像は、薄い色で大柄な物を
使用して下さい。</div>
</div>
＊ スクロールバーを操作し、動きの違い
を確かめて下さい。
</DIV>
関連するページ
HTML タグページ インラインフレーム：インラインタイプのフレーム（i フレームの基本）
HTML タグページ インラインフレーム：インラインフレームを作る
boxサイズbox背景色の指定 box背景画像の指定box背景の一括指定 ボックスcss ﾘﾌｧﾚﾝｽ へ
ボックスの背景をまとめて指定する(CSS)
backGround : #ffffff ... ...;
　このプロパティは、全てのタグ（要素）に適用できます。
　backGround は、背景色や背景画像（並べ方、スクロール、位置）をまとめて指定するプロパティです。
　div { backGround: #ffffff url(back.gif) repeat-X left top fixed; }
プロパティ名値　および　説　明
backGround: #ffffff
背景色		 url(back.gif)
背景画像		 repeat-x
並べ方		 left top
表示位置		 fixed
固定表示		;
初期値transparentnone repeatcenterscroll 
＊ それぞれの値は、半角スペースで区切って記述します。
記述する順序は自由で、必要のない指定は省略できます。（省略した場合は初期値になります）
　★ 使用例とブラウザでの表示 (b1-9)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .b1-9div { backGround: mistyrose url(sealS.gif) repeat-X center scroll;
color: #000000; height: 165; width: 300; overflow: auto; }
使　用　例   ブラウザの表示
<div class=b1-9div>
背景色…mistyrose‖画像…sealS.gif<br>
並べ方…水平方向‖表示位置…中央部<br>
固定表示…スクロール‖はみ出し…自動<br>
<br><br><br>
背景画像は、薄い色のものを使用して下さい。
また、大柄な背景画像を使用すると落ち着い
た画面になります。
</div>
背景色…mistyrose‖画像…sealS.gif
並べ方…水平方向‖表示位置…中央部
固定表示…スクロール‖はみ出し…自動



背景画像は、薄い色のものを使用して下さい。また、大柄な背景画像を使用すると落ち着いた画面になります。
※ 「はみ出た部分」の表示について…この使用例は、<div>タグに height="" と width="" を指定しています。 このような場合､overflow も併せて使用し､表示領域から「はみ出た部分」の表示方法を設定します｡
通常は、"auto" を指定し、スクロールバーで画面を移動できるようにします。
関連するページ
CSS スタイルシートはみ出た部分の表示：ボックスからはみ出た部分の表示方法を指定する
boxサイズbox背景色の指定 box背景画像の指定box背景の一括指定 ボックスcss ﾘﾌｧﾚﾝｽ へ