ホーム>HTMLリファレンス(アルファベット検索)>leftプロパティ
left プロパティ …要素の左からの位置を指定する
使用プロパティ
|
left: 値; |
対象となる
要素 |
position プロパティにより、位置が定められる要素 |
継承 |
しない
|
値 |
単位付きの長さ、% (パーセンテージ)
、auto (自動的に調整) |
|
|
解説
left プロパティを使えば、ボックスの左からの配置位置を指定することができます。このプロパティを使用する場合、必ず position プロパティで基準となる位置を設定する必要があります。配置位置を指定するプロパティは、left プロパティの他に top、bottom、right プロパティがあります。
なお、値に「auto」を指定すると position プロパティを使用しない場合と同様に、自動的に配置されます。また、この「auto」が初期値です。
|
使用例
記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>
<!--スタイルシート-->
<style type="text/css">
div {
width: 500px;
height: 300px;
background-color: coral;
position: absolute;
}
.sample1 {
position: absolute;
top: 50px;
left: 50px;
background-color: gray;
}
.sample2 {
position: absolute;
top: 150px;
left: 250px;
background-color: gold;
}
</style>
</head>
<!--ページの本文-->
<body>
<div>
<span class="sample1">親要素の左上を基準として、上から50px、左から50pxの位置に指定しています。</span>
<span class="sample2">親要素の左上を基準として、上から150px、左から250pxの位置に指定しています。</span>
</div>
</body>
</html> |
|
[ブラウザでの表示例]
HOME PAGE ZERO ガイド |
要素の左上を基準として、上から50px、左から50pxの位置に指定しています。
要素の左上を基準として、上から150px、左から250pxの位置に指定しています。
|
△ページトップへ
ホームページ初心者ガイド|
HTML|
CSS|
ホームページお役立ち情報|
ホームページレベルアップ情報|
その他