← 2.14 視覚表現 CSS総目次 2.16 視覚効果 →
視覚整形とは，視覚メディアを対象として，対象メディア上へのボックスの配置（いわゆるレイアウトに関係するものです）を行うことです。ここでは，その配置に関する主なプロパティについて説明します。
CSSでは，ボックスの配置方法に，つぎの３種類があります。
「positionプロパティ」は，要素が生成するボックスをどのように配置するか，その配置方法(※ アルゴリズムともいう。)を指定します。その書式は以下のとおりです。
| positionプロパティ | |
|---|---|
| 値 | static | relative | absolute | fixed | inherit |
| 初期値 | static |
| 適用対象 | すべての要素 |
| 継承 | しない |
| パーセント値 | 受けつけない |
"positionプロパティ"に"static"以外の値が指定されている場合(※ これを「位置決めされている要素」と呼びます。)，「topプロパティ」，「rightプロパティ」，「bottomプロパティ」，「leftプロパティ」の各プロパティにより，包含ブロックの辺からの距離を指定して配置することができます。
「topプロパティ」は，包含ブロックの上辺からボックスの上マージン辺までの距離を指定します。その書式は以下のとおりです。
| topプロパティ | |
|---|---|
| 値 | <長さ> | <％値> | auto | inherit |
| 初期値 | auto |
| 適用対象 | 位置決めされている要素 |
| 継承 | しない |
| パーセント値 | 包含ブロックの高さに対する割合 |
「rightプロパティ」は，包含ブロックの右辺からボックスの右マージン辺までの距離を指定します。その書式は以下のとおりです。
| rightプロパティ | |
|---|---|
| 値 | <長さ> | <％値> | auto | inherit |
| 初期値 | auto |
| 適用対象 | 位置決めされている要素 |
| 継承 | しない |
| パーセント値 | 包含ブロックの幅に対する割合 |
「bottomプロパティ」は，包含ブロックの下辺からボックスの下マージン辺までの距離を指定します。その書式は以下のとおりです。
| bottomプロパティ | |
|---|---|
| 値 | <長さ> | <％値> | auto | inherit |
| 初期値 | auto |
| 適用対象 | 位置決めされている要素 |
| 継承 | しない |
| パーセント値 | 包含ブロックの高さに対する割合 |
「leftプロパティ」は，包含ブロックの左辺からボックスの左マージン辺までの距離を指定します。その書式は以下のとおりです。
| leftプロパティ | |
|---|---|
| 値 | <長さ> | <％値> | auto | inherit |
| 初期値 | auto |
| 適用対象 | 位置決めされている要素 |
| 継承 | しない |
| パーセント値 | 包含ブロックの幅に対する割合 |
以下にサンプルのスタイルと，それを適用したXHTMLコードおよび表示結果を示しめします。
body {
margin: 10px;
}
p {
color: #000;
background-color: #ccc;
margin: 0;
border: 10px solid #000;
padding: 0;
width: 100px;
}
p#relative {
position: relative;
left: 120px;
}
p#absolute1 {
position: absolute;
top: 0px;
left: 200px;
}
p#absolute2 {
position: absolute;
bottom: 0px;
right: 0px;
}
p#fixed {
position: fixed;
top: 100px;
left: 200px;
}<body>
<p>static1</p>
<p id="relative">relative</p>
<p>static2</p>
<p id="absolute1">absolute1</p>
<p id="absolute2">absolute2</p>
<p id="fixed">fixed</p>
</body>
「floatプロパティ」は，フロートの配置方法を指定します。フロートの前後に配置される位置指定されていない通常のボックスは，フロートを無視して配置されます。ただし，フロートに後続する(※ これを"回り込む"と呼びます。)ラインボックスは，その幅がフロート分だけ短くなります。"floatプロパティ"の書式は以下のとおりです。
| floatプロパティ | |
|---|---|
| 値 | left | right | none | inherit |
| 初期値 | none |
| 適用対象 | すべての要素 |
| 継承 | しない |
| パーセント値 | 受けつけない |
以下にサンプルのスタイルと，それを適用したXHTMLコードおよび表示結果を示します。
body {
margin: 10px;
}
p {
color: #000;
background-color: #ccc;
margin: 10px;
border: 1px solid #000;
padding: 10px;
}
img {
margin: 0px;
border: 1px solid #f00;
padding: 10px;
float: left;
}<p>
<img alt="サンプル画像" src="images/back.jpg" width="120" height="120"/>
あいうえおかきくけこさしすせそたちつてとなにぬねの
はひふへほまみむめもやゆよらりるれろわん
</p>
<p>
あいうえおかきくけこさしすせそたちつてとなにぬねの
はひふへほまみむめもやゆよらりるれろわん
</p>
「clearプロパティ」は，先行するフロートのボックスに隣接しない(※ "回り込まない"，と呼びます。)側を指定します。"clearプロパティ"が指定された要素の子孫にフロートする要素を持つことは可能です。その場合，この"clearプロパティ"は影響しません。"clearプロパティ"の書式は以下のとおりです。
| clearプロパティ | |
|---|---|
| 値 | none | left | right | both | inherit |
| 初期値 | none |
| 適用対象 | ブロックレベル要素 |
| 継承 | しない |
| パーセント値 | 受けつけない |
以下にサンプルのスタイルと，それを適用したXHTMLコードおよび表示結果を示します。
body {
margin: 10px;
}
p {
color: #000;
background-color: #ccc;
margin: 10px;
border: 1px solid #000;
padding: 10px;
clear: left;
}
img {
margin: 0px;
border: 1px solid #f00;
padding: 10px;
float: left;
}<p>
<img alt="サンプル画像" src="images/back.jpg" width="120" height="120"/>
あいうえおかきくけこさしすせそたちつてとなにぬねの
はひふへほまみむめもやゆよらりるれろわん
</p>
<p>
あいうえおかきくけこさしすせそたちつてとなにぬねの
はひふへほまみむめもやゆよらりるれろわん
</p>