CSSのleftプロパティは、要素をその親要素の左側からどれだけ離すかを指定します。positionプロパティがabsoluteまたはrelativeの場合に有効です。
leftプロパティの値とその効果の一覧
0– 要素を親要素の左端に配置します。50px– 要素を親要素の左端から50px離します。100px– 要素を親要素の左端から100px離します。50%– 要素を親要素の幅の50%の位置に配置します。auto– 要素のデフォルト位置に基づいて配置します。
注意点や関連情報
leftプロパティを使用するには、要素のpositionがabsolute、fixed、またはrelativeである必要があります。staticな場合、このプロパティは無視されます。leftは、他の位置プロパティ（top、right、bottom）と組み合わせて使用されることが多く、特に中央揃えを行う際にleft: 50%とtransform: translateX(-50%)を使うテクニックが有効です。
leftプロパティが効かない時の原因と対策
positionプロパティが適切に設定されていない
leftプロパティは、要素が絶対配置（position: absolute;）、固定配置（position: fixed;）、相対配置（position: relative;）である場合にのみ効果を発揮します。positionプロパティがstaticのままでは、leftプロパティの値が無視されます。
対策: 要素に対してpositionプロパティをrelative、absolute、またはfixedに設定しましょう。例えば、position: absolute; left: 20px;のように指定すると、leftプロパティが正しく機能します。
position: relative; で他の要素が影響している
position: relative;が設定された要素では、leftプロパティによって要素の位置が元の位置から移動しますが、他の要素やコンテナに影響される場合、意図した位置に移動しないことがあります。
対策: 要素の元の位置と周囲のレイアウトが適切に設定されているか確認し、必要に応じて余白や他のスタイルを調整します。また、相対配置で移動させた場合の要素の再配置に注意しましょう。
レイアウトがフレックスボックスやグリッドを使用している
フレックスボックス（display: flex;）やグリッド（display: grid;）を使用している場合、leftプロパティは期待通りに機能しないことがあります。これらのレイアウトでは、要素の位置はjustify-contentやalign-itemsなどのプロパティで制御されるため、leftは無効になることがあります。
対策: フレックスボックスやグリッドレイアウトを使用している場合は、justify-contentやalign-selfなどのレイアウトプロパティを使用して配置を制御します。フレックスアイテムに対しては、margin-leftを使用することも検討します。
floatプロパティとの競合
leftプロパティとfloatプロパティが同時に適用されている場合、floatが優先され、leftプロパティが無効になることがあります。floatを使用すると、要素が通常の文書フローから外れて配置されます。
対策: leftプロパティを使用する場合は、floatを削除してスタイルが競合しないようにしましょう。floatの代わりに、leftや他の位置指定プロパティを使用してレイアウトを調整します。
共通するCSSコード
.css-sample-container {
position: relative;
width: 300px;
height: 200px;
background-color: #f9f9f9;
margin: 20px 0;
}
.css-sample-item {
position: absolute;
width: 100px;
height: 100px;
background-color: #cce7ff;
text-align: center;
line-height: 100px;
}
left: 0;
要素を親要素の左端に配置します。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-item css-sample-left-0">Left 0</div>
</div>
CSSコード
.css-sample-left-0 {
left: 0;
}
表示結果
left: 50px;
要素を親要素の左端から50px離します。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-item css-sample-left-50px">Left 50px</div>
</div>
CSSコード
.css-sample-left-50px {
left: 50px;
}
表示結果
left: 100px;
要素を親要素の左端から100px離します。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-item css-sample-left-100px">Left 100px</div>
</div>
CSSコード
.css-sample-left-100px {
left: 100px;
}
表示結果
left: 50%;
要素を親要素の幅の50%の位置に配置します。この場合、transformで中央揃えを補完します。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-item css-sample-left-50-percent">Left 50%</div>
</div>
CSSコード
.css-sample-left-50-percent {
left: 50%;
transform: translateX(-50%);
}
表示結果
left: auto;
要素を自動配置に任せます。通常、leftが指定されていない場合に使われます。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-item css-sample-left-auto">Left Auto</div>
</div>
CSSコード
.css-sample-left-auto {
left: auto;
}
表示結果
まとめ
leftプロパティは、要素を親要素の左側からどれだけ離すかを指定します。- 通常、
positionプロパティがabsolute、relative、またはfixedに設定されている場合に使用されます。 - 中央揃えには、
left: 50%;とtransform: translateX(-50%);を組み合わせて使うことが有効です。 left: auto;は、自動配置を行うための値で、要素の位置をデフォルトに任せる際に使われます。