●CSSのサンプル例→ > №00 > №01 > №02 > №03 > №04 > №05 > №06 > №07 > END
01css_box(ボックス)
サンプル例
●01width(ボックス)
●02max-width(ボックス)
●03Vendor-Prefix(ボックス)
●04min-width(ボックス)
●05heigh(ボックス)t
●06max-height(ボックス)
●07min-heigh(ボックス)
●08margin(ボックス)
●09padding(ボックス)
●10float(ボックス)
●11overflow(ボックス)
●12display(ボックス)
●13visibility(ボックス)
●14clear(ボックス)
●15position(ボックス)
●16z-index(ボックス)
END
01css_box(ボックス)
01width
widthプロパティは、ボックスサイズの横幅を指定します。
入力した文字列は、指定した幅に達すると自動的に折り返されます。
適用要素:すべての要素(置換要素以外のインライン要素とtr要素、thead要素、tbody要素tfoot要素を除く)
値 | 解説 |
---|---|
実数値+単位 | ボックスの横幅を数値(px等の単位をつけて)で設定 |
%値 | ボックスの横幅を親ボックスの幅に対する割合で設定 |
auto | ボックスの横幅をブラウザに依存して設定(初期値) |
※CSS
|
---|
※★sample ★①横幅300px/高さ100px
★②01widthサンプル
|
---|
02max-width
max-widthプロパティは、ボックスサイズの横幅の最大値を指定します。
親ボックスの横幅より大きな値を設定した場合は、親ボックスで入力した横幅が優先されます。文字列は、指定した幅に達すると自動的に折り返されます。
※IE6以前のブラウザは未対応です。
適用要素:すべての要素(置換要素以外のインライン要素とtr要素、thead要素、tbody要素、tfoot要素を除く)
値 | 解説 |
---|---|
実数値+単位 | ボックスの最大横幅を実数値(px等の単位をつけて)で設定 |
%値 | ボックスの最大横幅を親ボックスの幅に対する割合で設定 |
none | 最大値の制限なし。(初期値) |
※CSS
|
---|
※★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
|
---|
※★sample ★①03vendor-prefix |
---|
04min-width
min-widthプロパティは、ボックスサイズの横幅の最小値を指定します。
親ボックスの横幅より大きな値を設定した場合は、親ボックスで入力した横幅が優先されます。文字列は、指定した幅に達すると自動的に折り返されます。
※IE6以前のブラウザは未対応です。
適用要素:すべての要素(置換要素以外のインライン要素ととtr要素、thead要素、tbody要素、tfoot要素を除く)
値 | 解説 |
---|---|
実数値+単位 | ボックスの最小横幅を実数値(px等の単位をつけて)で設定(初期値は0) |
%値 | ボックスの最小横幅を親ボックスの幅に対する割合で設定 |
※CSS
|
---|
※★sample ★①最小幅300px/高さ100px
★②04min-widthサンプル
|
---|
05height
heightプロパティは、ボックスサイズの高さを指定します。
入力した文字列が、指定した高さ以上の長さになった場合は、指定したボックスをはみ出して表示されます。高さが確定しておらず可変にしたい場合は、100%を指定するかもしくは、未指定にします。
適用要素:すべての要素(置換要素以外のインライン要素とcol要素、colgroup要素を除く)
値 | 解説 |
---|---|
実数値+単位 | ボックスの高さを実数値(px等の単位をつけて)で設定 |
%値 | ボックスの高さを親ボックスの幅に対する割合で設定 |
auto | ボックスの高さをブラウザに依存して設定(初期値) |
※CSS
|
---|
※★sample ★①横幅300px/高さ100px
★②05heightサンプル
|
---|
06max-height
max-heightプロパティは、ボックスサイズの高さの最大値を指定します。
親ボックスの高さより大きな値を設定した場合は、親ボックスで入力した高さが優先されます。入力した文字列が、
指定した高さ以上の長さになった場合は、指定したボックスをはみ出して表示されます。高さが確定しておらず
可変にしたい場合は、100%を指定するかもしくは、未指定にします。
※IE6以前のブラウザは未対応です。
適用要素:すべての要素(置換要素以外のインライン要素とcol要素、colgroup要素を除く)
値 | 解説 |
---|---|
実数値+単位 | ボックスの最大高さを実数値(px等の単位をつけて)で設定 |
%値 | ボックスの最大高さを親ボックスの幅に対する割合で設定 |
none | 最大値の制限なし。(初期値) |
※CSS
|
---|
※★sample ★①幅300px/最大高さ100px
★②06max-heightサンプル
|
---|
07min-height
min-heightプロパティは、ボックスサイズの高さの最小値を指定します。
親ボックスの高さより大きな値を設定した場合は、親ボックスで入力した高さが優先されます。
入力した文字列が、指定した高さ以上の長さになった場合は、指定したボックスをはみ出して表示されます。
高さが確定しておらず可変にしたい場合は、100%を指定するかもしくは、未指定にします。
※IE6以前のブラウザは未対応です。
適用要素:すべての要素(置換要素以外のインライン要素とcol要素、colgroup要素を除く)
値 | 解説 |
---|---|
実数値 | ボックスの最小高さを実数値(px等の単位をつけて)で設定(初期値は0) |
%値 | ボックスの最小高さを親ボックスの幅に対する割合で設定 |
※CSS
|
---|
※★sample ★①幅300px/最小高さ100px
★②07min-heightサンプル
|
---|
08margin
marginプロパティは、ボックスと隣接する他のボックスのマージン(間隔)を設定します。
4辺まとめて設定する方法と、個々に設定する方法があります。
適用要素:すべての要素(tr要素、th要素、td要素、thead要素、tbody要素、tfoot要素、col要素、colgroup要素を除く)
値 | 解説 |
---|---|
実数値+単位 | マージンを実数値(px等の単位をつけて)で設定 |
%値 | マージンを親ボックスの幅に対する割合で設定 |
auto | 自動設定 |
※CSS
|
---|
※★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
|
---|
※★sample ★① BOX1(上10px、右10px、下10px、左10px) BOX2(上10px、右10px、下10px、左10px)
*BOX1もBOX2も画面での表示のされ方は同じ。★②09paddingサンプル |
---|
10float
floatプロパティは、ボックスを左または右に寄せて配置し、後に続く要素(文字列等)をその反対側に表示します。 適用要素:すべての要素
値 | 解説 |
---|---|
none | 左右へ配置しない(初期値) |
left | 左側に配置し、後に続く要素を右側に回り込ませる |
right | 右側に配置し、後に続く要素を左側に回り込ませる |
※CSS
|
---|
※★sample ★① BOX81
BOX82
BOX83 ★②10floatサンプル |
---|
11overflow
overflowプロパティは、ボックス内に文字列が納まらずはみ出した内容の表示方法を指定します。 適用要素:ブロックレベル要素(置換要素を除く)、inline-blockの要素、th要素、td要素
値 | 解説 |
---|---|
visible | ボックスからはみ出して表示(初期値) |
hidden | ボックスからはみ出した部分は表示しない |
scroll | スクロールバーをつけて表示 |
auto | ブラウザに依存 |
※CSS
|
---|
※★sample ★① オーバーフローのサンプルです。
オーバーフローのサンプルです。
overflow: visible;
はみ出して表示されます。
overflow: hidden;
はみ出た部分は表示されません。
overflow: scroll;
スクロールで表示されます。
overflow: auto;
内容がボックスの大きさよりも多いと
スクロールバーが表示されます。
★②11overflowサンプル
|
---|
12display
displayプロパティは、要素の表示形式(ブロック要素、インライン要素)の指定をします。 適用要素:すべての要素
値 | 解説 |
---|---|
inline | インラインで表示(初期値) |
block | ブロックレベルで表示 |
list-item | リスト項目として表示 |
none | 表示しない、領域そのものがなし |
※CSS
|
---|
※★sample ★① ブロックレベル要素を
インラインで表示 ★②12displayサンプル |
---|
13visibility
visibilityプロパティは、ボックスの表示・非表示を設定します。 ボックスの領域がなくなってしまうわけではなく、領域は存在したまま表示のみ非表示となります。 適用要素:すべての要素
値 | 解説 |
---|---|
visible | 表示(初期値) |
hidden | 非表示 |
※CSS
|
---|
※★sample ★① ここの文字が → 消えます ← 非表示★②13visibilityサンプル |
---|
14clear
clearプロパティは、floatプロパティで設定した回り込みを解除します。 適用要素:ブロックレベル要素
値 | 解説 |
---|---|
none | 回り込みを解除しない(初期値) |
left | 左フロートを解除 |
right | 右フロートを解除 |
both | 両方のフロートを解除 |
※CSS
|
---|
※★sample ★① BOX101
BOX102
BOX103 ★②14clearサンプル |
---|
15position
positionプロパティは、ボックス表示位置を指定します。 適用要素:すべての要素
値 | 解説 |
---|---|
static | 通常の位置(初期値) ※top,right,bottom,leftで位置を指定することはできません |
relative | 通常の位置を基準とした相対的な配置 |
absolute | ウィンドウまたは親ブロックを基準とした絶対的な配置 |
fixed | ウィンドウを基準とした絶対的な配置および位置の固定 |
表示させる位置の指定 | |
値 | 解説(0の場合単位はなくても可。初期値はauto) |
top | 数値+単位、%値(上からの距離) |
right | 数値+単位、%値(右からの距離) |
bottom | 数値+単位、%値(したからの距離) |
left | 数値+単位、%値(左からの距離) |
※CSS
|
---|
※★sample ★① box
↓TOP(ここ)から30px LEFTから100px
★②15positionサンプル |
---|
16z-index
z-indexプロパティは、重なりの順序を指定します。 positionプロパティで、static以外が指定されている場合のみ有効です。 適用要素:positionプロパティで「static」以外が指定されている要素
値 | 解説 |
---|---|
auto | 親要素と同じ階層にする(初期値) |
数値 | 数値が大きいものほど上に表示される(基準0) |
※CSS
|
---|
※★sample ★① box1
box2
box3
※画面左上表示
★②16z-indexサンプル
|
---|