[もう困らない]CSSで要素や画像を両端に揃える方法[3つの方法]
みなさんこんにちは！ワトスンです。
今回は、、
といった疑問に答えます。
■読んでほしい人
基本的なHTML・CSSの書き方わかる人/両端に揃える方法を完璧に理解したい人
■この記事を書いてる人
私自身、「両端に揃える方法」が何回もわからなくなって調べてばかりしていました。
何回も調べてきたので、全てのやり方を理解して、あらゆる場合で使いこなせるようになりました。
失敗を重ねすぎていつのまにかマスターしてた感じです。。
この記事では、「要素を両端に揃える」全てのやり方を網羅しているので、ぜひ参考にしてみてください。
ではご紹介していきます。
目次
CSSで要素を両端に揃える方法
ここから「CSSで要素を両端に揃える方法」を３つご紹介していきます。
それぞれのやり方では、レスポンシブ対応のしやすさなどの細かい違いがあります。
それぞれのシチュエーションにあった方法を使用していって下さい。
position:absoluteで両端に揃える
HTML構造が以下の場合、
|
1 2 3 4 |
<div class="parent"> <div class="child-left">左</div> <div class="child-right">右</div> </div> |
CSSを
|
1 2 3 4 5 6 7 8 9 10 |
.parent{ position:relative; } .child-left{ position:absolute; } .child-right{ position:absolute; right:0; } |
とします。
親要素にposition:relative;を指定し、子要素をposition:absolute;で浮かせてそれぞれを左右に配置します。
display:flexで両端に揃える
HTML構造が以下の場合、
|
1 2 3 4 |
<div class="parent"> <div class="child-left">左</div> <div class="child-right">右</div> </div> |
CSSを、
|
1 2 3 4 5 6 7 8 |
.parent{ display:flex; justify-content:space-between; } .child-left{ } .child-right{ } |
とします。
display:flex;だけだと子要素が横に並ぶだけなので、justify-content:space-between;で左要素と右要素の間に余白を入れます。
justify-contentの詳しい使い方は、「justify-contentの使い方」を参考にしてください。
float:leftで両端に揃える
HTML構造が以下の場合、
|
1 2 3 4 |
<div class="parent"> <div class="child-left">左</div> <div class="child-right">右</div> </div> |
CSSを、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.parent{ position:relative; } .parent:after{ content:""; clear:both; display:block; } .child-left{ float:left; } .child-right{ float:left; position:absolute; right:0; } |
とします。
デザインが崩れないように親要素には擬似要素afterを追加し、回り込み解除しておきましょう。
CSSで両端に揃えるには３つの方法をマスターしておく
以上でご紹介した３通りの方法をマスターしておけばほとんどのシチュエーションで有効です。
要素を両端に揃えるときは、どの方法で行っても大丈夫ですが、レスポンシブを考慮するときは適切な方法で行いましょう。
もう一度整理すると
・position:absolute
・display:flex
・float:left
の３つを使いこなして、レベルの高いコーダーを目指しましょう。
なにか疑問点がありましたらコメントまたはTwitterのDMでご連絡ください！
以上です。
