こんにちは！メニューは左に寄せる派のMizutani(@sirycity)です。右の方が見やすいって人も結構いるみたいだけどね。

今日はCSSで右寄せする方法をいろいろ試した結果やっぱflexが一番安定すると思うって話です。

結論

こう。このflex使うやつが一番いい気がします。

<div class='foo'>
  <div>みぎよせ→</div>
</div>

.foo {
  display: flex;
  justify-content: flex-end;
}

右寄せの方法色々と所感

text-align使う方法

一番古典的な方法かな？

<div class='foo'>
  <div>みぎよせ→</div>
</div>

.foo {
  text-align: right
}

text-alignの長所はレガシーブラウザ大丈夫なとことシンプルな所でしょうか。rightって入ってるからわかりやすいね。

一方欠点も分かりやすく、widthが明示されてるblock要素は寄らないです。こんな感じ。

<div class='foo'>
  <div class='bar'>みぎよせできない！</div>
</div>

.foo {
  text-align: right
}
.bar {
  width: 42px;
}

text-alignは名前の通り文字を右寄せにするイメージで、コンポーネントそのものが右によるわけじゃないんですね。ちょっと癖がある。

margin使う方法

これもわりと有名。

<div>
  <div class='bar'>みぎよせ→</div>
</div>

.bar {
  width: 42px;
  margin-right: 0;
  margin-left: auto;
}

...これは有名なわりにはあんま良くないと思います。いくつか理由があって、

• rightとleftを間違える。
• widthを明示しなきゃ寄らない。text-alignと真逆。
• block要素じゃないと寄らない。これもtext-alignと逆。
• 子要素にスタイルを当ててる。他は親要素に当ててる。これもtext-alignと逆。

みたいな感じでtext-alignとスタイリングがことごとく逆で混乱のもとになります。勘弁。

flexを使う方法

お待ちかね。

<div class='foo'>
  <div>みぎよせ→</div>
</div>

.foo {
  display: flex;
  justify-content: flex-end;
}

flexの長所はいくつかあって、

• 直感的
• 子要素に依存しない
• IE11には対応

など。親要素にとりあえず脳死で付ければ子要素が勝手に寄ってくれる安心感があります。子要素の状態を一切気にしなくて良いのが最大のメリットですね。

gridを使う方法

正直、gridでもflexとほぼ同様のスタイリングが可能です。

<div class='foo'>
  <div>みぎよせ→</div>
</div>

.foo {
  display: grid;
  justify-content: right;
}

justify-contentの値がrightなので、むしろgridの方が感覚的まであります。個人的にflexを使う理由は膨大な表現力を持つgridを右に寄せるだけに使うのが役不足な気がするから。もはや完全に好みです。

その他

floatとかもあるかもしれんが割愛します。2021年にfloatって言葉を打つとは思わなかった。

さいごに

flexはCSSにしては珍しく簡単なことを簡単にできるので大好き！以上。