CSSでposition:relativeを使った右寄せの方法と応用

「この要素を右に寄せたいだけなのに、なぜか思ったところに収まらない」——コーディングをしていると、けっこう出くわす場面です。私も昔はpositionプロパティであれこれ試して、動いたコードをそのまま備忘録に残していました。

この記事では、position:relativeで右寄せする方法を仕組みから確認したうえで、「そもそも右寄せなら、こっちのほうが素直では?」という選択肢まで含めて整理します。使い分けが分かると、レイアウトが一気に組みやすくなります。

[position:relative]で右寄せする仕組み

まず、position:relativeがどう動くのかを押さえておきます。ここが分かると、なぜ右寄せに使えるのかも自然と見えてきます。

MDNの解説によると、position:relativeを指定した要素は、top/right/bottom/leftの値に応じて本来の位置からずれて表示されますが、レイアウト上はもとの場所を占有したままです。つまり、見た目だけがずれて、まわりの要素は「その要素がまだ元の位置にいる」ものとして配置され続けます(出典: MDN「position」)。

[position:relative]で中央寄せにする方法

この性質を利用すると、leftとtransformの組み合わせで中央寄せができます。

.position-center {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

leftで要素の左辺を親の中央(50%)まで動かし、transform:translateX(-50%)で要素自身の幅の半分だけ左へ戻す。これで要素の中心が親の中心にそろいます。要素の幅が分からなくても効くのがポイントです。

[position:relative]で右寄せにする方法

中央寄せの考え方を右端に応用したのが次のコードです。

.position-right {
  position: relative;
  left: 100%;
  transform: translateX(-100%);
}

leftで左辺を親の右端(100%)まで動かし、transform:translateX(-100%)で要素の幅ぶんだけ左へ戻す。結果として右辺が親の右端にそろい、要素が右寄せされます。

ただし前述のとおり、relativeはもとの占有スペースを残したまま見た目だけをずらす方式です。要素は元の位置に「穴」を空けたまま右へ動くので、レイアウトを本気で右へ寄せたいというより、位置を少し微調整したいときに向いた挙動だと理解しておくと安全です。

右寄せなら、まずこちらを検討したい

正直なところ、「単純に右へ寄せたい」だけなら、position:relativeのleft+transformは少し遠回りです。用途に合った、もっと素直な方法があります。

テキストやインライン要素なら text-align:right

文章やインライン要素、inline-block要素を右に寄せるだけなら、親側に一行書けば済みます。

.box {
  text-align: right;
}

ブロック要素やレイアウトなら Flexbox

要素を並べて右へ寄せる、いわゆるレイアウト目的ではFlexboxが本命です。MDNでも、フレックスコンテナの子をまとめて右端にそろえるにはjustify-content:flex-endを使う、と示されています(出典: MDN「Aligning items in a flex container」)。

.box {
  display: flex;
  justify-content: flex-end;
}

「左のメニュー群はそのまま、特定の項目だけ右に離したい」ときは、その項目にmargin-left:autoを付けます。autoマージンが左側の余白をすべて吸収して、その要素以降を右へ押し出してくれます。ナビゲーションバーで定番のパターンです。

.box {
  display: flex;
}
.push {
  margin-left: auto;
}

なお、単独のブロック要素を右へ寄せたいだけなら、flexを使わずmargin-left:autoでも寄せられます(幅の指定があること)。

二次元のレイアウトなら Grid

行と列の両方を制御したい場合はGridが扱いやすく、justify-items:endやjustify-self:endでセル内の要素を右寄せできます。行方向・列方向をまとめて設計したいときの選択肢です。

position:relativeが向く場面・向かない場面

最後に、使い分けの目安を整理しておきます。

relativeが向く:要素をレイアウトから外さずに、本来の位置から少しだけずらしたいとき。absoluteな子要素の基準(位置の起点)にしたいときも定番です。
relativeが向かない:要素そのものをきれいに右へ寄せたいとき。もとの占有スペースが残るぶん、意図しない余白や重なりの原因になりがちです。この用途はtext-alignやFlexbox、Gridのほうが素直です。

もう一点、実装上のポイントも。子要素の位置を親基準で決めたいときは、親にposition:relativeを指定しておくと、子のabsoluteが親を起点に動くようになります。あわせて、デバイス幅で崩れないようメディアクエリでの調整も忘れずに。

右寄せは「何を右に寄せたいか」で最適解が変わります。テキストならtext-align、要素の並びならFlexbox、微調整ならposition:relative——この対応を頭に入れておくと、迷わず一発で決められます。