右から配置位置を指定するrightプロパティは、positionプロパティと併用して使います。
設定するときに気を付けるポイントがいくつかありますが、CSSを勉強中の方にとって
が分からない方がいるでしょう。
設定をできるようになるためには、基礎をしっかりと身に付ける必要があります。
そこで今回は、rightプロパティの
・応用的な使い方
について説明していきます。
目次
rightプロパティとは
rightプロパティの読み方
rightは、「ライト」と読みます。
正しいという意味もある言葉ですが、CSSでのrightは、右に関する設定に使われます。
rightプロパティの説明
rightプロパティとは
ために使います。
rightプロパティの設定は、「ボックス要素」に対して行います。
ボックス要素には、見出しに使うh1〜h6タグや、囲うことでグループ化できるdivタグなどがあります。
しかし、rightプロパティの設定だけでは、サイトに反映されません。
ボックス要素にrightプロパティに加えてpositionプロパティの設定をすることで、右からの配置位置を指定できます。
なぜpositionプロパティが必要になるのか、この記事の「rightプロパティの使い方」で説明していきます。
rightプロパティで利用できる値
rightプロパティでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| length | lengthは、右からの配置位置の指定するのに、数値にpxやemなどの単位を入れます。 |
| percentage | percentageは、パーセントの値によって右から移動する距離の割合が決まります。 |
| auto | 他のプロパティなどの設定に応じて、自動的に配置位置が計算されます。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
rightプロパティの基本的な使い方
rightプロパティの使い方
rightプロパティとpositionプロパティの設定をしたコードを以下に記載します。
See the Pen
rightプロパティの使い方 by 吉井大輝 (@DaiW)
on CodePen.
rightプロパティを設定するためには、positionプロパティの基準となる位置の設定が必要です。
基準位置が分からなければ、どこから右に移動するのか指定ができません。
positionプロパティの基準位置も値によって変わってくるので、まず値について知りましょう。
positionプロパティの値をrelative
positionプロパティの値をrelativeにした場合、相対位置に配置します。
分かりやすいように「rightプロパティの使い方」でご紹介したコードを元に説明していきます。
まず、上記のコードの「.box2」にpositionプロパティの値であるrelativeとrightプロパティを設定していない状態を見ていきましょう。
See the Pen
positionプロパティを設定していない状態 by 吉井大輝 (@DaiW)
on CodePen.
設定していないと上記のように「box1」と「box2」は縦横共に綺麗に整った状態になります。
ですが、
|
1 2 3 4 |
.box2{ position:relative; right:30px; } |
上記のようにpositionプロパティとrightプロパティの設定を加えた場合、box2はrelativeを指定する前の位置を基準位置として30px右から配置位置を移動します。
relativeを指定してrightプロパティを使う際、参考にしてください。
rightプロパティの応用的な使い方
rightプロパティとpositionプロパティを組み合わせて右に固定する
ボックス要素を右側に固定した設定を実際に見ていきましょう。
See the Pen
rightプロパティ固定 by 吉井大輝 (@DaiW)
on CodePen.
「.box」に対してpositionプロパティのfixedという値を入れます。
fixedは、ウィンドウを基準位置として、設定した位置に固定します。因みに固定すると、スクロールをしても設定した位置から動かなくなります。
「.box」を基準位置から右側に固定するために使うのが、rightプロパティです。
rightプロパティの値を10pxにしているので、右から10px移動したところに固定されます。
positionプロパティのfixedと、rightプロパティを組み合わせることによって、右側に固定できるので試してみてください。
まとめ
いかがでしたでしょうか？
今回は、rightプロパティの基礎と応用的な使い方についてご紹介しました。
rightプロパティを設定したコードをいくつか記載しているので、CSSを学び始めた初心者の方の参考になるでしょう。
rightプロパティの学習にぜひ活用してもらえたら幸いです。
参考文献：MDN web docs｜rightプロパティ :位置指定要素positioned elementsの水平位置の決定に関与します
