CSS3: right プロパティ - 要素の右からの配置位置（距離）

■ 概要

項　　目説　　明
記述形式 セレクタ {right: 値 }
値 の形式 auto | 数値　（長さ，%）
初 期 値 auto
対応ブラウザー C2+ / e5.5+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+
適用可能な要素 ポジショニングされた要素
継　　承 しない

■ 解説

rightプロパティ は，要素の 右からの配置位置（距離）を指定します。　ただし、右からの配置位置（距離）とは、基準となる要素やウィンドウ表示部の右端から配置する要素の右端までの距離を指します。

rightプロパティで指定するのは基準位置からの距離のみです。 実際に表示位置を決めるには、positionプロパティを用いて計算方法（基準位置）を指定する必要があります。　さらに、 positionプロパティの値が static のときには rightプロパティ設定は無効になります。

指定できる値の形式は，以下のとおりです。

値説　　明
auto ブラウザーの仕様に任せます。　（初期値）
長　　さ 基準となるボックスやウィンドウの右端の位置からの距離を指定します。
パーセント（%） 基準となるボックスやウィンドウの高さを１とした百分率でオフセットを指定します。　負の値も使用可能です。

■ 使用例（ right プロパティの利用）

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css">
<!-- 
   div.sample { width: 240px; height: 160px; position: relative; }
   span.sample1 { position: absolute; top: 15px; left: 15px; }
   span.sample2 { position: absolute; bottom: 15px; right: 15px; }
-->
</style>
HTML
<body> ～ </body>		 
<div class="sample">
   <img src="logo.gif" alt="大阪教育大学ロゴ" width="240" height="160">
   <span class="sample1">左上を基準として配置</span>
   <span class="sample2">右下を基準として配置</span>
</div>

ブラウザー 表示例
大阪教育大学ロゴ 左上を基準として配置 右下を基準として配置

■ 備考

【参考ページ】