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

Webサイトを制作する過程では、CSSを用いて要素を真ん中や左右どちらかに寄せる機会が多くあります。
この記事ではCSSで要素を右に寄せる方法を解説します。

基本的に要素は左上から出力されていきますが、下記5つのプロパティを用いることで要素を右に寄せることができます。

CSSで右に寄せることができるプロパティ6選

• flex
• grid
• position
• text-align
• margin
• float

6つのプロパティについて解説しますが、結論を先にお伝えします。
テキストの右寄せはtext-alignを、要素の右寄せはflexを用いるのがおすすめです。

この記事で身につく内容

• 6つのプロパティを使って要素を右寄せにする方法

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

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

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

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

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

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

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

今すぐZeroPlus Gateの詳細を見る

目次

• 要素を右寄せするCSSプロパティ6選
  • flexプロパティで文章と画像を右寄せ
  • Gridレイアウトで文章と画像を右寄せ
  • positionで文章と画像を右寄せ
  • text-alignプロパティで文章を右寄せ
  • marginプロパティで文章と画像を右寄せ
  • floatプロパティで文章を右寄せ
• 右寄せができない場合の対処法
  • text-align: right;が効かない
  • margin-left: auto;が効かない
  • justify-content: flex-end;が効かない
  • postion: absolute; や right:0; が効かない
• まとめ

要素を右寄せするCSSプロパティ6選

まずは上記で述べた6つのプロパティについて、簡単に紹介していきます。

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

flexboxを使うことで、ブロック要素でもインライン要素でも右に寄せることができます。

flexを用いて右寄せするポイントは2点です。

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

かめるん先生

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

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

文章に対してflex-endを適用して右に寄せることができます。

<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;
}

画像をflexで右に寄せる場合は、divタグで囲ってあげましょう。

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

インライン要素をdivタグのようなコンテナ要素で囲うことによって、flexプロパティが効くようになります。

かめるん先生

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

出力結果

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

Gridレイアウトで文章と画像を右寄せ

Gridレイアウトを使うことで、文章・画像を右寄せすることができます。

girdを用いて右寄せするポイントは2点です。

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

Gridレイアウトで文章を右寄せ

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;
}

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

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

gridプロパティに関しては以下の記事で詳しく解説しています。

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

positionで文章と画像を右寄せ

positionプロパティで、文章や画像を右寄せに配置することもできます。position を使ったやり方では、top, left, right, bottomで最終的な位置を細かく指定することができます。

positionを用いて右寄せするポイントは3点です。

1. 右寄せしたい要素の親要素にposition: relative;を指定する
2. 右寄せしたい要素にposition: absolute;を指定する
3. 配置したい位置へtop:とright:の値を指定する

寄せたい要素（子要素）にposition: absolute;と位置を指定し、その親要素にposition:relative;を適用させます。

かめるん先生

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

<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プロパティで画像を右寄せ

positionに対しては、flexのときと同様に、

• 親要素のdivタグに対してposition: relative;
• 要素に対してposition: absolute;と位置

を指定します。

<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;
}

出力結果

親要素にrelativeを適用すると、子要素はその親要素を基準に位置を決めるため、pタグに対してもright, topの位置を指定します。

かめるん先生

tex-alignプロパティは子要素がインラインの場合のみに効くので、注意しましょう！

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

出力結果

上記のHTMLをCSSのtext-alignで右に寄せる場合には、下記のように記述します。

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

p {
  text-align: right;
}


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

出力結果

marginプロパティで文章と画像を右寄せ

marginプロパティで要素の左右に余白を指定することで、文章や画像を右に寄せることができます。

marginを用いて右寄せするポイントは4点です。

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

かめるん先生

上記条件のもと、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を指定しているため、下段の文章は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プロパティは要素を浮かせて、本来の場所から移動させることができます。

CSS3が普及してからはdisplay: flex;やtext-align: right;で代用できるため、使われる機会が大幅に減りました。現在floatは基本的に使われません。

floatで右寄せする場合は、HTMLに以下のようにCSSを適用します。

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

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

p {
 float: right;
}

span {
 float: right;
}

出力結果

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

要素を右寄せにできない場合は、以下の理由が考えられます。

• text-align: right;が効かない
  →インライン要素に指定しているため
• margin-left: auto;が効かない
  →インライン要素に指定しているため
• justify-content: flex-end;が効かない
  →flexやgridを指定していないため
• postion: absolute;やright:0;が効かない
  →親要素にposition: relative;を指定していないため

text-align: right;が効かない

ブロック要素にtext-align: right;を指定している可能性があります。以下の条件を確認しましょう。

• ブロック要素に指定する
• ブロック要素に横幅を指定する
• ブロック要素の中にインライン要素がある

margin-left: auto;が効かない

インライン要素にmargin-left: auto;を指定している可能性があります。以下の条件を確認しましょう。

• ブロック要素に指定する
• ブロック要素に横幅を指定する

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

justify-content: flex-end;が効かない場合、flexやgirdを指定していない可能性があります。

justify-contentプロパティは、flexやgirdを指定していないと使えないプロパティです。親要素にflexやgirdを指定しているか確認しましょう。

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

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

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

absoluteプロパティは親要素にposition: relative;を指定していないとうまく反映されません。また、rightプロパティを指定しているのに、同時にleftプロパティを指定していると、右寄せが反映されません。

また、親要素にposition:relative;とoverflow:hidden;が指定されていると、その子要素が親要素の範囲外に配置されていた場合に、overflow:hidden;によって子要素が非表示になってしまいます。

positionプロパティが効かない場合の対処法については、以下の記事でも詳しく解説しています。

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

まとめ

この記事では要素を右寄せをする際に使用する6つのCSSプロパティを紹介しました。

CSS3では右寄せする際にdisplay: flex;がもっとも使用されます。
flexに関してはその他にも様々なプロパティがあります。こちらの記事で詳しく解説していますので参考にしてください。

【CSS】Flexboxプロパティ一覧！それぞれの使い方を解説

それでは最後に、CSSで右寄せできるプロパティを復習しましょう。

CSSで右に寄せることができるプロパティ6選まとめ

• flex　一番よく使う方法
• grid　最新の横並び方法
• position　要素の最終的な位置を決められる
• text-align　ブロック要素など水平方向に対して配置を決められる
• margin　要素に余白を指定して配置を決められる
• float　要素を浮かせて本来の場所から移動させる

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

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

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

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

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

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

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

今すぐZeroPlus Gateの詳細を見る

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

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー