left

レフト（レイアウトとボックスモデル）

意味左辺の位置

leftとは？

leftプロパティは、絶対位置または相対位置に配置された要素の左辺の位置を指定するために使用します。このプロパティは、要素がpositionプロパティで'absolute', 'relative', 'fixed', 'sticky'のいずれかに設定されている場合にのみ動作します。

leftの具体的な使い方

絶対位置で左からの距離を指定する例

<style>
    div {
        position: absolute;
        left: 50px;
        background-color: tomato;
    }
</style>

<div>
    このdiv要素は親要素の左端から50ピクセル離れた位置にあります。
</div>

div要素を絶対位置で配置し、その左端が親要素の左端から50ピクセル離れた位置になるように設定しています。

相対位置で左に要素を移動させる例

<style>
  .menu-item {
    position: relative;
    left: 20px;
    margin-bottom: 10px;
  }
</style>

<ul>
  <li class="menu-item">メニュー項目1</li>
  <li class="menu-item">メニュー項目2</li>
  <li class="menu-item">メニュー項目3</li>
</ul>

リストの各項目を左に20px移動させる例。相対位置指定を使用しています。

leftに関するよくある質問

Q. leftとmargin-leftの違いは？

A. leftはposition属性が設定された要素の位置を指定するのに使用され、他の要素のレイアウトに影響を与えません。一方、margin-leftは要素の外側の余白を設定し、他の要素との間隔を作ります。

Q. leftに％を指定するとどうなる？

A. パーセント値を使用すると、親要素の幅に対する相対的な位置を指定できます。例えば、left: 50%; とすると、要素は親要素の幅の半分の位置に配置されます。

Q. leftを使うときの注意点は？

A. leftプロパティを使用する際は、必ずposition属性を適切に設定する必要があります。また、右側の配置にはrightプロパティを使用することをお勧めします。leftとrightを同時に使用すると、予期せぬレイアウトになる可能性があります。

leftが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのleftやvertical-align、border-left、bottom、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。