【CSS】要素を右寄せにする方法まとめ

記事内に商品プロモーションを含む場合があります

CSSを使って要素を右寄せにする方法についてサクッとまとめました。

今回紹介するのは4通り。

インライン要素の場合

インライン要素とはspanタグとかimgタグとか文章の一部として扱われる要素のことを指します。

このインライン要素を右寄せにしたい場合は、「text-align:right」を使えばOKです。

See the Pen
GRpErLv
by オノ@フィリピン(そろそろ帰りたい) (@jun_pinoy)
on CodePen.


「text-align:right」は上のサンプルのように右に寄せたい要素の親要素(ブロック要素)に対して、スタイルを当ててください。

すると中のインライン要素全てが、右寄せになります。

ブロック要素の場合

ブロック要素を右よせにしたい場合は「margin: 0 0 0 auto;」でできます。

See the Pen
dyYRNBp
by オノ@フィリピン(そろそろ帰りたい) (@jun_pinoy)
on CodePen.

floatを使うと要素に関係なく右寄せが可能

float:right」を使えば、インライン要素でも、ブロック要素でも右寄せ(実際は要素を浮かせて回り込み)にすることが可能です。

See the Pen
vYNZxBm
by オノ@フィリピン(そろそろ帰りたい) (@jun_pinoy)
on CodePen.

floatを使う場合は、float解除を忘れずに。

floatの代わりにflexboxでも可能

flexboxの「justify-content: flex-end; 」を使えば、次のように右寄せにすることもできる。

See the Pen
QWjgpjJ
by オノ@フィリピン(そろそろ帰りたい) (@jun_pinoy)
on CodePen.


こういった使い方をするのかは知らないけど。

まとめ

要素を右寄せにする方法をまとめると以下の通り。

  1. インライン要素の右寄せ:text-align: right;
  2. ブロック要素の右寄せ:margin: 0 0 0 auto;
  3. 要素に関係なく右寄せ:float: right あるいは display: flexと justify-content: flex-end; の組み合わせ
created by Rinker
SBクリエイティブ
¥2,300
(2024/12/12 02:36:39時点 Amazon調べ-詳細)

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA