【実例コード付】CSSで要素を右寄せにする4つの方法すべて解説

（最終更新日：2023年6月）

✔対象となる方々

「CSSでテキストを右寄せにする方法が知りたい」
「CSSの右寄せのコードを見て学びたい」
「実践的なCSS右寄せの例が欲しい」

✔この記事を通して伝えたいこと

CSSの右寄せの基本理解
CSSを用いた右寄せの手法とその活用法
実用的なCSS右寄せの事例

当記事では、右寄せを行うための4つの主要な方法を学習します。

text-align
margin
float
flexbox

場面によって使い分けられるよう、ぜひ最後までご覧ください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/07/26 14:34:16時点 Amazon調べ-詳細)

text-alignを使った右寄せ

こちらでは、「text-align」を用いた右寄せについて解説します。

「text-align」を活用することで、特にテキストの右寄せを効率的におこなえます。

text-alignの仕組みと利点
テキストや画像を右寄せにする方法

text-alignの仕組みと利点

「text-align」はCSSのプロパティの一つで、テキストの配置を制御します。

設定できる値は以下のとおり。

left：左寄せ
center：中央寄せ
right：右寄せ
justify：両端揃え

右寄せの場合はこちらのようになります。

text-align: right;

この方法の利点は、コードがシンプルでわかりやすいこと、そして多くのブラウザで広くサポートされていることです。

テキストや画像を右寄せにする方法

「text-align」はテキストだけでなく、ブロック要素全体のインライン要素（テキストや画像など）の位置を変えられます。

<div style="text-align: right;">
  <p>This is a paragraph.</p>
  <img src="image.jpg" alt="Image">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

ただし「text-align」では、親要素（この場合divタグ）自体の位置は変わりません。

親要素自体を右寄せにするには、後述の「margin」や「float」、「flexbox」などの方法を利用します。

marginを使った右寄せ

「margin」を使用した右寄せの方法について解説します。

marginを適切に使用することで、要素全体の位置を右側に寄せるられるのです。

marginの仕組みと利点
marginで右寄せにする具体例

marginの仕組みと利点

「margin」は、要素外側の余白を制御するCSSプロパティ。

要素の位置を調整する際に、使われます。

以下が右寄せの方法です。

<style>
  .right-align {
    margin-left: auto;
    margin-right: 0;
  }
</style>

<div class="right-align">
  <p>This is a paragraph.</p>
  <img src="image.jpg" alt="Image">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

この方法だと、要素のサイズにかかわらず、動的に要素を右側に寄せられます。

これにより、レスポンシブデザインにおいても適切な配置が可能です。

marginで右寄せにする具体例

右寄せにするには、要素にmargin-left: auto;とmargin-right: 0;を適用します。

<div>タグで囲われたセクションを右寄せにするケースを考えましょう。

以下のようにCSSを設定します。

.right-align {
    margin-left: auto;
    margin-right: 0;
}

このCSSクラスをHTMLの要素に適用することで、その要素は右寄せになります。

<div class="right-align">このセクションは右寄せです。</div>

この設定では、画面サイズに関わらず、要素が画面の右側に寄せられます。

このテクニックは、ナビゲーションメニューやサイドバーなど、特定の要素をページの右側に配置したい場合に特に有用です。

floatを使った右寄せ

「float」を用いた、右寄せ手法をご紹介します。

特に、他の要素との回り込み効果を利用した右寄せを実現することが可能です。

floatの仕組みと利点
回り込みを活用した右寄せの方法

floatの仕組みと利点

CSSの「float」は、要素を左または右に寄せ、周囲の要素をその要素の周りに回り込ませる特性を持っています。

テキストが画像の周りを流れるようなレイアウトを作成できるものです。

<style>
  .image-container {
    float: right;
    margin: 10px;
  }
</style>

<div class="image-container">
  <img src="image.jpg" alt="Image">
</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed libero non odio placerat congue. 
  Fusce fringilla quam non elit dignissim, ut ultrices enim varius. Integer consequat nisl id nisi 
  pellentesque, nec semper tortor rutrum. Proin euismod augue at libero vestibulum, ut facilisis 
  lorem dictum. Cras a fringilla nisi, in commodo quam. In vel lectus non ex laoreet dignissim. 
  Mauris commodo lacinia velit, ac semper est ultricies at. Sed pellentesque erat ut metus 
  elementum, ac rutrum urna ullamcorper. Aliquam nec ipsum eget sem scelerisque consequat. 
  Etiam iaculis eros sed consectetur pretium. Nulla facilisi. 
</p>

画像や引用などの特定要素を、文書の流れから一部独立させ、周囲のコンテンツと自然に組み合わせることが可能です。

回り込みを活用した右寄せの方法

「float: right;」により、その要素はページの右端に移動し、他要素（通常はテキスト）はその要素の周りを回り込む形で配置されます。

例として、画像を右寄せし、その周りにテキストが回り込むようなレイアウトを作成します。

.right-float {
    float: right;
}

以下のようにHTMLで画像要素に上記のCSSクラスを適用します。

<img class="right-float" src="image.jpg" alt="示す画像">
<p>ここにあるテキストは、指定した画像の周りを回り込みます。その結果、画像が右寄せになり、テキストが自然に画像の周囲を流れるレイアウトが完成します。</p>

この方法は、記事やブログポストなどで画像とテキストを組み合わせる際に非常に役立ちます。

ただし、フロートされた要素は通常の文書流から取り除かれ、それにより予期せぬレイアウトの問題が発生することがあります。

そのため、適切にクリアを行うなど、フロートの管理には注意が必要です。

flexboxを使った右寄せ

ここでは、CSS3で導入された「flexbox」を利用する方法を見ていきましょう。

特に、要素間の自由な配置や均等なスペーシングが可能なため、レイアウトの自由度が格段に高まります。

flexboxで右寄せをおこなう基本
flexboxで並列に並んだ要素をすべて右寄せ
flexboxで縦列に並んだ要素をすべて右寄せ

flexboxの基本概念と利点

Flexboxは、親要素に「display: flex;」を指定することで利用できます。

Flexboxを用いると、子要素を縦方向・横方向に自由に配置したり、均等にスペースを割り当てたりすることが可能です。

右寄せをするには、justify-contentプロパティをflex-endに設定します。

<style>
  .container {
    display: flex;
    justify-content: flex-end;
  }
  
  .item {
    width: 50%;
  }
</style>

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>

justify-contentプロパティにより、子要素を右寄せ（flex-end）にしているのです。

flexboxで並列に並んだ要素をすべて右寄せ

flexboxでは、子要素を並列に並べ、その要素をすべて右寄せにできます。

<style>
  .container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  
  .item {
    width: 10%;
  }
</style>

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

これは以下のようなイメージになります。

flexboxで縦列に並んだ要素をすべて右寄せ

flexboxでは、子要素を縦列にしたうえで、それらを右寄せに配置できます。

縦列にした場合は、align-itemsプロパティをflex-endにするのです。

以下のようなイメージです。

コードはこちら。

<style>
  .container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    height: 100vh;
  }
  
  .item {
    width: 10%;
  }
</style>

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

右寄せできないときの対処法

Webデザインの現場で、どんなに適切なコードを書いても期待通りに右寄せにならないことがあります。

そのような状況に対応するため、本節では右寄せができないときの一般的な問題とその解決策をご紹介します。

チェックすべきポイント
よくある問題と解決策

チェックすべきポイント

右寄せが期待通りに行われないとき、最初に確認すべきは以下の3点です。

正しいCSSプロパティと値を使用しているか: 例えば、text-alignはブロックレベルの要素に対してのみ適用され、インライン要素には適用されません。
CSSの適用範囲が適切であるか: CSSの選択子（セレクタ）が正しいか確認してください。
クラス名、ID名、タグ名が正しく、特定の要素を指定できているか確認します。
他のCSSルールによる影響を受けていないか: CSSはカスケーディング（つまり、重ね合わせ）が原則であり、複数のルールが適用される場合、特定のルールが他のルールによって上書きされることがあります。

よくある問題と解決策

以下は、右寄せに関する一般的な問題とその対処法です。

問題: text-align: right;を使用したが、テキストだけが右寄せされ、要素全体は右寄せされていない。

text-alignはテキストの配置を制御します。
要素全体を右寄せにするには、margin, float, positionなどのプロパティを使用しましょう。

問題: float: right;を使用したが、右寄せにならないまたは他の要素と重なる。

floatは要素を特定の方向にフロートさせ、他の要素がその周囡を回り込むようにするもの。
問題として、他要素と重なってしまうことが挙げられます。

親要素が子要素の高さを認識できない場合も、この問題が起こり得るでしょう。（これを「高さ崩れ」といいます）

これに対処するためには、親要素にoverflow: auto;を適用するか、clearプロパティを使用したクリアフィックスを適用します。

問題: position: absolute; right: 0;を使用したが、予期しない位置に要素が配置される。

position: absolute;は、位置指定の親要素（position: relative;やposition: absolute;を持つ要素）に対して相対的に位置づけられます。

位置指定の親要素がない場合、要素はページのbody要素に対して絶対配置されてしまうのです。

要素を親要素の右端に寄せたい場合、親要素にposition: relative;を適用します。

Webサイト制作で右寄せを活用するコツ

右寄せの効果的な活用法を知ることで、デザインの幅が広がります。

以下では、効率的な方法の選択ポイントと他の配置オプションとの組み合わせについてお伝えします。

効率的な方法の選択ポイント
他の配置オプションとの組み合わせ

効率的な方法の選択ポイント

右寄せを実現する方法は複数ありますが、それぞれには適したシチュエーションと利点があります。

text-align: テキストやインライン要素を右寄せするシンプルなケースで便利。
margin: 要素全体を右寄せする場合や、特定のマージン値を指定して要素を配置したい場合に使用。
float: 複数の要素を水平方向に配置し、他の要素を回り込ませたい場合に適しています。
flexbox: 複雑なレイアウトや、要素間の均等な間隔調整など、高度な配置を必要とする場合に有効。

他の配置オプションとの組み合わせ

右寄せだけでなく、他の配置オプションと組み合わせて使用することで、より柔軟なレイアウトが可能です。

例えばflexboxは、要素を垂直方向（align-itemsやalign-self）・水平方向（justify-content）など、自由にせっていきます。

右寄せにするだけでなく、要素をコンテナの右上、右下、または右中央に配置できるのです。

以下は右下の例になります。

<style>
  .container {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 100vh;
  }
  
  .item {
    width: 10%;
  }
</style>

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

またgridレイアウトを使用すると、2次元のレイアウトを簡単に作成できます。

右寄せをする列と左寄せをする列を同時に作成するなど、より複雑な配置が可能です。

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列のグリッドを作成 */
    gap: 10px; /* 列間のスペースを指定 */
  }
  
  .right-column {
    text-align: right; /* 右寄せ */
  }
  
  .left-column {
    text-align: left; /* 左寄せ */
  }
</style>

<div class="container">
  <div class="right-column">Right Column 1</div>
  <div class="left-column">Left Column 1</div>
  <div class="right-column">Right Column 2</div>
  <div class="left-column">Left Column 2</div>
</div>

positionプロパティも有用なツールで、特定の要素をページ上の特定の位置に配置したい場合や、オーバーレイやポップアップウィンドウを作成したい場合に利用できます。