left

CSSプロパティ「left」の解説とサンプル。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

left

ボックスの左からの配置位置を指定するプロパティ。

leftを指定することで、positionで指定する基準からの左からの位置を指定することができる。

数値で指定 px、em、pt等の数値で指定する。
none 基準となる親ボックスに対する割合で指定する。
auto 初期値。

使用例 - サンプル(A) / サンプル(B) / サンプル(C)

サンプル(A)

[CSSの記述]

.sampleBox {height:50px; border:solid 1px #c00; position:relative; }
.sampleA { position:relative; left:20px; font-weight:bold; color:#f00; }

[HTMLの記述]

<div class="sampleBox">
	<p class="sampleA">テキストテキストテキスト</p>
</div>

[ブラウザ上の表示]

position:relativeの場合はこの位置

サンプル(B)

[CSSの記述]

.sampleBox {height:50px; border:solid 1px #c00; position:relative; }
.sampleA { position:absolute; left:20px; font-weight:bold; color:#f00; }

[HTMLの記述]

<div class="sampleBox">
	<p class="sampleB">テキストテキストテキスト</p>
</div>

[ブラウザ上の表示]

position:absoluteの場合はこの位置

サンプル(C)

[CSSの記述]

.sampleBox {height:50px; border:solid 1px #c00; position:relative; }
.sampleC { position:fixed; left:20px; font-weight:bold; color:#f00; }

[HTMLの記述]

<div class="sampleBox">
	<p class="sampleC">テキストテキストテキスト</p>
</div>

[ブラウザ上の表示]

position:fixedの場合はこの位置