左からの配置位置を決める!leftプロパティの使い方

左からの位置を設定するのに使われるleftプロパティ。
positionプロパティも一緒に使う必要がありますが、CSS初心者の方の中に

leftプロパティをよく知らない

という方がいるでしょう。
何事もまず基礎を知らないと設定ができる訳がありません。

そこで今回は、leftプロパティの

・基礎
・応用的な使い方

について紹介していきます。

初心者の方にも設定できる簡単なコードも含めて説明していくので、ぜひ目を通してください。

leftプロパティとは

leftプロパティの読み方

leftは、「レフト」と読みます。

左を意味する言葉で、CSSで設定するleftも左から距離を空けたいときなどで使われます。

leftプロパティの説明

leftプロパティとは

左から配置する距離を決める

ために使います。

ボックス要素」に対して左から配置する距離を設定をしていきます。

ボックス要素とは以下のものがあります。

<div>
<h1>〜<h6>
<table>
<p>
・・・等

上記のボックス要素にleftプロパティを使えますが、positionプロパティも併用する必要があります。

positionプロパティを設定せずに、leftプロパティを使うことはできません。positionプロパティとleftプロパティにはどのような関係があるのか、この記事内で説明していきます。

leftプロパティで利用できる値

leftプロパティでは以下の値を使うことができます。

説明
length pxやemなどの単位を入れて左からの距離を指定します。
percentage ボックスの幅や高さに応じて数値が変わる値です。単位は%を使います。
auto autoは初期値であり、ブラウザにより自動的に配置位置が計算されます。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox  完全対応
Internet Explorer  完全対応
Opera  完全対応
Safari  完全対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome 完全対応
Android版Firefox  完全対応
Android 版 Opera  完全対応
iOS版Safari  完全対応
Samsung Internet  完全対応

leftプロパティの基本的な使い方

leftプロパティの使い方

leftプロパティの設定をするとどうなるか、以下のコードを交えて説明していきます。

See the Pen
leftプロパティの使い方
by 吉井大輝 (@DaiW)
on CodePen.

leftプロパティの値によって、左からボックス要素の配置を指定します。

ですが、配置を指定するには配置位置の基準となるポイントを決めなければいけません。

基準位置を設定するために使うのがpositionプロパティです。

positionプロパティの値によって、基準位置が変わりますが、leftプロパティを設定するには必要になります。

leftプロパティを使う場合positionプロパティの設定を忘れずにいましょう。

leftプロパティの応用的な使い方

absoluteは親ボックスにstatic以外の値があると基準位置が変わる

positionプロパティのabsoluteは、親ボックスにstatic以外の値があるかないかで基準位置が変わります。

実際にどのように変わっているのか以下のコードを見ていきましょう。

See the Pen
positionプロパティでabsoluteを指定した場合
by 吉井大輝 (@DaiW)
on CodePen.

まず、親ボックスにstatic以外の値が指定されていないのが以下のコードです。

親ボックスとなるのが、「.box1」という文字列です。

margin-leftというプロパティで、.box1を左から40px移動させています。

ですが、positionプロパティの設定がありません。その場合、親ボックスに内包されている「.text1」を

としたならば、ウィンドウが基準位置となります。

結果、leftプロパティの値が0なので、ウィンドウの左端にくっついている状態でブラウザに反映されます。

次に、static以外の値が指定されているのが以下のコードです。

上記のコードでは、親ボックスとなる「.box2」にrelativeというpositionプロパティの値が記述されています。

その場合、absoluteの値を指定した「.text2」の基準位置は、親ボックスである「.box2」になります。

「.text1」と同じく「.text2」のleftプロパティの値は0ですが、ウィンドウではなく、「.box2」の左端にくっついています。

absoluteで、親ボックスを基準位置にしたいとき、positionプロパティの値をrelativeにすることが多いです。

親ボックスを基準位置したいとき、親ボックスのpositionプロパティにrelativeを使うことを覚えておくと良いでしょう。

まとめ

いかがでしたでしょうか?

今回は、leftプロパティの基礎と応用的な使い方についてご紹介しました。

leftプロパティを使えるようになるには、positionプロパティもしっかりと覚える必要があります。

ですが、leftプロパティを使う上で重要なポイントやコードについて解説しているので、参考にすれば設定することができるでしょう。

leftプロパティの設定をするとき、役立ててもらえると幸いです。

参考文献:MDN web docs|leftプロパティ : CSS のプロパティで、位置指定要素positioned elementの水平位置の決定に関与します。