HTMLで<div>ブロックを横に並べて配置するには、いくつかの方法があります。ここでは、代表的な方法をいくつか紹介します。
1. display: inline-block; を使用する方法
この方法は、<div> 要素をインライン要素のように横並びに配置しつつ、ブロック要素の特性（幅や高さの指定など）も維持したい場合に適しています。
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex; /* flexboxコンテナを作成 */
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
</html>
2. float: left; を使用する方法
この方法は、<div> 要素を左寄せで横並びに配置します。ただし、親要素の高さが正しく計算されない場合があるため、clearfixなどのテクニックを併用する必要があります。
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.container {
overflow: hidden; /* clearfix */
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
</html>
3. Flexbox を使用する方法
この方法は、比較的新しいレイアウト方法であり、より柔軟な配置が可能です。display: flex; を親要素に指定し、子要素の配置を制御します。
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
</html>
4. Grid レイアウトを使用する方法
Grid レイアウトは、二次元のレイアウトを作成するための強力なツールです。display: grid; を親要素に指定し、grid-template-columns プロパティで列の数を指定します。
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3つの列を作成 */
gap: 10px; /* 要素間のギャップ */
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
</html>
- 単純な横並び:
display: inline-block;またはfloat: left; - 柔軟なレイアウト: Flexbox
- 複雑なグリッドレイアウト: Grid レイアウト
それぞれの方法にはメリットとデメリットがありますので、状況に合わせて最適な方法を選択してください。
