CSS3スタイル虎の巻

left

leftは、左側からの位置を指定するスタイルです。

解説

leftを指定する時は、positionの指定も必須です。
(positionの値はstatic以外)
positionで指定した位置を基準として、左側の位置が決定されます。

親要素の位置を基準としたい場合は、親要素にも positionの指定が必要です。
(値はstatic以外)

構文

構文は以下になります。

left: 値;

leftには以下の値が指定できます。

説明
数値pxやemなどの単位と共に数値で指定する
(例)左側から100pxの位置に表示する→left:100px;
割合割合で指定する
(例)親要素に対して左側から30%の位置に表示する→left:30%;
※親要素のサイズに対しての割合になります。
auto自動で位置を指定する(デフォルト)
(例)left:auto;

太字の値は初期値です。

サンプル

左側から50pxの位置に表示する


.d1{
  position:relative;
  height:60px;
}
.d2{
  position:absolute;
  left:50px;
}

<div class="d1">
  <div class="d2">あいうえお</div>
</div<
あいうえお

親要素に対して左側から30%の位置に表示する


.d1{
  position:relative;
  height:60px;
}
.d2{
  position:absolute;
  left:30%;
}

<div class="d1">
  <div class="d2">あいうえお</div>
</div<
あいうえお

備考

  • 同時にposition(値はstatic以外)を指定しないと、leftは有効になりません。
  • 横方向の位置を指定したい場合は left、rightを使用します。
  • 縦方向の位置を指定したい場合は top、bottomを使用します。

関連項目

  • position:要素を表示する時の基準位置を指定する
  • top:上側からの位置を指定する
  • bottom:下側からの位置を指定する
  • left:左側からの位置を指定する
  • right:右側からの位置を指定する