left

レフト（値）

意味左側に配置

leftとは？

要素の位置を左側に指定するために使用します。

leftの具体的な使い方

要素を左に浮かせる例

<style>
    .float-left {
        float: left;
        background-color: lightblue;
        width: 100px;
        height: 100px;
        margin-right: 10px;
    }
</style>

<div class='float-left'>左に配置された要素</div>
<div>他の内容</div>

要素を左側に浮かせる

要素を左から特定の位置に配置する例

<style>
    .positioned {
        position: absolute;
        left: 50px;
        top: 50px;
        background-color: lightblue;
        width: 100px;
        height: 100px;
    }
</style>

<div class='positioned'>
    左から50pxの位置に配置
</div>

絶対位置指定で要素を左から50pxの位置に配置

leftに関するよくある質問

Q. leftプロパティの基本的な使い方は？

A. leftプロパティは主に、position: absolute、relative、fixed、またはstickyが設定された要素の水平位置を指定するために使用します。値には固定値（px）や相対値（%）を使用できます。

Q. float: leftとleft: 0pxの違いは？

A. float: leftは要素を左側に浮かせ、周りのコンテンツを右側に回り込ませます。一方、left: 0pxは、position: absoluteなどと組み合わせて使用し、要素を親要素または viewport の左端に配置します。

Q. leftは常に効果がある？

A. いいえ、leftプロパティは通常、position: staticの要素には効果がありません。効果を持たせるには、positionプロパティをabsolute、relative、fixed、またはstickyに設定する必要があります。

CSSを勉強するのにおすすめな問題集アプリの紹介

楽しくプログラミングを学ぶことで、プログラミングの理解度が深まります。『CSS問題集』は、楽しくCSSを学ぶのに最適なアプリです。AIが出題する問題に答えていくことで、自然とCSSの理解度が深まります。

プログラミング問題集公式サイトはこちら：https://programming-tango.jp/promon/

CSSのleftについても学べる書籍の紹介

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

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