【CSS】右寄せの方法は結局flexが一番良さそう
こんにちは!メニューは左に寄せる派の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にしては珍しく簡単なことを簡単にできるので大好き!以上。
PREV
2021-04-28
【JS】ReactにFacebookの投稿を埋め込む方法
NEXT
2021-05-07
【JS】Node.jsのバージョン管理をnodenvからvoltaに変更した理由と感想
LINK
リンク
Twitter
GitHub
TAGS
タグ
LATESTS
最新の記事
POPULAR
人気の記事
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介