right
ボックスの右からの配置位置を指定するプロパティ。
rightを指定することで、positionで指定する基準からの右からの位置を指定することができる。
値
| 数値で指定 | px、em、pt等の数値で指定する。 |
|---|---|
| none | 基準となる親ボックスに対する割合で指定する。 |
| auto | 初期値。 |
使用例 - サンプル(A) / サンプル(B) / サンプル(C)
サンプル(A)
[CSSの記述]
.sampleBox {height:50px; border:solid 1px #c00; position:relative; }
.sampleA { position:relative; right:20px; font-weight:bold; color:#f00; }
[HTMLの記述]
<div class="sampleBox"> <p class="sampleA">テキストテキストテキスト</p> </div>
[ブラウザ上の表示]
position:relativeの場合はこの位置
サンプル(B)
[CSSの記述]
.sampleBox {height:50px; border:solid 1px #c00; position:relative; }
.sampleA { position:absolute; right:20px; font-weight:bold; color:#f00; }
[HTMLの記述]
<div class="sampleBox"> <p class="sampleB">テキストテキストテキスト</p> </div>
[ブラウザ上の表示]
position:absoluteの場合はこの位置
サンプル(C)
[CSSの記述]
.sampleBox {height:50px; border:solid 1px #c00; position:relative; }
.sampleC { position:fixed; right:20px; font-weight:bold; color:#f00; }
[HTMLの記述]
<div class="sampleBox"> <p class="sampleC">テキストテキストテキスト</p> </div>
[ブラウザ上の表示]
position:fixedの場合はこの位置