HTML、CSS、および vertical-alignment を使用して div のコンテンツを下部に配置する方法

2024-04-02

HTML、CSS、および vertical-alignment を使用して div のコンテンツを下部に配置する方法

margin-top プロパティを使用する

これは、最も簡単で最も一般的な方法です。 margin-top プロパティを使用して、div の上部の余白を設定します。次の例では、div の上部の余白を 10px に設定しています。

.div {
  margin-top: 10px;
}

padding-top プロパティを使用して、div の上部の余白を設定することもできます。ただし、margin-top とは異なり、padding-top は div のコンテンツの幅にも影響します。次の例では、div の上部の余白を 10px に設定しています。

.div {
  padding-top: 10px;
}

position プロパティと bottom プロパティを使用する

position プロパティを relative または absolute に設定し、bottom プロパティを使用して、div の下部の位置を設定できます。次の例では、div の位置を相対的に設定し、下部から 10px 離れた位置に配置しています。

.div {
  position: relative;
  bottom: 10px;
}

display プロパティを flex または inline-flex に設定し、justify-content プロパティを flex-end に設定することで、div のコンテンツを下部に配置できます。次の例では、div のコンテンツを下部に配置しています。

.div {
  display: flex;
  justify-content: flex-end;
}

vertical-align プロパティを使用して、div 内のテキストを垂直方向に配置できます。次の例では、div 内のテキストを下部に配置しています。

.div {
  vertical-align: bottom;
}

これらの方法のどれを使用するかは、要件によって異なります。ただし、最も一般的で簡単な方法は、margin-top プロパティまたは padding-top プロパティを使用することです。

補足

上記の例では、すべてのスタイルを .div クラスに適用しています。独自のセレクターを使用する必要があります。
これらの方法を組み合わせて使用することもできます。
詳細については、CSS の垂直方向の配置に関するチュートリアルを参照してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード</title>
  <style>
    .div {
      /* 方法 1 */
      margin-top: 10px;

      /* 方法 2 */
      /* padding-top: 10px; */

      /* 方法 3 */
      /* position: relative;
      bottom: 10px; */

      /* 方法 4 */
      /* display: flex;
      justify-content: flex-end; */

      /* 方法 5 */
      /* vertical-align: bottom; */
    }
  </style>
</head>
<body>
  <div class="div">
    これは div のコンテンツです。
  </div>
</body>
</html>

上記コードをブラウザで開くと、div のコンテンツが下部に配置されます。使用する方法は、要件によって異なります。

div のコンテンツを下部に配置する他の方法

CSS Grid レイアウトを使用すると、div をグリッドレイアウトに配置できます。次の例では、div を 1 行 1 列のグリッドレイアウトに配置し、コンテンツを下部に配置しています。

.div {
  display: grid;
  align-items: end;
}

margin: auto を使用すると、div を水平方向に中央揃えできます。次の例では、div を水平方向に中央揃えし、コンテンツを下部に配置しています。

.div {
  margin: auto;
  text-align: center;
}

position: absolute と bottom: 0 を使用すると、div を親要素の下部に配置できます。次の例では、div を親要素の下部に配置しています。

.div {
  position: absolute;
  bottom: 0;
}

transform: translateY を使用すると、div を垂直方向に移動できます。次の例では、div を下方向に 10px 移動しています。

.div {
  transform: translateY(10px);
}

html css vertical-alignment

HTML、CSS、および vertical-alignment を使用して div のコンテンツを下部に配置する方法