OR
誰でも自由に記事を投稿・編集できるオープンリファレンス
記事ID:142
区分:プログラム  |  分類:HTML/CSS  |  最終更新日:2014/06/29
クリエイティブ・コモンズ 表示-継承ライセンス 2.1
【CSS】bottomプロパティ(下からの距離の指定)
関連タグ:html, css, カスケーディングスタイルシート, ホームページ, ボトム, 位置指定, position
このエントリーをはてなブックマークに追加      
本文
履歴
編集
閲覧数: 5,846
【CSS】プロパティ一覧 > 【CSS】bottomプロパティ(下からの距離の指定)

CSS(カスケーディング・スタイル・シート)のプロパティの一つ。
ボックスの配置位置を指定する為のプロパティです。 通常、このプロパティは positionプロパティ と併用して使用し、position プロパティで位置決めされたボックスに対して、下からの距離を指定して、ボックスの配置位置を設定します。

 

【サンプルコード】

position: absolute;
bottom: 20px;

 

値は、正(プラス)と負(マイナス)のどちらでも指定できます。正(プラス)を指定した場合は基準点から上向きに、負(マイナス)を指定した場合は下向きに動きます。また、パーセント等による指定をした場合は、親ボックス(または画面)の高さに対する下からの割合となります。

 

同様に位置決めされた要素に対する位置を指定するプロパティは以下のものがあります。

 

プロパティ仕様

書式

bottom: 値;

適用対象 位置決めされた要素(※1
継承の有無 継承しない
メディア visual
CSSレベル CSS2
初期値 auto
説明
auto 自動 (初期値)
サイズ 数値 + 単位で指定する

※1 このプロパティは position プロパティで「relative」「absolute」「fixed」のいづれかを指定した場合にのみ有効となります。

※2 IE6 以下では positionプロパティの「fixed」には対応していません。 また、IE7 以上でも表示モードが「互換モード」の場合は機能しません。

類似プロパティについて

このプロパティに類似する機能を持つプロパティは以下のものがあります。

 

サンプルコード

.sample1 {
position: fixed;
right: 0px;
bottom: 0px; }

※ 上記サンプルでは position プロパティに「fixed」が指定され、right と bottom プロパティが「0px」のため、ボックスは画面に対して常に右下に配置されます。

関連記事
関連記事はありません。
外部リンク
- 記事検索 -