【CSS】横並びのdiv配置をマスターしよう！float、flexbox、gridのメリット・デメリット徹底比較
2024-05-15
CSSを使って3つのdivを横並びにする方法
CSSのfloatプロパティは、要素を横並びに並べるために昔からよく使われてきた方法です。しかし、近年ではより柔軟なレイアウト機能を持つflexboxやgridが登場しており、floatの使用は徐々に減ってきています。
とはいえ、floatは今でもシンプルなレイアウトであれば簡単に使えるため、基本的な知識として持っておくと役立ちます。
3つのdivを横並びにする方法
以下のHTMLコードで3つのdivを用意します。
<div class="container">
<div class="box1">ボックス1</div>
<div class="box2">ボックス2</div>
<div class="box3">ボックス3</div>
</div>
そして、以下のCSSコードでfloatプロパティを使って横並びにします。
.container {
width: 100%; /* 親要素の幅を100%にする */
}
.box1, .box2, .box3 {
float: left; /* 各要素を左にfloatさせる */
width: 33.33%; /* 各要素の幅を33.33%にする */
box-sizing: border-box; /* ボックスモデルをborder-boxにする */
}
このコードは以下の通り動作します。
- 親要素
.containerにwidth: 100%;を設定することで、親要素の幅をブラウザのウィンドウ幅いっぱいにします。 - 子要素
.box1,.box2,.box3にfloat: left;を設定することで、各要素を左にfloatさせます。 - 子要素
.box1,.box2,.box3にbox-sizing: border-box;を設定することで、要素の幅にパディングを含めます。
注意点
floatを使用する場合は、親要素に幅を設定する必要があります。幅が設定されていないと、要素が横並びにならない可能性があります。floatを使用すると、親要素の高さ（vertical height）が崩れる可能性があります。これは、floatされた要素が親要素から飛び出すためです。対策としては、親要素にoverflow: hidden;を設定する方法があります。- 近年では、
flexboxやgridなどのレイアウト機能の方が、より柔軟で使いやすいため、そちらの使用が推奨されています。
上記以外にも、CSSを使って3つのdivを横並びにする方法はいくつかあります。例えば、display: inline-block; を使用する方法や、flexboxやgridレイアウト機能を使用する方法などがあります。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3つのdivを横並びにする</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box1">ボックス1</div>
<div class="box2">ボックス2</div>
<div class="box3">ボックス3</div>
</div>
</body>
</html>
CSS
.container {
width: 100%; /* 親要素の幅を100%にする */
}
.box1, .box2, .box3 {
float: left; /* 各要素を左にfloatさせる */
width: 33.33%; /* 各要素の幅を33.33%にする */
box-sizing: border-box; /* ボックスモデルをborder-boxにする */
}
説明
- HTMLコードで、親要素
div.containerと子要素div.box1,div.box2,div.box3を定義します。
上記コードを実行すると、3つのdivが横並びに表示されます。
補足
- このコードはあくまで一例であり、状況に合わせて変更する必要があります。
CSSで3つのdivを横並びにする方法：その他の方法
前述の通り、CSSで3つのdivを横並びにする方法はいくつかあります。ここでは、float以外の方法として、以下の3つの方法を紹介します。
- display: inline-block; を使用する
- flexboxレイアウトを使用する
- gridレイアウトを使用する
それぞれの方法について、メリットとデメリット、サンプルコードなどを詳しく説明します。
この方法は、ブロック要素であるdivをインライン要素のように扱うことで、横並びにすることができます。
メリット
- シンプルでわかりやすい
- 幅や高さの設定が簡単
- 親要素の高さが崩れる可能性がある
flexboxやgridほど柔軟なレイアウトができない
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3つのdivを横並びにする</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box1">ボックス1</div>
<div class="box2">ボックス2</div>
<div class="box3">ボックス3</div>
</div>
</body>
</html>
.container {
width: 100%; /* 親要素の幅を100%にする */
}
.box1, .box2, .box3 {
display: inline-block; /* 各要素をインライン要素として扱う */
width: 33.33%; /* 各要素の幅を33.33%にする */
box-sizing: border-box; /* ボックスモデルをborder-boxにする */
}
flexboxレイアウトは、CSS3で導入されたレイアウト機能で、柔軟なレイアウトを簡単に作成することができます。
- 方向、配置、余白などを簡単に設定できる
- 複雑なレイアウトにも対応できる
floatやdisplay: inline-block;に比べて記述量が多くなる- 古いブラウザでは一部の機能がサポートされていない
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3つのdivを横並びにする</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box1">ボックス1</div>
<div class="box2">ボックス2</div>
<div class="box3">ボックス3</div>
</div>
</body>
</html>
.container {
display: flex; /* 親要素をflexコンテナにする */
}
.box1, .box2, .box3 {
flex: 1; /* 各要素を同等な幅で伸縮させる */
box-sizing: border-box; /* ボックスモデルをborder-boxにする */
}
gridレイアウトは、CSS3で導入されたもう一つのレイアウト機能で、行と列のグリッドを作成してレイアウトを構成することができます。
- レスポンシブデザインに適している
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3つのdivを横並びにする</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box1">ボックス1</div>
<div class="box2">ボックス2</div>
css css-float
