左からの位置を設定するのに使われるleftプロパティ。
positionプロパティも一緒に使う必要がありますが、CSS初心者の方の中に
という方がいるでしょう。
何事もまず基礎を知らないと設定ができる訳がありません。
そこで今回は、leftプロパティの
・応用的な使い方
について紹介していきます。
初心者の方にも設定できる簡単なコードも含めて説明していくので、ぜひ目を通してください。
目次
leftプロパティとは
leftプロパティの読み方
leftは、「レフト」と読みます。
左を意味する言葉で、CSSで設定するleftも左から距離を空けたいときなどで使われます。
leftプロパティの説明
leftプロパティとは
ために使います。
「ボックス要素」に対して左から配置する距離を設定をしていきます。
ボックス要素とは以下のものがあります。
<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以外の値が指定されていないのが以下のコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.box1{ width:300px; height:250px; background-color:#4169e1; margin-left:40px; } .text1{ width:50px; height:30px; background-color:#c0c0c0; position:absolute; left:0; } |
親ボックスとなるのが、「.box1」という文字列です。
margin-leftというプロパティで、.box1を左から40px移動させています。
ですが、positionプロパティの設定がありません。その場合、親ボックスに内包されている「.text1」を
|
1 2 |
position:absolute; left:0; |
としたならば、ウィンドウが基準位置となります。
結果、leftプロパティの値が0なので、ウィンドウの左端にくっついている状態でブラウザに反映されます。
次に、static以外の値が指定されているのが以下のコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.box2{ width:300px; height:150px; background-color:#4682b4; margin-top:10px; margin-left:40px; position:relative; } .text2{ width:50px; height:30px; background-color:#c0c0c0; position:absolute; left:0; } |
上記のコードでは、親ボックスとなる「.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の水平位置の決定に関与します。
