Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- CSSプロパティ辞典
- left
left
基準となる位置の左辺からの距離を指定します。この『left』プロパティは『position』プロパティが『static』以外の値に指定されていた場合のみ反映されます。
サンプルコード
div.test { left: auto;}
div.test1 { left: 50px;}
div.test2 { left: 10%;}
指定可能な値一覧
| 値 | 概要 |
|---|---|
| auto | 『right』プロパティから計算された位置で配置します。『right』プロパティの値も『auto』だった場合は位置の移動は行われません。これが初期値です。 |
| 数値 | 数値で指定します。『position』プロパティの値が『relative』だった場合は通常のドキュメントフローで配置されるはずだった位置の左辺からの距離、『absolute』だった場合は基準となる包含ブロックの左辺からの距離を指定する値となります。使用できる単位は『px』や『%』などです。『%』を使用した場合は包含ブロック(基準となる位置を決定付けしている要素)の高さから算出された相対値で位置移動が行われます。 |
ブラウザでの表示結果
以下の『left』プロパティを設定しているdiv要素は『position: relative』と指定のあるdiv要素(赤枠の要素)の中に配置しており、赤枠の要素が基準となっています。
<div style="position: relative; border: solid 1px #f00; width: 300px; margin: 50px auto;"> <div style="left: 50px; position: relative; background-color: #ff0; width: 300px; height: 300px; opacity: 0.7;">ここは幅300px、高さ300pxのdiv要素です。『left: 50px』、『position: relative』を指定しています。</div> </div>
<div style="position: relative; border: solid 1px #f00; width: 300px; margin: 50px auto;"> <div style="left: 50px; position: absolute; background-color: #ff0; width: 300px; height: 300px; opacity: 0.7;">ここは幅300px、高さ300pxのdiv要素です。『left: 50px』、『position: absolute』を指定しています。親要素の高さはこの要素の高さを算出できないため『0』となります。</div> </div>
対応ブラウザ
| IE6 | IE7 | IE8 | IE9 | IE10 | IE11 | Safari | Chrome | Firefox | Opera |
|---|---|---|---|---|---|---|---|---|---|
| iPhone Safari | Android2系 標準ブラウザ | Android4系 標準ブラウザ |
|---|---|---|
概要
基準となる位置の左辺からの距離を指定します。この『left』プロパティは『position』プロパティが『static』以外の値に指定されていた場合のみ反映されます。
『position』プロパティが『relative』であった場合と『absolute』もしくは『fixed』を指定した場合で基準となる位置が変化します。
『position』プロパティに『relative』と指定した場合での『left』プロパティの値は、通常のドキュメントフローで配置されるはずだった位置の左辺からの距離となります。
『position』プロパティに『absolute』、または『fixed』と指定した場合での『left』プロパティの値は、包含ブロックの左辺からの距離になります。
値を『auto』と指定した場合、『right』プロパティの値から計算されたx軸方向の残りの距離を『left』プロパティの値として自動設定されます。『left』プロパティ、『right』プロパティの値が共に『auto』だった場合は位置の変更は行われません。この『auto』が初期値となります。
尚、『top』プロパティと『bottom』プロパティは同じx軸方向、そして『left』プロパティと『right』プロパティは同じy軸方向の距離を指定するプロパティの為、双方同時に記述する必要はありません。同時に記述した場合は『top』プロパティ、もしくは『left』プロパティが優先されます。
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
