margin、text-align、positionプロパティで水平方向に要素を配置

2024-04-07

HTML、CSS、配置に関する「CSS - divs を水平方向に配置する」

前提条件

このチュートリアルを理解するには、以下の知識が必要です。

HTML の基礎
CSS の基礎
div 要素

方法

div 要素を水平方向に配置するには、いくつかの方法があります。

float プロパティを使用して、要素を左右に配置できます。

.div {
  float: left;
}

このコードは、.div クラスを持つすべての要素を左側に配置します。

display プロパティを使用して、要素の表示形式を指定できます。

.div {
  display: inline-block;
}

このコードは、.div クラスを持つすべての要素をインラインブロックとして表示します。インラインブロック要素は、水平方向に並べられます。

flexbox は、要素を柔軟に配置するためのレイアウトシステムです。

.container {
  display: flex;
}

.div {
  flex: 1;
}

このコードは、.container クラスを持つ要素を flex コンテナとして表示し、.div クラスを持つ要素を flex アイテムとして表示します。flex: 1; は、すべての flex アイテムが同等の幅になるように指定します。

上記以外にも、以下のような方法があります。

margin プロパティ
text-align プロパティ
position プロパティ

このチュートリアルでは、CSS を使用して div 要素を水平方向に配置する方法について説明しました。

練習問題

以下の練習問題を解いて、理解度を確認しましょう。

3 つの div 要素を水平方向に並べて、それぞれに異なる背景色を設定してください。
div 要素を水平方向に中央揃えにしてください。
div 要素を左右に等間隔に配置してください。

float プロパティ

<div class="container">
  <div class="div1">div1</div>
  <div class="div2">div2</div>
  <div class="div3">div3</div>
</div>

.container {
  width: 500px;
  border: 1px solid #ccc;
}

.div1 {
  float: left;
  background-color: red;
  width: 100px;
  height: 100px;
}

.div2 {
  float: left;
  background-color: green;
  width: 100px;
  height: 100px;
}

.div3 {
  float: left;
  background-color: blue;
  width: 100px;
  height: 100px;
}

display プロパティ

<div class="container">
  <div class="div1">div1</div>
  <div class="div2">div2</div>
  <div class="div3">div3</div>
</div>

.container {
  width: 500px;
  border: 1px solid #ccc;
}

.div1 {
  display: inline-block;
  background-color: red;
  width: 100px;
  height: 100px;
}

.div2 {
  display: inline-block;
  background-color: green;
  width: 100px;
  height: 100px;
}

.div3 {
  display: inline-block;
  background-color: blue;
  width: 100px;
  height: 100px;
}

flexbox

<div class="container">
  <div class="div1">div1</div>
  <div class="div2">div2</div>
  <div class="div3">div3</div>
</div>

.container {
  width: 500px;
  border: 1px solid #ccc;
  display: flex;
}

.div1 {
  flex: 1;
  background-color: red;
  width: 100px;
  height: 100px;
}

.div2 {
  flex: 1;
  background-color: green;
  width: 100px;
  height: 100px;
}

.div3 {
  flex: 1;
  background-color: blue;
  width: 100px;
  height: 100px;
}

練習問題

3 つの div 要素を水平方向に並べて、それぞれに異なる背景色を設定してください。

<div class="container">
  <div class="div1">div1</div>
  <div class="div2">div2</div>
  <div class="div3">div3</div>
</div>

.container {
  width: 500px;
  border: 1px solid #ccc;
}

.div1 {
  display: inline-block;
  background-color: red;
  width: 100px;
  height: 100px;
}

.div2 {
  display: inline-block;
  background-color: green;
  width: 100px;
  height: 100px;
}

.div3 {
  display: inline-block;
  background-color: blue;
  width: 100px;
  height: 100px;
}

div 要素を水平方向に中央揃えにしてください。

<div class="container">
  <div class="div1">div1</div>
  <div class="div2">div2</div>
  <div class="div3">div3</div>
</div>

.container {
  width: 500px;

水平方向に div 要素を配置するその他の方法

<div class="container">
  <div class="div1">div1</div>
  <div class="div2">div2</div>
  <div class="div3">div3</div>
</div>

.container {
  width: 500px;
  border: 1px solid #ccc;
}

.div1 {
  margin-right: 10px;
}

.div3 {
  margin-left: 10px;
}

このコードは、.div1 と .div3 の左右に 10px の余白を設定します。

text-align プロパティを使用して、テキストの配置を指定できます。

<div class="container">
  <div class="div1">div1</div>
  <div class="div2">div2</div>
  <div class="div3">div3</div>
</div>

.container {
  width: 500px;
  border: 1px solid #ccc;
  text-align: center;
}

このコードは、.container 内のすべての要素を水平方向に中央揃えします。

<div class="container">
  <div class="div1">div1</div>
  <div class="div2">div2</div>
  <div class="div3">div3</div>
</div>

.container {
  width: 500px;
  border: 1px solid #ccc;
  position: relative;
}

.div1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.div3 {
  position: absolute;
  right: 50%;
  transform: translateX(-50%);
}