【HTML/CSS】flexboxを使わない！2つ以上のコンテンツを横並びにする方法
2024-04-02
HTMLとCSSで2つのdivを横に並べる方法
方法1: floatプロパティを使う
これは最も古い方法の一つです。 float: left; を各divに設定することで、左側に並べることができます。
<div class="div1">
ここにdiv1の内容
</div>
<div class="div2">
ここにdiv2の内容
</div>
.div1, .div2 {
float: left;
}
方法2: display: inline-blockを使う
display: inline-block; を各divに設定することで、インラインブロック要素として表示されます。 インラインブロック要素は、横並びに表示されるだけでなく、幅や高さなどの設定も可能です。
<div class="div1">
ここにdiv1の内容
</div>
<div class="div2">
ここにdiv2の内容
</div>
.div1, .div2 {
display: inline-block;
}
方法3: flexboxを使う
flexboxは、レイアウトを柔軟に設定できるCSSの機能です。 親要素に display: flex; を設定することで、flexコンテナとなり、子要素を横並びに並べることができます。
<div class="container">
<div class="div1">
ここにdiv1の内容
</div>
<div class="div2">
ここにdiv2の内容
</div>
</div>
.container {
display: flex;
}
方法4: tableを使う
table要素を使って、2つのdivを横に並べることもできます。
<table>
<tr>
<td>
<div class="div1">
ここにdiv1の内容
</div>
</td>
<td>
<div class="div2">
ここにdiv2の内容
</div>
</td>
</tr>
</table>
どの方法を使うべきかは、それぞれの状況によって異なります。 以下のような点を考慮して選ぶと良いでしょう。
- レイアウトの複雑さ
- ブラウザのサポート状況
- コードのシンプルさ
方法1: floatプロパティを使う
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルコード</title>
<style>
.div1, .div2 {
float: left;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<div class="div1">
ここにdiv1の内容
</div>
<div class="div2">
ここにdiv2の内容
</div>
</body>
</html>
方法2: display: inline-blockを使う
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルコード</title>
<style>
.div1, .div2 {
display: inline-block;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<div class="div1">
ここにdiv1の内容
</div>
<div class="div2">
ここにdiv2の内容
</div>
</body>
</html>
方法3: flexboxを使う
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルコード</title>
<style>
.container {
display: flex;
}
.div1, .div2 {
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="div1">
ここにdiv1の内容
</div>
<div class="div2">
ここにdiv2の内容
</div>
</div>
</body>
</html>
方法4: tableを使う
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルコード</title>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div class="div1">
ここにdiv1の内容
</div>
</td>
<td>
<div class="div2">
ここにdiv2の内容
</div>
</td>
</tr>
</table>
</body>
</html>
2つのdivを横に並べるその他の方法
方法5: CSS gridを使う
<div class="container">
<div class="div1">
ここにdiv1の内容
</div>
<div class="div2">
ここにdiv2の内容
</div>
</div>
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
position: absolute; を各divに設定し、left プロパティで位置を調整することで、横並びに並べることができます。
<div class="div1">
ここにdiv1の内容
</div>
<div class="div2">
ここにdiv2の内容
</div>
.div1, .div2 {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.div2 {
left: calc(50% + 10px);
}
margin: 0 auto; を各divに設定することで、左右に等しい余白を設け、中央に配置することができます。
<div class="div1">
ここにdiv1の内容
</div>
<div class="div2">
ここにdiv2の内容
</div>
.div1, .div2 {
margin: 0 auto;
}
css html
