HTML/CSSの右寄せのやり方を完全解説｜text-alignと他の指定の違い

プログラミング

公開日: 2026/03/19

HTML/CSSの右寄せのやり方を完全解説｜text-alignと他の指定の違い

※この記事にはプロモーションを含みます

はじめに

HTMLで要素やテキストを右寄せしたいと考えたとき、多くの方が「text-alignだけでよいのか」「CSSでの指定方法は他にもあるのか」と迷います。

実際、右寄せの方法は対象要素によって異なり、テキスト・インライン要素・ブロック要素では適切な指定が変わります。本記事では、HTML 右寄せの基本から応用までを体系的に整理し、実務で迷わないための判断基準と具体的なコード例を分かりやすく解説します。

HTML 右寄せの基本概念

右寄せとは何か

右寄せとは、要素やテキストを親要素の右端に揃えて配置することを指します。Webページでは、ナビゲーションメニュー、ボタン、注釈テキストなどを右側に配置するケースが多くあります。

ただし「何を右寄せするのか」によって、指定方法は異なります。テキストそのものを右に揃えるのか、ブロック要素全体を右側に移動させるのかによって、使用すべきCSSプロパティが変わります。この違いを理解しないまま実装すると、意図通りに表示されない原因となります。

HTMLとCSSの役割の違い

HTMLは構造を定義する言語であり、見た目や配置を制御するのは主にCSSの役割です。現在では、HTMLの属性で配置を指定するalign属性などは非推奨となっており、CSSで制御するのが標準的な方法です。

右寄せを実現するためのCSSプロパティは主に以下の3種類です。

text-align: right

テキスト・インライン要素の揃え方を制御

margin-left: auto

ブロック要素を右に寄せる

display: flex + justify-content: flex-end

フレックスボックスによる配置制御

text-alignを使った右寄せ

text-alignの基本構文

text-alignは、インライン要素やテキストの水平方向の配置を指定するプロパティです。

.selector {
  text-align: right;
}

主な値は以下の通りです。

left
center
right
justify

text-alignの種類

text-alignは「中身の揃え方」を制御するものであり、要素そのものの位置を移動させるものではありません。

テキストを右寄せする方法

段落や見出しなどのテキストを右寄せする場合は、親要素にtext-align: right;を指定します。

<p class="right-text">このテキストを右寄せします。</p>

.right-text {
  text-align: right;
}

親要素に指定する際の注意点

text-alignは子要素に継承される特性があります。そのため、親要素に指定すると内部のインライン要素すべてに影響します。

例えば、div全体にtext-align: right;を指定すると、その中のテキストやインライン要素も右寄せになります。意図しない要素まで右寄せされないよう、適用範囲を明確に設計することが重要です。

ブロック要素を右寄せする方法

marginを使った右寄せ

ブロック要素そのものを右側に配置したい場合は、marginを利用します。

.box {
  width: 300px;
  margin-left: auto;
}

margin-left: auto;を指定することで、要素は右側に寄ります。これは、残りの余白を左側に自動配分する仕組みを利用した方法です。

中央寄せは「margin: 0 auto;」ですが、右寄せの場合は左マージンのみをautoにする点がポイントです。

flexboxを使った右寄せ

近年のレイアウト設計では、flexboxを使用するケースが一般的です。

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

justify-content: flex-end;を指定することで、子要素を右側に配置できます。複数要素をまとめて右寄せしたい場合や、レスポンシブ対応を考慮する場合にはflexboxが非常に有効です。

右寄せ指定のよくある間違い

効かない原因と対処法

右寄せが効かない主な原因は以下の通りです。

displayの指定が適切でない
widthが未指定で効果が分かりにくい
text-alignとmarginの役割を混同している

例えば、ブロック要素にtext-align: right;を指定しても、要素自体は移動しません。 目的に応じて適切なプロパティを選ぶ必要があります。

widthとの関係性

marginによる右寄せでは、要素のwidthが重要になります。幅が100%の場合、右寄せしても見た目は変わりません。

.box {
  width: 300px;
  margin-left: auto;
}

このように幅を明示することで、右寄せ効果が明確になります。レイアウト設計時は、widthと配置指定をセットで考えることが重要です。

状況別おすすめの右寄せ指定方法

テキストの場合

テキストを右に揃えたい場合は、text-align: right;が最適です。シンプルで可読性が高く、意図も明確です。

注釈文
日付表示
署名部分

など、テキスト単体の調整に適しています。

レイアウト全体を調整する場合

複数要素を右寄せしたい、またはレスポンシブ対応を前提とする場合はflexboxを推奨します。

横並び要素を右寄せしたい
画面幅に応じて配置を変えたい
将来的な拡張を考慮したい

このようなケースでは、display: flex;とjustify-contentの活用が最適解となります。

まとめ

HTML 右寄せの実装方法は、対象が「テキスト」なのか「ブロック要素」なのかによって大きく異なります。 text-alignはテキストやインライン要素の揃えを制御するためのプロパティであり、ブロック要素自体を右に配置する場合はmarginやflexboxを使用します。重要なのは、それぞれの役割を正しく理解し、目的に応じて使い分けることです。

実務においては、単に動けばよいのではなく、再現性と保守性を備えた実装が求められます。体系的にCSS設計を学び、実践的なWeb制作スキルを高めたい方には、WEBMASTERSのプログラミングスクールがおすすめです。実務で通用するWeb制作スキルを基礎から身につけられるカリキュラムが整っています。

正しい基礎理解が、安定したレイアウト設計と高品質な実装につながります。

この記事を
シェアする！