Home > ★Lesson⇒ menu  ★html_Lesson⇒  01Spell Lesson > 02sample  ★css_Lesson⇒  01Spell Lesson№1 > 02Spell Lesson№2 > 03sample 

●CSSのサンプル例→ > №01 > №02 > №03 > №04 > №05 > №06 > №00 > END

01css_box(ボックス)

01css_box(ボックス)

01width

widthプロパティは、ボックスサイズの横幅を指定します。
入力した文字列は、指定した幅に達すると自動的に折り返されます。
適用要素：すべての要素（置換要素以外のインライン要素とtr要素、thead要素、tbody要素tfoot要素を除く）

値 解説
実数値+単位 ボックスの横幅を数値（px等の単位をつけて）で設定
%値 ボックスの横幅を親ボックスの幅に対する割合で設定
auto ボックスの横幅をブラウザに依存して設定（初期値）
※CSS 

.box {
	width: 300px;
	height: 100px;
	background-color:#00ccff;
}

※HTML
<div class="box">横幅300px/高さ100px</div>
※★sample
★①横幅300px/高さ100px
★②01widthサンプル

▲Ｔｏｐ

02max-width

max-widthプロパティは、ボックスサイズの横幅の最大値を指定します。
親ボックスの横幅より大きな値を設定した場合は、親ボックスで入力した横幅が優先されます。文字列は、指定した幅に達すると自動的に折り返されます。
※IE6以前のブラウザは未対応です。
適用要素：すべての要素（置換要素以外のインライン要素とtr要素、thead要素、tbody要素、tfoot要素を除く）

値 解説
実数値+単位 ボックスの最大横幅を実数値（px等の単位をつけて）で設定
%値 ボックスの最大横幅を親ボックスの幅に対する割合で設定
none 最大値の制限なし。（初期値）
※CSS 

.box1 {
	max-width: 300px;
	height: 100px;
}

※HTML
<div class="box1">最大幅300px/高さ100px</div>
※★sample
★①最大幅300px/高さ100px
★②02max-width

▲Ｔｏｐ

03vendor-prefix

vendor-prefix

css3を使ってみる上でまず知っておきたいことは、モダンブラウザでは少しづつcss3が使えるようになってきていますが現時点ではいまだ草案段階なので先行実装という意味の「vendor-prefix」という識別子がcss3を使う上で必要になります。

vendor-prefixはブラウザごとに異なり現在4つのprefixがあります。

ブラウザ prefix
safari,chrome -webkit-
firefox -moz-
opera -o-
internet explorer -ms-

書き方はvendor-prefixごとに同じプロパティをそれぞれ記述します。
prefixは概ねプロパティに付けますが値に付けることもありますのでご注意ください。

※CSS 

例
.box {
	-moz-border-radius: 5px;/*Safari,Chrome*/
	-webkit-border-radius: 5px;/*Firefox*/
	border-radius: 5px;/*Opera,IE*/
	behavior: url(/PIE.htc);
}
※HTML
※★sample
★①03vendor-prefix

▲Ｔｏｐ

04min-width

min-widthプロパティは、ボックスサイズの横幅の最小値を指定します。
親ボックスの横幅より大きな値を設定した場合は、親ボックスで入力した横幅が優先されます。文字列は、指定した幅に達すると自動的に折り返されます。
※IE6以前のブラウザは未対応です。
適用要素：すべての要素（置換要素以外のインライン要素ととtr要素、thead要素、tbody要素、tfoot要素を除く）

値 解説
実数値+単位 ボックスの最小横幅を実数値（px等の単位をつけて）で設定（初期値は0）
%値 ボックスの最小横幅を親ボックスの幅に対する割合で設定
※CSS 

.box2 {
	min-width: 300px;
	height: 100px;
	background-color:#ffccff;
}
※HTML
<div class="box2">最小幅300px/高さ100px</div>
※★sample
★①最小幅300px/高さ100px
★②04min-widthサンプル

▲Ｔｏｐ

05height

heightプロパティは、ボックスサイズの高さを指定します。
入力した文字列が、指定した高さ以上の長さになった場合は、指定したボックスをはみ出して表示されます。高さが確定しておらず可変にしたい場合は、100%を指定するかもしくは、未指定にします。
適用要素：すべての要素（置換要素以外のインライン要素とcol要素、colgroup要素を除く）

値 解説
実数値+単位 ボックスの高さを実数値（px等の単位をつけて）で設定
%値 ボックスの高さを親ボックスの幅に対する割合で設定
auto ボックスの高さをブラウザに依存して設定（初期値）
※CSS 

.box3 {
	width: 300px;
	height: 100px;
	background-color:#f2ccff;
}
※HTML
<div class="box3">横幅300px/高さ100px</div>
※★sample
★①横幅300px/高さ100px
★②05heightサンプル

▲Ｔｏｐ

06max-height

max-heightプロパティは、ボックスサイズの高さの最大値を指定します。
親ボックスの高さより大きな値を設定した場合は、親ボックスで入力した高さが優先されます。入力した文字列が、 指定した高さ以上の長さになった場合は、指定したボックスをはみ出して表示されます。高さが確定しておらず 可変にしたい場合は、100%を指定するかもしくは、未指定にします。
※IE6以前のブラウザは未対応です。
適用要素：すべての要素（置換要素以外のインライン要素とcol要素、colgroup要素を除く）

値 解説
実数値+単位 ボックスの最大高さを実数値（px等の単位をつけて）で設定
%値 ボックスの最大高さを親ボックスの幅に対する割合で設定
none 最大値の制限なし。（初期値）
※CSS 

.box4 {
	width: 300px;
	max-height: 100px;
	background-color:#ffccc5;
}
※HTML
<div class="box4">幅300px/最大高さ100px</div>
※★sample
★①幅300px/最大高さ100px
★②06max-heightサンプル

▲Ｔｏｐ

07min-height

min-heightプロパティは、ボックスサイズの高さの最小値を指定します。
親ボックスの高さより大きな値を設定した場合は、親ボックスで入力した高さが優先されます。 入力した文字列が、指定した高さ以上の長さになった場合は、指定したボックスをはみ出して表示されます。 高さが確定しておらず可変にしたい場合は、100%を指定するかもしくは、未指定にします。
※IE6以前のブラウザは未対応です。
適用要素：すべての要素（置換要素以外のインライン要素とcol要素、colgroup要素を除く）

値 解説
実数値 ボックスの最小高さを実数値（px等の単位をつけて）で設定（初期値は0）
%値 ボックスの最小高さを親ボックスの幅に対する割合で設定
※CSS 

.box5 {

	width: 300px;
	min-height: 100px;
	background-color:#fcccff;
}
※HTML
<div class="box5">幅300px/最小高さ100px</div>
※★sample
★①幅300px/最小高さ100px
★②07min-heightサンプル

▲Ｔｏｐ

08margin

marginプロパティは、ボックスと隣接する他のボックスのマージン（間隔）を設定します。
4辺まとめて設定する方法と、個々に設定する方法があります。
適用要素：すべての要素（tr要素、th要素、td要素、thead要素、tbody要素、tfoot要素、col要素、colgroup要素を除く）

値 解説
実数値+単位 マージンを実数値（px等の単位をつけて）で設定
%値 マージンを親ボックスの幅に対する割合で設定
auto 自動設定
※CSS 

指定方法
    margin: 10px;（上下左右）
    margin: 10px 20px;（上下）（左右）
    margin: 10px 20px 10px;（上）（左右）（下）
    margin: 10px 20px 10px 20px;（上）（右）（下）（左）
    0の場合単位はなくても可。autoの指定もできます。

    個別に指定
    margin-top: 数値+単位;（上）
    margin-right: 数値+単位;（右）
    margin-bottom: 数値+単位;（下）
    margin-left: 数値+単位;（左）
    0の場合単位はなくても可。autoの指定もできます。


.box61 {
	margin: 10px;
}
.box62 {
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}
※HTML
<div class="box61">BOX1（上10px、右10px、下10px、左10px）</div>
<div class="box62">BOX2（上10px、右10px、下10px、左10px）</div>
※★sample
★①
BOX1（上10px、右10px、下10px、左10px）
BOX2（上10px、右10px、下10px、左10px）
*BOX1もBOX2も画面での表示のされ方は同じ。
★②08marginサンプル

▲Ｔｏｐ

09padding

paddingプロパティは、ボックスの枠線と文字列（内容）の間隔を設定します。 4辺まとめて設定する方法と、個々に設定する方法があります。 適用要素：すべての要素（tr要素、thead要素、tbody要素、tfoot要素col要素、colgroup要素を除く）

値 解説
実数値+単位 パディングを実数値（px等の単位をつけて）で設定
%値 パディングを親ボックスの幅に対する割合で設定
※CSS 


※指定方法
  padding: 10px;（上下左右）
  padding: 10px 20px;（上下）（左右）
  padding: 10px 20px 10px;（上）（左右）（下）
  padding: 10px 20px 10px 20px;（上）（右）（下）（左）
※個別に指定
  padding-top: 数値+単位;（上）
  padding-right: 数値+単位;（右）
  padding-bottom: 数値+単位;（下）
  padding-left: 数値+単位;（左）


.box71 {
	padding: 10px;
	background-color:#fcccff;
}
.box72 {
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	background-color:#fcccff;
}
※HTML
<div class="box71">BOX1（上10px、右10px、下10px、左10px）</div>
<div class="box72">BOX2（上10px、右10px、下10px、左10px）</div>
※★sample
★①
BOX1（上10px、右10px、下10px、左10px）

BOX2（上10px、右10px、下10px、左10px）
*BOX1もBOX2も画面での表示のされ方は同じ。
★②09paddingサンプル

▲Ｔｏｐ

10float

floatプロパティは、ボックスを左または右に寄せて配置し、後に続く要素（文字列等）をその反対側に表示します。 適用要素：すべての要素

値 解説
none 左右へ配置しない（初期値）
left 左側に配置し、後に続く要素を右側に回り込ませる
right 右側に配置し、後に続く要素を左側に回り込ませる
※CSS 

.box81,
.box82,.box83 {
	width: 100px;
	background-color:#fcccff;
	float: left;
}
※HTML
<div class="box81">BOX81</div>
<div class="box82">BOX82</div>
<div class="box83">BOX83</div>
※★sample
★①
BOX81
BOX82
BOX83

★②10floatサンプル

▲Ｔｏｐ

11overflow

overflowプロパティは、ボックス内に文字列が納まらずはみ出した内容の表示方法を指定します。 適用要素：ブロックレベル要素（置換要素を除く）、inline-blockの要素、th要素、td要素

値 解説
visible ボックスからはみ出して表示（初期値）
hidden ボックスからはみ出した部分は表示しない
scroll スクロールバーをつけて表示
auto ブラウザに依存
※CSS 

.box8 {
	width: 300px;
	height: 80px;
	overflow: auto;
	background-color:#fcccff;
}
※HTML
<div class="box8">オーバーフローのサンプルです。
オーバーフローのサンプルです。
overflow: visible;
はみ出して表示されます。
overflow: hidden;
はみ出た部分は表示されません。
overflow: scroll;
スクロールで表示されます。
overflow: auto;
内容がボックスの大きさよりも多いと
スクロールバーが表示されます。</div>
※★sample
★①
オーバーフローのサンプルです。 オーバーフローのサンプルです。 overflow: visible; はみ出して表示されます。 overflow: hidden; はみ出た部分は表示されません。 overflow: scroll; スクロールで表示されます。 overflow: auto; 内容がボックスの大きさよりも多いと スクロールバーが表示されます。
★②11overflowサンプル

▲Ｔｏｐ

12display

displayプロパティは、要素の表示形式（ブロック要素、インライン要素）の指定をします。 適用要素：すべての要素

値 解説
inline インラインで表示（初期値）
block ブロックレベルで表示
list-item リスト項目として表示
none 表示しない、領域そのものがなし
※CSS 

div.box9 {
	display: inline;
	background-color:#fcccff;
}
※HTML
<div class="box9">ブロックレベル要素を</div>
<div class="box9">インラインで表示</div>
※★sample
★①
ブロックレベル要素を
インラインで表示

★②12displayサンプル

▲Ｔｏｐ

13visibility

visibilityプロパティは、ボックスの表示・非表示を設定します。 ボックスの領域がなくなってしまうわけではなく、領域は存在したまま表示のみ非表示となります。 適用要素：すべての要素

値 解説
visible 表示（初期値）
hidden 非表示
※CSS 

.sample {
	visibility: hidden;
	
}
<div>ここの文字が → <p class="sample">消えます</p> ← 非表示</div>
※★sample
★①
ここの文字が →

消えます

← 非表示

★②13visibilityサンプル

▲Ｔｏｐ

14clear

clearプロパティは、floatプロパティで設定した回り込みを解除します。 適用要素：ブロックレベル要素

値 解説
none 回り込みを解除しない（初期値）
left 左フロートを解除
right 右フロートを解除
both 両方のフロートを解除
※CSS 

.box101,
.box102 {
	width: 100px;
	background-color:#fcccff;
	float: left;
}
.box103 {
	clear: left;
}
※HTML
<div class="box101">BOX81</div>
<div class="box102">BOX82</div>
<div class="box103">BOX83</div>
※★sample
★①
BOX101
BOX102
BOX103

★②14clearサンプル

▲Ｔｏｐ

15position

positionプロパティは、ボックス表示位置を指定します。 適用要素：すべての要素

値 解説
static 通常の位置（初期値）
※top,right,bottom,leftで位置を指定することはできません
relative 通常の位置を基準とした相対的な配置
absolute ウィンドウまたは親ブロックを基準とした絶対的な配置
fixed ウィンドウを基準とした絶対的な配置および位置の固定
表示させる位置の指定
値 解説（0の場合単位はなくても可。初期値はauto）
top 数値+単位、%値（上からの距離）
right 数値+単位、%値（右からの距離）
bottom 数値+単位、%値（したからの距離）
left 数値+単位、%値（左からの距離）
※CSS 

.box11 {
	
	position: relative;
	top: 30px;
	left: 100px;
}
※HTML
<div class="box11">box</div>
※★sample
★①
box
↓TOP(ここ)から30px LEFTから100px

★②15positionサンプル

▲Ｔｏｐ

16z-index

z-indexプロパティは、重なりの順序を指定します。 positionプロパティで、static以外が指定されている場合のみ有効です。 適用要素：positionプロパティで「static」以外が指定されている要素

値 解説
auto 親要素と同じ階層にする（初期値）
数値 数値が大きいものほど上に表示される（基準0）
※CSS 

.box121 {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 100px;
	height: 100px;
	z-index: 1;
}
.box122 {
	position: absolute;
	top: 40px;
	left: 5px;
	width: 100px;
	height: 100px;
	z-index: 2;
}
.box123 {
	position: absolute;
	top: 50px;
	left: 70px;
	width: 100px;
	height: 100px;
	z-index: 3;
}

※HTML
<div class="box121">box1</div>
<div class="box122">box2</div>
<div class="box123">box3</div>
<div class="box99">※画面左上表示</div>
※★sample
★①
box1
box2
box3
※画面左上表示
★②16z-indexサンプル

▲Ｔｏｐ