要素を横並びにする方法【CSS】 TECH
HTMLの要素(element)を横並びにする方法が分からない、忘れてしまった。
そういったお悩みをお持ちの方に向けて、この記事では解説していきます。
要素の横並びとは
そもそも要素の横並びとは、どういう状態かというと下の画像のように、要素と要素が横に並んでいる状態の事です。(HTMLだけでは要素は縦に並んでしまいます)
サイトの見た目(デザイン)や見やすさなどを考慮し、横並びにした方が良い時に使うと思います。
どうやるか解説していきますが、まずは今回説明する中で共通で使用するHTMLとCSSをまずはご確認ください。
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.container{
background: gray;
}
.item{
width: 100px;
height: 100px;
}
.item:nth-of-type(1){
background: red;
}
.item:nth-of-type(2){
background: yellow;
}
.item:nth-of-type(3){
background: blue;
}
CSSで色や幅を分かりやすいようにスタイル指定しましたが、自由に変更してもらって大丈夫です。
要素の横並びの方法
flexを使う方法【おすすめ】
要素を横並びにできるdisplay: flex
を使ったやり方です。
要素の横並びは、この方法を使う事が多いと思います。
実際のコードがこちら↓
.container{
display: flex;
}
レスポンシブにも対応しやすく、配置のバランスを調整しやすいです。
gridを使う方法
2次元レイアウトを自在にできるdisplay: grid
を使ったやり方です。
実際のコードがこちら↓
.container{
display: grid;
grid-template-columns: repeat(3, 100px);
}
横方向だけでなく縦方向の高さや幅を指定できるので、tableタグを使わないで格子状のスタイルが簡単に出来ます。
inline-blockを使う方法
幅と高さの指定ができるインライン要素のdisplay: inline-block
を使ったやり方です。
実際のコードがこちら↓
.item{
display: inline-block;
}
ボタンやナビゲーションを横に並べたい時に使用する事が多い印象。
なお、レスポンシブにする時はdisplay: block
に変えれば、OK。
floatを使う方法
要素を左に寄せて配置するfloat: left
を使ったやり方です。
実際のコードがこちら↓
.item{
float: left;
}
画像とテキストを並べたい時(下の画像のような時)に、使用するのが最適。
まとめ
今回紹介した方法以外にも、横並びにする方法はあると思います。また、今回紹介した方法が最適でない場合もあると思いますので、色々試してみてください。
個人的にまとめるなら、横並びのレイアウトにしたいならflex
、格子状のレイアウトにしたいならgrid
、ナビゲーションの横並びはinline-block
、テキストを回り込ませたいならfloat
を使えば良いんじゃないかと思ってます。