CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのrightプロパティとは？構文と使い方を実例付きで解説

CSSのrightプロパティは、positionが指定された要素の水平方向の位置を設定するために使用します。基準となる包含ブロックの右端から、要素の右端までの距離を指定できます。

なお、rightプロパティはpositionプロパティがstatic以外（relative・absolute・fixed・sticky）のときにのみ有効になる点に注意してください。

構文

right: auto|length|initial|inherit;

指定できる値

  • auto … 初期値。位置の計算をブラウザに任せます。
  • length … pxやemなどの単位で距離を指定します。負の値も指定可能です。
  • initial … プロパティを初期値に戻します。
  • inherit … 親要素の値を継承します。

例1：position:absoluteと組み合わせる

まずは、絶対配置（absolute）の要素にrightプロパティを適用する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    text-align: justify;
    text-justify: inter-word;
    color: white;
    background-color: orange;
    position: absolute;
    right: 90px;
}
</style>
</head>
<body>
<h2>デモ見出し</h2>
<div>これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。</div>
</body>
</html>

出力結果

CSSのrightプロパティとは？構文と使い方を実例付きで解説

この例では、オレンジ色のボックスが画面の右端から90px内側の位置に配置されます。

例2：position:relativeと組み合わせる

次に、相対配置（relative）の要素にright: 0pxを指定した例です。

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
    background-color: orange;
    width: 100px;
    position: relative;
    right: 0px;
    color: white;
}
</style>
</head>
<body>
<h1>詳細情報</h1>
<div class="demo">試験会場はABCカレッジの近くです。</div>
<div class="demo2">試験は午前11時に始まります。</div>
</body>
</html>

出力結果

CSSのrightプロパティとは？構文と使い方を実例付きで解説

right: 0pxの場合、要素は通常の位置から右方向には移動しません。

例3：負の値を指定する

rightプロパティには負の値も指定できます。次の例では、right: -100pxを指定しています。

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
    background-color: orange;
    width: 100px;
    position: relative;
    right: -100px;
    color: white;
}
</style>
</head>
<body>
<h1>詳細情報</h1>
<div class="demo">試験会場はABCカレッジの近くです。</div>
<div class="demo2">試験は午前11時に始まります。</div>
</body>
</html>

出力結果

CSSのrightプロパティとは？構文と使い方を実例付きで解説

負の値を指定すると、要素は通常の位置から右方向へ100px移動します。

まとめ

rightプロパティを使えば、要素の右側からの距離を直感的に制御できます。leftプロパティとの使い分けや、レスポンシブデザインでの活用方法もあわせて覚えておくと、より柔軟なレイアウトが実現できるでしょう。

  1. CSSのtext-justifyプロパティとは？使い方と各値の解説

    text-justifyプロパティとは CSSのtext-justifyプロパティは、text-alignプロパティにjustify(両端揃え)が指定されている場合に、テキストをどのような方法で均等割り付けするかを制御するためのプロパティです。単語間のスペースで調整するか、文字間のスペースで調整するかなどを細かく指定できます。 構文 text-justify: auto | inter-word | inter-character | none | initial | inherit; プロパティの値一覧 auto — ブラウザが最適な揃え方を自動的に判断します(既定値)。 inter-

  2. CSSでテキストを整形する方法｜主要プロパティとサンプルコードを徹底解説

    CSSを使うことで、テキストを見栄えよく整形し、読み手にとって魅力的なコンテンツを作成できます。この記事では、CSSでテキストのスタイルを設定する際に使用される主なプロパティについて、役割と使い方をわかりやすく解説します。 CSSの主なテキストフォーマット用プロパティ color（文字色） テキストの色を変更するためのプロパティです。カラーキーワード、16進数カラーコード、rgb()関数などで色を指定できます。 letter-spacing（文字間隔） 文字と文字の間隔を調整します。値を大きくすると字間が広がり、見出しなどにゆったりとした印象を与えられます。 line-height（行