leftプロパティ

TOPページに戻る > CSS

スポンサード リンク

leftプロパティ

要素に左からの表示位置を指定できます。positionプロパティといっしょに使います
positionプロパティの値がrelative、absolute、fixedの時、leftプロパティが有効になります
positionプロパティ値には要素を独立させて表示できるrelative、ページ内で自由に配置できるabsolute、ブラウザ画面の中で固定されて表示されるfixedがあります。初期値はstaticです(staticは表示位置の指定なし)
leftプロパティの値には、px、emなどの単位、パーセント、auto(自動配置)が使えます
leftプロパティは、topプロパティ、bottomプロパティ、rightプロパティと同時に指定できます

使い方(書式)

セレクタ { left: 値; }                                    

leftプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 全てのhtml要素 (positionプロパティも指定する)
子要素へのスタイルの継承 しない

leftプロパティの値 説明
単位 px、emなどの単位
% パーセンテージで指定。要素が表示できる幅に対しての割合
auto ブラウザが自動で配置する

positionプロパティの値 leftプロパティの基点
static leftプロパティで位置の指定はできない
staticは要素のレイアウトを独立させていないので位置指定はできないのです
relative 要素の元の位置を基点とした左からの位置
absolute ページの上部を基点とした左からの位置
fixed ブラウザの画面表示の左を基点とした左からの位置
fixedはIE6が未対応。※IE7から対応

実際の指定方法

.hogebox{ 
 width: 600px;        /* 親boxの幅 */
 height: 350px;       /* 親boxの高さ */
 position: relative;  /* 親boxをレイアウトから独立させる */
 border: solid 1px;   /* 枠線を表示 */
 text-align: left;    /* テキストを左寄せ */
 margin: 20px auto ;  /* 親boxを中央寄せ */
}

.hoge {
 position: static;    /* 通常の要素の表示 */
 border: solid 1px;   /* 枠線を表示 */
  }

.hoge2 {
 position: relative;  /* 元の位置を基点として表示位置を指定 */
 left:30px;           /* 元の位置の左から30pxの位置に表示 */
 border: solid 1px;   /* 枠線を表示 */
  }

.hoge3 {
 position: absolute;  /* 親要素内で自由に配置 */
 top:100px;           /* 親要素の上から100pxの位置に表示 */
 left:100px;          /* 親要素の左から100pxの位置に表示 */
 border: solid 1px;   /* 枠線を表示 */
  }
.hoge4 {
 position: fixed;     /* 要素の位置を固定表示 */
 top:20px;            /* ブラウザの画面表示の上から20pxの位置に表示 */
 left:10px;           /* ブラウザの画面表示の左から10pxの位置に表示 */
 border: solid 1px;   /* 枠線を表示 */
  }

html部分

<div class="hogebox">
<div class="hoge">position: static; 初期値です</div>
<div class="hoge2">position: relative; left:30px;元の表示位置から30pxずらしました</div>
<div class="hoge3">position: absolute; top:100px; left:100px;
<br>親ブロック要素の左から100px、上から100pxの位置に配置
<br>親ブロック要素にposition: relative;を指定し、
<br>子ブロック要素にposition: absolute;を指定すると
<br>親ブロック要素を基点にして子ブロック要素の位置を指定できます
</div>
<div class="hoge4"><img src="maru.gif" alt="" width="50" height="50"></div>
</div>

実際の表示

position: fixed;はページの左の画像を見ながらスクロールしてください
親ブロック要素
position: static; 初期値です
position: relative; left:30px;元の表示位置から30pxずらしました
position: absolute; top:100px; left:100px;
親ブロック要素の左から100px、上から100pxの位置に配置
親ブロック要素にposition: relative;を指定し、
子ブロック要素にposition: absolute;を指定すると
親ブロック要素を基点にして子ブロック要素の位置を指定できます




(C)2012 ホームページ作成無料