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

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

無料でプログラミングの質問ができるサービス

30日間無料でWeb制作が学べるZeroPlus Gate！

• Web制作に特化
• 50本以上の動画教材で学べる
• 30日間に4回の学習サポート面談がある
• Slackで質問し放題

公式サイトを見る

ZeroPlus Gate（ゼロプラスゲート）は怪しい？評判・口コミを運営がエゴサしてみた

テキストの右寄せには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の違いとは？使い分け方を初心者向けに解説

flexboxを使って右寄せ

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

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

かめるん先生

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

flexboxを使ったテキストの右寄せ

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

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

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

出力結果

flexboxで画像を右寄せ

画像に対しても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 layoutを使って右寄せ

Gridには「格子状のもの」という意味があり、Grid Layoutとは格子状のマス目をベースとして、CSSでWebサイトのレイアウトを組む手法です。Gridを使うことで、文章・画像を右寄せすることができます。

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

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

Gridでテキストを右寄せ

Grid layoutはブロック要素でもインライン要素でも右に寄せられます。テキストを右寄せする場合のサンプルコードを紹介します。

<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 layoutで画像を右寄せする際のサンプルコードを紹介します。

<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の要素に対して下記のように適用すると、右に寄せられます。前述したとおり、要素には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;で代用できるようになったため、使われる機会が大幅に減りました。

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

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

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

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

コピー