HTMLとCSSでdivを横並びに配置する方法

HTMLとCSSでdivを横並びに配置する方法
- HTMLとCSSでdivを横並びに配置する方法

div要素を横並びに配置する方法はいくつかありますが、ここではflexboxを使った方法を説明します。
flexboxは、コンテナ内の要素を柔軟に配置するためのCSSレイアウトモデルで、特に要素を横並びにしたり、縦並びにしたりするのに適しています。

1. HTMLファイルの作成

まず、HTMLファイルを作成し、div要素を配置します。
この例では、test-containerというクラス名を持つdivがコンテナとして機能し、その中に3つのtest-boxクラスのdivを配置します。
それぞれのdivには、"Box 1", "Box 2", "Box 3"というテキストが表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Divの横並び例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="test-container">
    <div class="test-box">Box 1</div>
    <div class="test-box">Box 2</div>
    <div class="test-box">Box 3</div>
  </div>
</body>
</html>

このHTMLファイルでは、CSSファイル（styles.css）を外部ファイルとしてリンクしています。

2. CSSファイルの作成

次に、CSSファイルを作成し、div要素を横並びに配置するためのスタイルを定義します。
このCSSファイルでは、test-containerがフレックスコンテナとなり、子要素であるtest-boxがその中で横並びに配置されます。

/* styles.css */
#test-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 20px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 2px solid #ccc;
}

.test-box {
  width: 150px;
  height: 150px;
  margin: 10px;
  background-color: lightcoral;
  color: white;
  text-align: center;
  line-height: 150px;
  font-size: 18px;
  border-radius: 8px;
}

ここで、重要なプロパティは以下の通りです。

display: flex;

test-containerがフレックスコンテナとなり、その子要素はフレックスアイテムとして扱われます。

justify-content: space-around;

フレックスアイテム間に均等なスペースを配置します。
これにより、各test-boxの間に余白が作られます。

align-items: center;

フレックスアイテムを縦方向に中央揃えにします。

marginやpadding

コンテナやボックスに対して外側や内側の余白を調整します。

background-color, color, border, border-radius

ボックスの背景色やテキストの色、枠線、角の丸みを指定します。

3. HTMLとCSSの説明

この例では、test-container内の3つのtest-boxが横並びに表示され、中央に揃えられています。
フレックスボックスを使うことで、複雑な計算や配置を行わなくても簡単に要素を整列させることができます。

また、フレックスボックスはレスポンシブデザインにも適しており、画面サイズが変わった場合でも、要素の配置が崩れにくいという利点があります。
例えば、画面が狭くなると、flex-wrap: wrap;を使用することで、要素を次の行に折り返すことも可能です。
このようにして、異なるデバイスや画面サイズに対応するデザインを容易に作成することができます。

最後に、複数のdivを横並びに配置する方法として、フレックスボックス以外にもグリッドレイアウトやフロートなどの方法がありますが、フレックスボックスはその簡潔さと柔軟性から、現在最も広く使用されている方法の一つです。
この方法を理解し、使いこなすことで、より高度なレイアウトのデザインが可能になります。