プログラミング

[もう困らない]CSSで要素や画像を両端に揃える方法[3つの方法]

CSSで両端に揃える方法

みなさんこんにちは!ワトスンです。
今回は、、

CSSで2つの要素を両端に揃えたい。両端に揃えるときのHTML・CSSはどう書くの?

といった疑問に答えます。

■読んでほしい人
基本的なHTML・CSSの書き方わかる人/両端に揃える方法を完璧に理解したい人

■この記事を書いてる人
私自身、「両端に揃える方法」が何回もわからなくなって調べてばかりしていました。
何回も調べてきたので、全てのやり方を理解して、あらゆる場合で使いこなせるようになりました。
失敗を重ねすぎていつのまにかマスターしてた感じです。。

この記事では、「要素を両端に揃える」全てのやり方を網羅しているので、ぜひ参考にしてみてください。

ではご紹介していきます。

CSSで要素を両端に揃える方法

ここから「CSSで要素を両端に揃える方法」を3つご紹介していきます。

それぞれのやり方では、レスポンシブ対応のしやすさなどの細かい違いがあります。

それぞれのシチュエーションにあった方法を使用していって下さい。

position:absoluteで両端に揃える

HTML構造が以下の場合、

CSSを

とします。

親要素にposition:relative;を指定し、子要素をposition:absolute;で浮かせてそれぞれを左右に配置します。

display:flexで両端に揃える

HTML構造が以下の場合、

CSSを、

とします。

display:flex;だけだと子要素が横に並ぶだけなので、justify-content:space-between;で左要素と右要素の間に余白を入れます。

justify-contentの詳しい使い方は、「justify-contentの使い方」を参考にしてください。

float:leftで両端に揃える

HTML構造が以下の場合、

CSSを、

とします。

デザインが崩れないように親要素には擬似要素afterを追加し、回り込み解除しておきましょう。

CSSで両端に揃えるには3つの方法をマスターしておく

以上でご紹介した3通りの方法をマスターしておけばほとんどのシチュエーションで有効です。

要素を両端に揃えるときは、どの方法で行っても大丈夫ですが、レスポンシブを考慮するときは適切な方法で行いましょう。

もう一度整理すると

・position:absolute
・display:flex
・float:left

の3つを使いこなして、レベルの高いコーダーを目指しましょう。

なにか疑問点がありましたらコメントまたはTwitterのDMでご連絡ください!

以上です。

コメントを残す

メールアドレスが公開されることはありません。

関連記事