CSS-Styling [position]

メニュー

トップ

掲示板

リンク

お気に入りに追加（IEのみ）

CSS

基本: CSSとは？; 基本; セレクタの種類; 記述の仕方; 単位について
色: カラー指定
フォント: フォントの指定; フォントのサイズ指定; フォントの太さ指定; フォントを斜体; フォントをまとめて指定
テキスト: 文字の水平位置; 文字の垂直位置; 文字の行間を指定; 文字の間隔を指定; 文字のインデントを指定; 文字の装飾
リンク: 未訪問リンク; 既訪問リンク; マウスが乗った時; マウスを押した時
ボックス: ボックスの基本; マージンの指定; 余白の指定; 幅と高さの指定
ボーダー（枠線）: ボーダーのスタイル指定; ボーダーのカラー指定; ボーダーの太さを指定; ボーダーをまとめて指定

TOP_PAGEへ

配置

絶対的な配置

position : absolute;

要素を絶対的位置に配置します。

サンプル

＊スクロールバーを右にずらしてください。

絶対的配置のサンプル

color; #ffffff;
background-color: #000000;
padding: 20px;
position: absolute;
top: 125px;
left: 100%;
width: 300px;

▲上へ

絶対的な配置（固定）

position : fixed;

要素を絶対的位置に固定して配置します。

サンプル

＊スクロールバーを右にずらしてください。
スクロールバーを移動させても表示位置は固定されています。
（注）IEは「position: fixed;」をサポートしていない為（06年11月現在）
ご覧のブラウザがIEの方は↓に表示されていると思います。

絶対的配置（固定）のサンプル

color; #ffffff;
background-color: #0099ff;
padding: 20px;
position: fixed;
top: 400px;
left: 900px;
width: 300px;

▲上へ

相対的な配置

position : relative;

要素を相対的位置に配置します。

サンプル

配置した位置から「top; 15px; right: -100px」分ずらしています。
↓ココに配置してます。

相対的配置のサンプル

color; #ffffff;
background-color: #336699;
padding: 20px;
position: relative;
top: 15px;
right: -100px;
width: 300px;

▲上へ

センタリング

margin-left: auto;
margin-right: auto;

要素をセンタリングします。
（注）IEの場合はHTMLのドキュメントタイプを「HTML4.01 Strict」で
宣言しなければセンタリングされません。
またXHTMLでは「margin: 0 auto;」といった省略でのセンタリングが適応されません。
互換モードでセンタリングする場合には「text-align: center;」を代用します。

▲上へ

回り込み

float: 位置;

要素に対して回り込み設定をします。

（左） float: left;

（右） float: right;

（無） float: none;

▲上へ

回り込み解除

clear: 位置;

回り込みを解除します。

（左） clear: left;