right:位置指定の条件に応じて右からの距離を決定する
初期値 | auto |
適用対象 | 位置指定された要素 |
継承 | しない |
アニメーション | length値、パーセント値、calc(); |
対応ブラウザ | caniuseで確認 |
rightプロパティの説明
right
は、位置指定された要素の包含ブロックの右辺からの距離を指定します。これは、対象となる要素にposition
が与えられており、かつその値がstatic
以外の場合に有効となります。
この機能の振る舞いは位置指定の状態に影響を受けます。具体的な特徴は以下の通りです。
position
の値がabsolute
またはfixed
の場合、right
は包含ブロックの右辺からの距離を決定しますposition
の値がrelative
の場合、right
は親要素の右辺から左へ移動する量を決定しますposition
の値がsticky
の場合、right
は粘着する包含ブロックの右辺からの位置を決定しますposition
の値がstatic
の場合、right
は無効になります
位置指定に関するプロパティには以下のものがあり、これを複数組み合わせて使用します。
- 上からの距離:
top
プロパティ - 右からの距離:
right
プロパティ - 下からの距離:
bottom
プロパティ - 左からの距離:
left
プロパティ - 重なる順序 :
z-index
プロパティ
rightに指定できる値
- auto
- 既定値に従います。
left
が指定されていた場合は、その値が採用されます。 - <length>
- 包含ブロックの右辺との距離を数値と長さの単位で指定します。一般的にはpxやemを使用します。
- <percentage>
- 包含ブロックの幅に対する割合で配置位置を指定します。
- initial
- 初期値を表す共通のキーワードです。
- inherit
- 親要素の値を継承する共通のキーワードです。
- revert
- プロパティの値がその時点で変更がなければ、他のスタイルにさかのぼって値を参照する共通のキーワードです。
- unset
- プロパティの値をリセットして親要素の継承値、それ以外は初期値を設定し直す共通のキーワードです。
rightの使い方とサンプル
right
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
right: auto;
/* <length>値 */
right: 10px;
right: -10px;
right: 1.8em;
right: 5vw;
/* <percentage>値 */
right: 10%;
right: -10%;
/* グローバル値 */
right: inherit;
right: initial;
right: revert;
right: unset;
それでは簡単な例を見てみましょう。包含ブロックの中に複数の要素を配置し、それぞれの位置を調整すると以下のように表示されます。
CSS
#sample_box {
position: relative;
width: 240px;
height: 200px;
background-color: #ccc;
}
div > div {
position: absolute;
width: 50px;
height: 50px;
}
#item1 {
top: 10px;
right: 10px;
background-color: #fc605b;
}
#item2 {
top: 4em;
right: 4em;
background-color: #76fc5b;
}
#item3 {
bottom: 50%;
right: 50%;
background-color: #5b96fc;
}
HTML
<div id="sample_box">
<div id="item1">1</div>
<div id="item2">2</div>
<div id="item3">3</div>
</div>
表示確認
位置指定をした要素が重なる場合は、カスケードの優先順位が高い方が手前に表示されます。
CSS
#sample_box {
position: relative;
height: 240px;
padding: 5px;
border: 1px solid #666;
}
div > div {
position: absolute;
min-width: 200px;
height: 100px;
padding: 5px;
border: 1px solid #999;
}
#item1 {
top: 30px;
right: 30px;
background-color: #ffcccc;
}
#item2 {
top: 100px;
right: 100px;
background-color: #ccccff;
}
HTML
<div id="sample_box">
sample_box
<div id="item1">
item1<br>
・top:30px;<br>
・right:30px;<br>
</div>
<div id="item2">
item2<br>
・top:100px;<br>
・right:100px;<br>
</div>
</div>
表示確認
rightに関連するCSSプロパティ
要素の表示や配置方法 | |
---|---|
bottom | 位置指定で配置された要素の底辺からの距離を指定する |
break-after | ボックスの終了時にページやカラムをどのように区切るかを指定する |
break-before | ボックスの開始前にページやカラムをどのように区切るかを指定する |
break-inside | ボックスの途中でページやカラムをどのように区切るかを指定する |
clear | フロート(float)の回り込みを解除する |
clip | 要素を切り抜いて可視化する範囲を指定する |
box-decoration-break | 要素の断片が複数の行やページに渡る場合に装飾の表示の仕方を指定する |
display | 要素の表示形式を指定する |
float | 要素を右または左へ寄せて配置する |
left | 位置指定で配置された要素の左辺からの距離を指定する |
overflow | 要素からはみ出した内容の表示方法をまとめて指定する |
overflow-wrap | 長い単語の折り返し方法について指定する |
overflow-x | 要素からはみ出した内容の水平方向の表示方法を指定する |
overflow-y | 要素からはみ出した内容の垂直方向の表示方法を指定する |
position | 要素の配置方法について相対的か絶対的にするかを指定する |
right | 位置指定で配置された要素の右辺からの距離を指定する |
vertical-align | ボックス内のインライン要素に縦位置を揃える基準を指定する |
visibility | 要素の領域を残したまま表示・非表示を指定する |
z-index | 要素の重なり順序を指定する |