【HTML】右寄せにする方法7選【CSS】

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

１分で理解できるHTML/CSS講座シリーズです。

今回は簡単に右寄せにする全ての方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

１分で理解できるHTML/CSS講座シリーズはじめっ！

要素を右寄せにしよう！

今回はこのようなレイアウトの要素を右寄せする方法を紹介します。

以下は共通設定となります。

<div class="container">
  <div class="common right">右に寄せたい</div>
  <div class="common">テスト1</div>
  <div class="common">テスト2</div>
</div>

.container {
  height: 200px;
  width: 300px;
  background-color: lightblue;
}

.common {
  border: solid 1px;
}

コピペ出来るよう最小構成にしているので
用途にあったものを見つけてね！

.right {
  /* テキストのみが右寄せに、親要素は影響なし */
  text-align: right;
}

この方法では、要素内のテキストが右寄せされます。
要素自体の配置は左揃えのままです。

.right {
  /* テキストのみが右寄せに、親要素は影響なし */
  text-align: end;
}

この方法では、要素内のテキストが右寄せされます。
要素自体の配置は左揃えのままです。

.right {
  /* 右に回り込む */
  float: right;
}

この方法では、要素が右寄せされ、周囲のコンテンツがその左側にフロートします。

.right {
  /* widthの指定がある場合に有効 */
  width: 100px;
  margin-left: auto;
}

この方法では、要素が右端に配置されますが
要素と親要素のwidthが同じ場合には右寄せになりません。

.container {
  /* 親要素に指定するケース */
  display: flex;
  justify-content: flex-end;
}

フレックスボックスを使う方法です。
container下の要素は全て横並びになります

.container {
  /* 親要素に指定するケース */
  display: grid;
  justify-content: end;
}

フレックスボックスを使う方法です。
container下の要素は全て右寄せでスタックされます。

/* 親要素に対して絶対位置を指定 */
.container {
  position: relative;
}
.right {
  position: absolute;
  right: 0;
}

要素の親コンテナには相対的な位置設定(position:relative;)が必要です。

大体のやり方は網羅しているので、
コピペで使ってみてね！

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈