left プロパティ

最終更新：2026-09-13

left left プロパティ

left プロパティは、配置された要素がその包含ブロックの左端から右方向にどれだけ離れているかを定義します。static 以外の配置要素にのみ適用され、最もよく使われるオフセットプロパティの一つで、通常は absolute または fixed 配置と組み合わせて左側に正確に配置するために使用されます。

カテゴリ
初期値	auto
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS2
状態	標準

📝 構文

left: auto | <length> | <percentage>;

⚙️ 値

値	タイプ	説明
`auto`	キーワード	オフセットなし。
`<length> \| <percentage>`	タイプ	包含ブロックの左端からのオフセット。

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
left	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

注意： left は static 以外の配置要素にのみ影響します。position:static には効果がありません。

ヒント： パーセンテージは包含ブロックの幅を基準に計算されます。left と right を両方設定すると、要素の幅が伸びて適応的なレイアウトになります。

❓ よくある質問

Qleft と right の両方を設定するとどうなりますか？

Awidth のない absolute または fixed 要素の場合、要素は左から右へ伸び、水平方向の空間を適応的に埋めます。例えば .overlay { position:absolute; left:0; right:0; } は幅いっぱいに広がります。width が設定されている場合、LTR テキストでは left が優先され right は無視されます。これは全幅バーやオーバーレイレイヤーの定番パターンで、要素がビューポートに合わせて自動的にサイズ変更されます。

Qleft のパーセンテージは何を基準にしますか？

Aパーセンテージは包含ブロックの幅を基準に計算されます。absolute 要素の包含ブロックは最も近い配置祖先の padding box です。fixed の場合はビューポート、relative の場合は要素自身の元の位置です。例えば left:50% は要素の左端を包含ブロックの幅の半分の位置に置き、水平中央揃えには transform:translateX(-50%) とよく組み合わせられます。

Qleft:50% を使って水平方向に中央揃えするにはどうすればよいですか？

A要素を position:absolute、親を position:relative にし、left:50% で左端をコンテナの中点に置き、その後 transform:translateX(-50%) を適用して自身の幅の半分だけ左にずらします。これが古典的な水平中央揃えの技法です。より洗練された近代的な代替手段は、親を display:flex; justify-content:center にする方法で、この場合魔法のような数値が不要になります。同じ translateX の技法は right:50% でも右端からの中央揃えに使えます。

Qleft が機能しないのはなぜですか？

A最も一般的な理由は、position がまだ static であることです（left は配置要素にのみ機能します）。次に、width と right の両方が設定されている場合、LTR テキストでは left が right より優先されます。right を適用したい場合は、left または width を削除してください。最後に、値が有効（auto、長さ、パーセンテージ）であることを確認してください。position と競合するプロパティを順に確認してください。