right プロパティ

最終更新：2026-09-13

right right プロパティ

right プロパティは、配置された要素がその包含ブロックの右端から左方向にどれだけ離れているかを定義します。static 以外の配置要素にのみ適用され、通常は absolute または fixed 配置と組み合わせて要素を右側に配置するために使用されます。

カテゴリ
初期値	auto
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS2
状態	標準

📝 構文

right: auto | <length> | <percentage>;

⚙️ 値

値	タイプ	説明
`auto`	キーワード	オフセットなし。
`<length> \| <percentage>`	タイプ	包含ブロックの右端からのオフセット。

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
right	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

注意： right は static 以外の配置要素にのみ影響します。position:static には効果がありません。

ヒント： パーセンテージは包含ブロックの幅を基準に計算されます。left と right を両方設定すると、要素の幅が伸びてその間の空間を埋めます。

❓ よくある質問

Qleft と right の両方を設定するとどうなりますか？

Awidth のない absolute または fixed 要素の場合、要素は left と right の間の空間を埋めるように伸び、適応的な幅のレイアウトになります。例えば .bar { position:absolute; left:0; right:0; } は水平方向いっぱいに広がります。width が設定されている場合、LTR テキストでは left が優先され、right は無視されます。これはオーバーレイや全幅バーに便利なパターンです。

Q優先順位が高いのは right と left のどちらですか？

A書字方向に依存します。英語や中国語のような左から右へ書く LTR では、両方設定されていると left が優先され right は無視されます。RTL（アラビア語などの右から左へ書く）では right が優先されます。さらに、width が設定されていない場合は両方が連携して要素を伸ばします。この規則によりレイアウトは書字方向に従いますが、方向に依存する動作である点に注意が必要です。

Qright が機能しないのはなぜですか？

A一般的な理由：1つ目は、要素の position が static であることです（right は配置要素にのみ影響します）。2つ目は、width と left の両方が設定されていて、LTR では left が優先されるため right が無効になることです。3つ目は、基準の誤解です。absolute は最も近い配置祖先の右端を基準とし、fixed はビューポートの右端を基準とします。まず position と競合するプロパティを確認し、オフセットの方向を確認してください。

Q要素をコンテナの右側に固定するにはどうすればよいですか？

A親に position:relative、子に position:absolute; right:0 を設定します（垂直位置には任意で top または bottom を使用）。これで子は親の右端にぴったり付きます。代わりにビューポートの右側に固定するには、position:fixed; right:20px; top:20px を直接使用します。これは「トップへ戻る」ボタンや浮動チャットウィジェットによく使われます。複数の浮動レイヤーが重なる場合は z-index を追加してください。