CSSリファレンス -- 配置

[背景] [フォント] [テキスト] [ボックス] [配置] [リスト] [TABLE] [擬似] [UI]

[印刷] [音声]

CSS仕様の表記

CSS1 --- CSS Level 1、CSS Level 2で定義されている属性と値

CSS2 --- CSS Level 2で定義されている属性と値


position 要素の配置方法を指定する

CSS仕様: CSS2

機能 Windows Macintosh
absolute ひとつ外側のボックスからの絶対位置で配置する IE3以降 NS4以降 IE3以降 NS4以降
relative 標準の位置からの相対位置で配置する IE3以降 NS4以降 IE3以降 NS4以降
static 配置方法を指定しない標準の状態に設定する IE3以降 NS4以降 IE3以降 NS4以降
fixed ひとつ外側のボックスからの位置で配置し固定する NS6以降 NS6以降

適応要素 :すべての要素 (自動生成コンテンツを除く)

継承 :しない (デフォルト値 = static)

要素のは位置方法を指定する属性です。static を指定すると top、left、right、bottom といった表示位置を調整する属性は無効になります。position属性を単独で指定してもあまり効果なく、通常は top、left、right、bottom という表示位置を指定する属性と共に使用します。 Sample43


top 上からの位置を指定する

left 左からの位置を指定する

bottom 下からの位置を指定する

right 右からの位置を指定する

CSS仕様: CSS2

機能 Windows Macintosh
数値+単位 em, ex, pt, px などの単位で指定 IE4以降 NS4以降 IE4以降 NS4以降
数値+% ひとつ外側のボックスに対する割合 IE4以降 NS4以降 IE4以降 NS4以降
auto 自動調整 IE4以降 NS4以降 IE4以降 NS4以降

適応要素 :位置指定されるすべての要素

継承 :しない (デフォルト値 = auto)

要素の位置方法を指定する属性です。staticを指定すると top、left、right、bottom といった表示位置を調整する属性は無効になります。通常は position属性と共に使われます。


float 要素の左右への回り込みを指定する

CSS仕様: CSS1

機能 Windows Macintosh
left 要素を左に配置し、その右側に他の要素が回りこむ IE4以降 NS4以降 IE4以降 NS4以降
right 要素を右に配置し、その左側に他の要素が回りこむ IE4以降 NS4以降 IE4以降 NS4以降
none 左右への配置と回り込みをしない IE4以降 NS4以降 IE4以降 NS4以降

適応要素 :すべての要素 (位置を指定される要素と自動生成コンテンツを除く)

継承 :しない (デフォルト値 = none)

対象となるボックス領域に対しての文字の回りこみを指定する要素です。なお、position属性でabsoluteを指定すると無効になります。Sample44


clear 左右への回り込みを解除する

CSS仕様: CSS1

機能 Windows Macintosh
none 回り込みを解除しない IE4以降 NS4以降 IE4以降 NS4以降
right 右に配置された要素に対する回り込みを解除する IE4以降 NS4以降 IE4以降 NS4以降
left 左に配置された要素に対する回り込みを解除する IE4以降 NS4以降 IE4以降 NS4以降
both 左右に配置された要素に対する回り込みを解除する IE4以降 NS4以降 IE4以降 NS4以降

適応要素 :ブロックレベル要素

継承 :しない (デフォルト値 = none)

float属性によって設定した回り込みを解除する属性です。 Sample45


z-index 要素の重ね順を指定する

CSS仕様: CSS2

機能 Windows Macintosh
整数 値が大きいほど上に配置する IE5以降 NS6以降 IE4.5以降 NS6以降
auto 親要素と同じ階層に配置する IE5以降 NS6以降 IE4.5以降 NS6以降

適応要素 :位置指定されるすべての要素

継承 :しない (デフォルト値 = auto)

スタイルシートでは、positiontop、left、right、bottom属性の値によっては要素が層状(レイヤー)に重なり合います。その際に、どの要素が前面になるかを指定する属性です。整数の指定は、0を基準にしてプラスの数値になるほど前面に重なり、逆に、マイナスになるほど背面に回ります。指定は整数で行います。 Sample46


overflow 内容が収まりきれない場合の表示方法を設定する

CSS仕様: CSS2

機能 Windows Macintosh
visible はみ出た部分も表示する IE5以降 NS6以降 IE4.5以降 NS6以降
hidden はみ出た部分は表示しない IE5以降 NS6以降 IE4.5以降 NS6以降
scroll スクロールして表示する IE5以降 NS6以降 IE4.5以降 NS6以降
auto 自動調整 IE5以降 NS6以降 IE4.5以降 NS6以降

適応要素 :ブロックレベル要素、置換要素

継承 :しない (デフォルト値 = auto)

height属性や width属性でボックス領域の幅や高さを指定すると、コンテンツの量によってはボックス領域内に収まりきれないことがあります。この属性は、コンテンツがあふれる場合の処理を指定します。 Sample47


clip 要素内のみ得る範囲を指定する

CSS仕様: CSS2

機能 Windows Macintosh
rect ボックスの各辺から内側への距離の見える部分を指定する IE4以降 NS6以降 IE4.5以降 NS6以降
auto 自動調整 IE4以降 NS6以降 IE4.5以降 NS6以降

適応要素 :ブロックレベル要素、置換要素

継承 :しない (デフォルト値 = auto)

ブロックレベル要素の一部を表示する属性です。この属性は、position属性で、absolute を指定していないと効果がありません。 Sample48


visibility 要素の表示/非表示を設定する

CSS仕様: CSS2

機能 Windows Macintosh
visible 表示する IE4以降 NS6以降 IE4.5以降 NS6以降
hidden 非表示にする IE4以降 NS6以降 IE4.5以降 NS6以降
collapse テーブルの行、列、およびそのグループを非表示にする NS6以降 NS6以降

適応要素 :すべての要素

継承 :しない (デフォルト値 = visible)

要素の表示・非表示を指定する属性です。この属性は非表示であっても要素の領域は確保されます。 Sample49


display 要素の表示の仕方を設定する

CSS仕様: CSS1

機能 Windows Macintosh
block ブロックレベル要素として扱う IE4以降 NS4以降 IE4.5以降 NS6以降
inline インライン要素として扱う IE4以降 NS4以降 IE4.5以降 NS6以降
list-item リスト項目として扱う IE4以降 NS4以降 IE4.5以降 NS6以降
none 表示されない IE4以降 NS4以降 IE4.5以降 NS4以降

適応要素 :すべての要素

継承 :しない (デフォルト値 = 各要素の初期値)

表示形式を変更する属性です。インラインレベル要素をブロックレベル要素に変更する、といったことが可能です。block属性を指定した要素はブロックレベル要素となり、そのため、前後に改行が入ります。属性の中にはブロックレベル要素にしか影響が及ぼさないものもあるため、そのような属性を扱いたい場合は、block を指定します。

inline属性を指定した要素はインラインレベル要素となり、要素の前後には改行が入りません。リストアイテム要素として扱う場合は、list-item属性を指定します。noneを指定すると要素を生成しません。要素は非表示となり、レイアウトにも影響を与えない存在しないものとして処理されます。

なお、この display属性で要素の型を変更したとしても、文書の論理構造を変更するものではありません。 Sample50



This Page is HTML4.01 Valid! 初版更新日 2002年5月7日   最新更新日 2004年2月24日
Copyright(C) 2002-2003 banban@scollabo.com