rightプロパティ。
CSSに於けるボックスの右端位置・topプロパティに関する解説です。
rightプロパティとは。
rightプロパティは、ボックスの右端位置です。
positionプロパティにstatic値以外を指定しているセレクタに対してのみ有効です。
値の意味はpositionプロパティの値により以下のようになります。
relative- 当該要素の右端を、本来表示されるべき位置の右端から指定された値だけ左方向にずらします。
absolute- コンテナブロックの右端を基準に、指定された値だけ左に当該要素の右端を配置します。
コンテナブロックとは、当該要素の上位要素で、一番近い
static値以外の値のpositionプロパティを指定された要素ブロックです。- 但し、該当する上位要素がない場合は、ページ全体がコンテナブロックとなります。
つまり、
- positionプロパティで
static値以外を指定している上位要素があれば、一番近い要素の右端を基準点とします。 - positionプロパティで
static値以外を指定している上位要素が無い場合は、ページの右端を基準点とします。
fixed- 表示メディアでの右端から指定された値だけ左に当該要素の右端を配置します。
rightプロパティの記述例。
例えば、LOGOと言うIDを与えられた任意の要素を、画面の左端、上端に表示したい(但し固定しない)場合は、
#LOGO {position: absolute;top: 0;right: 0;}
と記述します。
rightプロパティに関する注意事項。
rightプロパティの仕様上の注意。
実際の配置方法について。
leftプロパティを用いた場合、以下のプロパティの値から適切な表示になるようにします。
- leftプロパティ
- rightプロパティ
- 左右の余白の幅(margin-leftプロパティ及びmargin-rightプロパティ)
- 左右の枠線の幅(border-left-widthプロパティ及びborder-right-widthプロパティ)
- 左右のパディングの幅(padding-leftプロパティ及びpadding-rightプロパティ)
- 要素の幅(widthプロパティ)
具体的には、
- r - l = ml + mr + bl + br + pl + pr + w
- r = leftプロパティ
- l = rightプロパティ
- ml 及び mr = margin-leftプロパティ 及び margin-rightプロパティ
- ml 及び mr = border-left-widthプロパティ 及び border-right-widthプロパティ
- bl 及び br = border-left-widthプロパティ 及び border-right-widthプロパティ
- pl 及び pr = padding-leftプロパティ 及び padding-rightプロパティ
- w = widthプロパティ
と言う等式を満たすように配置されます。
特に、
- leftプロパティ
- rightプロパティ
- margin-leftプロパティ及びmargin-rightプロパティ
- widthプロパティ
には、auto値を取る事が出来ますが、その場合値の代わりに代数を入れると考えられます。
- 例えば、margin-leftプロパティが
auto値であれば、上記の式は、- r - l = x + mr + bl + br + pl + pr + w
と言う一元方程式になり、この式を解いた結果を反映させれば良い事になります。
しかしながら、これらのプロパティが全部auto値以外の値であった場合、上記の式の成立、すなわち適切な配置が不可能になってしまいます。
このため、仕様では、これら五つのプロパティが全部auto値以外の場合、rightプロパティの値を無視する、すなわちauto値と見なして配置します。
尚、二つ以上のプロパティがauto値の場合、上記の式は二元以上の方程式となり解が一意的でなくなりますが、仕様では二つ以上の値がauto値の場合についても、解法を明確に規定しております。
また、書字方向が左から右となっている言語環境(日本語や英語など大多数の言語が該当)に於いて、
- 横幅が確定している要素(画像などの置換要素やwidthプロパティで横幅が指定されている要素)
- 且つ、有効な値を指定されたleftプロパティも併せて指定されている
場合は、rightプロパティは無効となります。
これは、左端と右端を指定すると、横幅が合わなくなってしまうからです。
同様に、書字方向が左から右となっている言語環境に於いて
- positionプロパティで
relative値が指定されていて、 - 且つ有効な値を指定されたleftプロパティも併せて指定されている
場合も、ポジショニング前に要素の横幅が算出されるため、rightプロパティは無効となります。
rightプロパティの実装上の注意。
インターネットエクスプローラ 4.xでの注意事項。
ネットスケープ 4.x及びインターネットエクスプローラ 4.xにはrightプロパティは実装されておりません。
WAP 2.0での注意事項。
WAP 2.0では、rightプロパティは定義されておりません。