表示方法に関するプロパティ
<<display>>
要素のボックスの種類を指定するためのプロパティ。値には、block（ブロック要素として表示）、inline（インライン要素として表示）、marker（マーカ）、list-item（リスト項目）、などのほかに、前後の状態によってブロックやインラインに変化するcompactやrun-in、none、table関連の値（inline-table、table-caption、table-row、table-cell、table-column、table-row-group、table-column-group、table-header-group、table-footer-group）を設定することができる。
●displayの設定例
img { display : block; }
<<float>>
ボックスを右か左にフローとして表示する。プロパティの値には、left、right、noneを指定することができる。以下に、左フロートのボックスを設定する例を示す。
●floatの設定例
p.note {
border-style : solid;
border-color : red;
height : 160px;
width : 400px;
}
img {
float : left;
}
<p class="note">
<img src="youkai.jpg" alt="妖怪画像">
この分類には独自の見解が含まれている。
学術的に正しいものではありませんので注意してください。
</p>
※positionプロパティの値がstatic以外の要素には適用されない。
<<clear>>
floatでのテキストの回り込みを禁止するには、clearを設定する。プロパティの値には、何もしないnone（デフォルト）、左側の回り込みを禁止するleft、右側の回り込みを禁止するright、両側の回り込みを禁止するbothを指定することができる。
●clearプロパティの設定例
img {
float : left;
clear : both;
}
<<position>>
ボックスの位置を設定するためのプロパティ。プロパティの値には、通常のボックスであるstatic、相対位置のrelative、絶対位置のabsolute、スクロールの際も位置が固定される絶対値のfixedを指定することができる。
●positionプロパティの設定例
p.note {
border-style : solid;
border-color : red;
height : 200px;
width : 300px;
position : relative;
}
img {
position : absolute;
top : 3em;
left : 100px;
}
●HTMLのサンプル
<p class="note">
<img src="youkai.jpg" alt="妖怪画像">
この分類には独自の見解が含まれています。
学術的に正しいものではありませんので注意してください。
</p>
ボックスの位置を指定するためのプロパティには、次のものがある。プロパティの値には、長さ、パーセンテージのほかに、autoを指定することができる。
■ボックスの位置に関するプロパティ
| 値 |
概要 |
| top |
上辺の位置 |
| left |
左辺の位置 |
| bottom |
下辺の位置 |
| right |
右辺の位置 |
<<z-index>>
ボックスの重なる順序を指定するためのプロパティ。プロパティの値には、順序を示す整数値、またはautoを指定することができる。
●z-indexプロパティの設定例
p.note {
color : white;
background-color : black;
position : relative;
width : 200px;
top : -145px;
left : 150px;
z-index : 2;
}
img {
position : relative;
z-index : 1;
}
●HTMLのサンプル
<img class="note" src="youkai.jpg" alt="妖怪画像">
<p class="note">
この分類には独自の見解が含まれています。
学術的に正しいものではありませんので注意してください。
</p>
※このほかに表示関連のプロパティには、文字の方向を指定するdirectionプロパティ、あふれたテキストをどのように扱うかを指定するoverflow、ボックスの表示・非表示を指定するvisibility、ボックスを切り抜き表示するclipなどがある。
最終更新：2007年06月01日 17:11
