right

ライト（レイアウトとボックスモデル）

意味右辺の位置

rightとは？

rightプロパティは、絶対位置または相対位置に配置された要素の右辺の位置を指定するために使用します。このプロパティは、要素がpositionプロパティで'absolute', 'relative', 'fixed', 'sticky'のいずれかに設定されている場合にのみ動作します。

rightの具体的な使い方

絶対位置で右からの距離を指定する例

<style>
    #box {
        position: absolute;
        right: 20px;
        background-color: tomato;
    }
</style>

<div id='box'>
    この要素は親要素の右端から20ピクセル離れた位置にあります。
</div>

idが'box'の要素を親要素の右端から20ピクセル離れた位置に配置します。

相対位置で右下に要素を配置する例

<style>
  .container {
    position: relative;
    width: 300px;
    height: 200px;
    border: 1px solid black;
  }
  .item {
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: blue;
    color: white;
    padding: 10px;
  }
</style>

<div class="container">
  <div class="item">右下に配置</div>
</div>

右下に要素を配置する例。親要素に対して相対的に位置を指定しています。

rightに関するよくある質問

Q. rightプロパティはどんな時に使う？

A. 要素を右側に配置したい時や、親要素の右端からの距離を指定したい時に使います。position属性が設定されている要素に対して使用します。

Q. rightの値にマイナスは使える？

A. はい、使えます。マイナス値を使うと、要素は指定した分だけ右側にはみ出します。例えば、right: -20px; とすると、要素は親要素の右端から20px右側に移動します。

Q. rightとleftを同時に指定できる？

A. 同時に指定することはできますが、通常は避けるべきです。両方指定した場合、leftが優先されることが多いですが、ブラウザによって動作が異なる可能性があります。一般的には、どちらか一方のみを使用することをお勧めします。

rightが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのrightやmargin-right、bottom、vertical-align、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。