rightとは
- ここで説明する right とは次の語句からなるCSSのプロパティです。
- right
- 読み: ライト
意味: 右、右側
rightプロパティの概要
このプロパティは、位置指定要素の水平位置を指定することができます。
位置指定要素とは position プロパティによって基準位置を指定された要素のことをいいます。
この right は、主に position が absolute 又は fixed の場合に使用することが多く、 このキーワードを設定している場合は、位置指定要素と包含ブロックの右辺との距離を指定します。
position が relative に設定されている場合は、位置指定要素の元の位置から左方向へ移動することになるので、 left を使用することをお勧めします。 しかし、この場合でも right に負の値を設定することで left と同様の結果を表すことができます。
構文
サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。
セレクター{right: 設定値;}実機サンプルとサンプルコード
ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。
ここでは、position プロパティに relative キーワードを設定したdiv要素を題材にします。 relative は自身の元の位置から相対計算による位置を決定するためのキーワードです。
初期値: auto
初期値の auto は、自動で位置を計算します。
これは left プロパティの設定の影響を受けます。
div{
background-color: ##pink;
border: thin solid ##red;
height: 200px;
width: 200px;
position: relative;
right: auto;
}数値: 単位付き数値でポジションを指定する
単位付き数値でポジションを指定した場合、その通りの水平位置に配置されます。
ここでは、position プロパティに relative キーワードを設定しているので、 left を使用することをお勧めしますが、 right でも負の値を設定することで使用することが可能です。
div{
background-color: ##pink;
border: thin solid ##red;
height: 200px;
width: 200px;
position: relative;
right: -100px;
}パーセンテージ値: パーセントでポジションを指定する
パーセントでポジションを指定した場合、親要素の width の値にパーセンテージ値を掛けた位置に配置されます。
ここでは、position プロパティに relative キーワードを設定しているので、 left を使用することをお勧めしますが、 right でも負の値を設定することで使用することが可能です。
div{
background-color: ##pink;
border: thin solid ##red;
height: 200px;
width: 200px;
position: relative;
right: -50%;
}グローバル値
rightプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。
- inheritは親要素の値の継承を促します。
- initialは値を初期値のautoに戻します。
-
unsetは継承の初期値に戻します。
※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクター{right: グローバル値;}補足説明
- 位置指定要素に適用可能
- 親要素の値を継承しない
まとめ
ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。
right: auto;
right: -20px;
right: -50px;
right: -25%;
right: -50%;
サンプル: ブロック要素