CSSを使って要素を右寄せにする方法についてサクッとまとめました。
今回紹介するのは４通り。
インライン要素の場合
インライン要素とは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.
こういった使い方をするのかは知らないけど。
まとめ
要素を右寄せにする方法をまとめると以下の通り。
- インライン要素の右寄せ：text-align: right;
- ブロック要素の右寄せ：margin: 0 0 0 auto;
- 要素に関係なく右寄せ：float: right あるいは display: flexと justify-content: flex-end; の組み合わせ
