【初心者でも簡単】CSSで要素を右寄せする6つの方法を分かりやすく解説

HTMLの要素を右寄せにする方法は6種類あります。

テキストの右寄せにはtext-align、それ以外の要素の右寄せにはflexを使うのがおすすめ

要素を右寄せにする方法には複数の手法があるため、どの方法を使えば良いか迷うかもしれません。

結論、テキストの右寄せにはtext-align、それ以外の要素の右寄せにはflexboxを使うことが推奨されます。どちらの手法もコードがシンプルで初心者でも使いやすく、レスポンシブ対応においてレイアウトが崩れにくいです。

かめるん先生

しかし既存のプロジェクトでは、floatやpositionを使用してレイアウトが組まれていることがあります。こうしたケースでコード全体を大幅に変更せずに修正対応するためには、text-alignやflexboxによる右寄せ以外にも、幅広い手法を押さえておく必要があります。

<div>
  <span>表示形式がインラインの要素を、text-alignで右寄せします！</span> 
  <p>text-alignで右寄せします！</p> 
</div>

div{
  height: 300px;
  width: 30%;
  border: black 1px solid;
  text-align: right;
}

<p>text-alignで右寄せします！</p>
<span>表示形式がインラインの要素を、text-alignで右寄せします！</span>

/* text-alignで右寄せします。 */

p {
  text-align: right;
}


/* こちらはインライン */
span {
  text-align: right;
  display: block;
}

<div class="imgbox">
  <img src="./image/kikyu.jpg" alt="気球の画像">
</div>

.imgbox{
  height: 300px;
  width: 60%;
  border: black 1px solid;
  text-align: right;
}

img{
  width: 20%;
}

【CSS】inline・block・inline-blockの違いとは？使い分け方を初心者向けに解説

flexプログラミングで文章と画像を右寄せ

flexboxを使う方法です。

flexboxはbox内の要素の配置や方向などを柔軟に調整できるレイアウト技術です。flexboxを活用すれば、要素をシンプルなコードで右に寄せられます。手順は以下のとおりです。

1. display: flex;を指定する
2. justify-content: flex-end;を指定する

flexboxのプロパティの一つ、flex-endでブロック要素でもインライン要素でも右に寄せることができます。

かめるん先生

justify-contentプロパティはdisplay: flex;がないと効かないので、注意です！

flexプロパティで文章を右寄せ

<p>flex-endで右寄せします！</p>
<span>表示形式がインラインの要素を、flex-endで右寄せします！</span>

/* flex で右寄せします。 */
p {
 display: flex;
 justify-content: flex-end;
}

span {
 display: flex;
 justify-content: flex-end;
}

出力結果

flexプロパティで画像を右寄せ

画像に対してもflex-endを適用して右に寄せられます。

<div class="imgbox"> 
  <img src="images/sample.png" alt="サンプル画像">
  <p>上の画像を右に寄せる</p>
</div>

/* 画像をflexで右に寄せます */

.imgbox {
 display: flex;
 justify-content: flex-end;
}
img {
 width: 100%;
 height: 100%;
 max-width: 200px;
}

imgタグはインライン要素ですが、直接flexプロパティを適用しても右に寄せることはできません。imgタグをdivタグで囲い、divタグに対してflexを適用することで右に寄せられます。

かめるん先生

imgタグはdivタグで囲っておくと何かと便利ですので、最初のうちはとりあえず、囲っておくことをおすすめします！

出力結果

display: flex;によって、すべての要素が横並びに配置されるため、文章も画像の右側面に配置されています。

Gridで文章と画像を右寄せ

Gridを使って、文章・画像を右寄せすることができます。

Gridは「格子状のもの」という意味で、Grid Layoutとは格子状のマス目をベースとして、CSSでWebサイトのレイアウトを組む手法です。

Grid layoutを使って右寄せするポイントは2点です。

1. display: grid;を指定する
2. justify-content: flex-end;を指定する

Gridで文章を右寄せ

ブロック要素でもインライン要素でも右に寄せることができます。文章を右寄せすると次のようになります。

<p>flex-endで右寄せします！</p>
<span>インライン要素を、flex-endで右寄せします！</span>

/* Grid で右寄せします。 */

p {
  display: grid;
  justify-content: flex-end;
}

span {
  display: grid;
  justify-content: flex-end;
}

出力結果

Gridで画像を右寄せ

Gridで画像を右寄せすると次のようになります。

<div class="imgboxWrap">
  <div class="imgbox">
    <img src="images/sample.png" alt="サンプル画像">
    <p>上の画像を右に寄せる</p>
  </div>
  <div class="imgbox">
    <img src="images/sample.png" alt="サンプル画像">
    <p>上の画像を右に寄せる</p>
  </div>
  <div class="imgbox">
    <img src="images/sample.png" alt="サンプル画像">
    <p>上の画像を右に寄せる</p>
  </div>
</div>

/* 要素を横並びにします。 */

.imgboxWrap {
  margin-top: 100px;
  padding-right: 40px;
  display: grid;
  grid-template-columns: 200px 200px 200px;
  column-gap: 20px;
  justify-content: flex-end;
}

img {
  width: 100%;
  height: 100%;
  display: block;
}

p {
  text-align: center;
}

画像をGridで右に寄せる場合は、右に寄せたい要素をdivタグで囲い、そのdivタグに対してdisplay: grid;プロパティを適用します。

grid-template-columsプロパティでそれぞれの要素の横幅を200pxに指定し、justify-content: flex-end;を指定することで右に寄せられます。

Grid Layoutに関しては以下の記事で詳しく解説しています。

CSS Gridの使い方を初心者向けに丁寧に解説！爆速でレイアウトを完結させよう

positionで右寄せ

要素の配置を指定するCSSプロパティ「position」でも、テキストや画像を右寄せに配置できます。右寄せする際の手順は3点です。

1. 右寄せしたい要素の親要素にposition: relative;を指定する
2. 右寄せしたい要素にposition: absolute; とright: 0;を指定する
3. topかbottomで縦方向の配置を指定する

かめるん先生

よく、topとleftで考えてしまいがちですが、右に寄せたい時はright: 0;を指定すると楽に右寄せにできますね！

positionでテキストを右寄せ

<div>
 <p>positionで右寄せします！</p>
 <span>表示形式はインラインの要素を、positionで右寄せします！</span>
</div>

/* position で右寄せします。 */

div {
 position: relative;
}
p {
 position: absolute;
 right: 0;
}

span {
 position: absolute;
 top: 30px;
 right: 0;
}

出力結果

positionで画像を右寄せ

<div class="imgbox"> 
  <img src="images/sample.png" alt="サンプル画像">
  <p>positionで画像を右に寄せる</p>
</div>

/* 画像をflexで右に寄せます */

.imgbox {
　position: relative;
}
img {
 width: 100%;
 height: auto;
 max-width: 200px;
 display: block;
 position: absolute;
 right: 0;
}

p {
 position: absolute;
 right: 0;
 top: 150px;
}

出力結果

marginでテキストと画像を右寄せ

marginで要素の左右に余白を指定することで、テキストや画像を右に寄せられます。右寄せする際のポイントは以下の4点です。

1. margin-right: 0;を指定し、右側の余白を0にする
2. margin-left: auto;を指定し、左側の余白が自動で調整されるようにする
3. widthの値を設定する
4. インライン要素の場合はdisplay: block;でブロック要素に変更する

このうちポイントは、要素に幅（width）を指定する点です。要素に幅が指定されていない場合、親要素いっぱいに幅が広がるため、margin-left: auto;を指定しても余白が作られません。

かめるん先生

上記条件のもと、marginの左右の値をautoにすることで、中央寄せもできますね！

margin-left, margin-rightプロパティで文章を右寄せ

要素の左側に余白を指定するmargin-left、要素の右側に余白を指定するmargin-rightを、HTMLの要素に対して下記のように適用すると、右に寄せることができます。margin で寄せる場合には、要素にwidth（横幅）を指定します。

<p>marginで右寄せします！</p>
<span>表示形式がインラインの要素を、marginで右寄せします！</span>

/* margin で右寄せします。 */

p {
 margin-right: 0;
 margin-left: auto;
 width: 30%;
}

span {
 margin-right: 0;
 margin-left: auto;
 width: 30%;
 display: block;
}

出力結果

widthを指定した結果、spanタグのテキストはwidthからはみ出した部分が折り返して表示されています。

marginで画像を右寄せ

 <img src="images/sample.png" alt="サンプル画像">
 <p>上の画像を右に寄せる</p>

/* 画像を右に寄せます */

img {
 width: 100%;
 height: 100%;
 max-width: 200px;
 margin-right: 0;
 margin-left: auto;
 display: block;
}
p {
 text-align: right;
}

出力結果

floatプロパティで文章を右寄せ

floatは要素を浮かせて、本来の場所から移動させられるCSSプロパティです。floatで右寄せする場合、以下のようにCSSを適用します。

<p>floatで右寄せします！</p>
<span>表示形式がインラインの要素を、floatで右寄せします！</span>

/* float で右寄せします。 */

p {
 float: right;
}

span {
 float: right;
}

出力結果

最近ではCSS3が普及し、floatはdisplay: flex;やtext-align: right;で代用できるようになったため、使われる機会が大幅に減りました。floatは頭に入れておくだけで、基本的には使いません。

参考記事

【CSS】floatの使い方を解説！3つの解除方法も完全マスター

特定の要素を右寄せ

ここからは予備知識として、flexやgridを適用した要素の中の、特定の要素だけを右寄せする方法について解説します。

flexを適用した要素の中の特定の要素を右寄せ

<div class="flex">
  <p>align-selfで右寄せします！</p>
  <span>インライン要素</span>
  <img src="images/sample.png" alt="サンプル画像">
</div>

.flex{
  display: flex;
  flex-direction: column; /*縦並びにする*/
  row-gap: 10px; /*要素間の余白*/
}

p{
  align-self: flex-end;
  background-color: rgb( 245 195 195 / .5);
}

span {
  background-color: rgb( 245 195 195 / .5);
}
img {
  width: 200px;
  align-self: flex-end;
}

出力結果

flex要素に display: flex; と flex-direction: column; を適用し、子要素を縦並びにした後、
右寄せしたい特定の要素に align-self: flex-end; を適用します。要素間の余白はrow-gapプロパティを適用しています。

align-selfプロパティについてはこちらの記事で解説しています。

【CSS】align-selfの使い方を解説！align-itemsとの違いは？

gridを適用した要素の中の特定の要素を右寄せ

<div class="grid">
  <p>justify-selfで右寄せ</p>
  <span>インライン要素！</span>
  <img src="images/sample.png" alt="サンプル画像">
</div>

.grid {
  display: grid;
　row-gap: 10px; /*要素間の余白*/
}
p {
  justify-self: end;
  background-color: rgb( 245 195 195 / .5);
}

span {
  background-color: rgb( 245 195 195 / .5);
}
img {
  width: 200px;
  justify-self: end;
}

justify-selfプロパティは、水平方向（横方向）に対して個別の要素をどのように配置するか指定するプロパティです。

対して、align-selfプロパティは個別の要素の垂直方向（縦方向）の配置を指定できるプロパティと覚えておきましょう。

かめるん先生

なお、flexではjustify-selfプロパティは効きません。

 

右寄せができない場合の対処法

要素を右寄せにできない場合の原因と対処法を紹介します。

text-align: right;が効かない

表示形式がインラインの要素に直接text-align: right;を指定しても右寄せにはなりません。この場合の対処法は2種類あります。

A.右寄せしたい要素にdisplay: block;を指定して表示形式をブロックに変更する

<span>右寄せにしたい要素</span>

span {
  text-align: right;
  display: block;/* 要素の表示形式をブロック要素に */
}

B.spanタグの親要素にtext-align: right;を指定

この場合、右寄せしたい要素の表示形式はインラインのままで右寄せできます。

<div>
  <span>右寄せにしたい要素</span>
</div>

div {
  text-align: right;/* spanタグの親要素に右寄せを指定 */
}

margin-left: auto;が効かない

表示形式がインラインの要素にmargin-left: auto;を指定しても右寄せが効きません。display: block;を指定して表示形式をブロックに変える必要があります。

要素の表示形式がブロックでも、widthの指定がない場合margin-left: auto;は効きません。必ずwidthを指定するようにしましょう。サンプルコードに示すと以下のようになります。

<p>表示形式がブロックの要素</p>
<span>表示形式がインラインの要素</span>

p {
 margin-right: 0;
 margin-left: auto;
 width: 30%;/* 幅を指定 */
}

span {
 margin-right: 0;
 margin-left: auto;
 width: 30%;/* 幅を指定 */
 display: block;/* 表示形式をインラインからブロックに変更 */
}

justify-content: flex-end;が効かない

justify-content: flex-end;が効かない場合、display: flex;やdisplay:grid;を指定していない可能性があるため、コードを確認しましょう。

flexの場合

<p>flex-endで右寄せします！</p>
<span>表示形式がインラインの要素を、flex-endで右寄せします！</span>

p {
 display: flex;/* 忘れずに指定 */
 justify-content: flex-end;
}

span {
 display: flex;/* 忘れずに指定 */
 justify-content: flex-end;
}

Gridの場合

<p>flex-endで右寄せします！</p>
<span>表示形式がインラインの要素を、flex-endで右寄せします！</span>

p {
  display: grid;/* 忘れずに指定 */
  justify-content: flex-end;
}

span {
  display: grid;/* 忘れずに指定 */
  justify-content: flex-end;
}

position: absolute; や right: 0; が効かない

position: absolute; right: 0;が効かない場合、以下の理由が考えられます。

• 親要素にposition: relative;を指定していない
• leftプロパティを指定している

absoluteは親要素にposition: relative;を指定していないとうまく反映されません。また、rightプロパティとともにleftプロパティを指定している場合、右寄せが反映されないため注意が必要です。

なおpositionがうまく効かない場合の対処法については、以下の記事でより詳しく解説しています。

【CSS】position プロパティまとめと効かないときの対処法を解説

まとめ

この記事では要素を右寄せをする6つの方法を紹介しました。それぞれの手法の概要は以下のとおりです。

このように、右寄せする手法にはいくつもの種類があります。このうちCSS3では、テキストの右寄せにはtext-align、テキスト以外の右寄せにはflexboxが比較的よく使用されます。

しかし、実際の現場では既存のサイトを修正する際や、クライアントからの指示により別の手法を使う必要性が生じるかもしれないので、まとめて理解しておくことが推奨されます。

ぜひそれぞれの手法をマスターしましょう。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー