【画像付き解説】HTMLとCSSで`inline-block`要素の前後に改行を設定する方法5選！

2024-07-27

HTMLとCSSで特定の`inline-block`要素の前後に改行を設定する方法

inline-block要素は、インライン要素とブロック要素の両方の特性を持つ要素です。つまり、他の要素と横並びに表示される一方で、幅や高さを設定したり、余白を調整したりすることができます。

しかし、デフォルトではinline-block要素の前後に改行が入らず、次の要素と密接に表示されます。そこで今回は、CSSを使って特定のinline-block要素の前後に改行を設定する方法をいくつかご紹介します。

方法1： displayプロパティとmarginプロパティを使用する

最も簡単な方法は、displayプロパティとmarginプロパティを組み合わせて使用するものです。

<div class="inline-block">要素1</div>
<div class="inline-block">要素2</div>

.inline-block {
  display: inline-block;
  margin-bottom: 10px; /* 改行したい高さ */
}

このコードでは、すべてのinline-block要素の下に10pxの余白を設定することで、要素間に改行を挿入しています。

方法2： vertical-alignプロパティを使用する

vertical-alignプロパティを使用すると、要素の垂直方向の位置を調整することができます。このプロパティをtopに設定することで、要素の上に余白を空け、改行を挿入することができます。

<div class="inline-block">要素1</div>
<div class="inline-block">要素2</div>

.inline-block {
  display: inline-block;
  vertical-align: top;
}

方法3： word-breakプロパティを使用する

word-breakプロパティを使用すると、単語の折り返し方法を制御することができます。このプロパティをbreak-allに設定することで、単語が途中で折り返され、要素間に改行を挿入することができます。

<div class="inline-block">長い単語を含む要素</div>
<div class="inline-block">要素2</div>

.inline-block {
  display: inline-block;
  word-break: break-all;
}

このコードでは、長い単語を含むinline-block要素のみを対象に、単語が途中で折り返されるように設定しています。

方法4： <br>タグを使用する

<br>タグは、強制的に改行を挿入するHTMLタグです。このタグをinline-block要素の前後に挿入することで、改行を設定することができます。

<div class="inline-block">要素1</div><br>
<div class="inline-block">要素2</div>

注意点

上記の方法を使用する際には、以下の点に注意する必要があります。

方法1と方法2は、すべてのinline-block要素に影響を与えます。特定の要素だけに適用したい場合は、CSSセレクタを調整する必要があります。
方法3は、長い単語を含む要素のみを対象にしていますが、意図しない改行が発生する可能性があります。
方法4は、最もシンプルな方法ですが、HTMLコードが冗長になるという欠点があります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inline-block要素の前後に改行を設定</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="inline-block element1">要素1</div>
    <div class="inline-block element2">要素2</div>
    <div class="inline-block element3">長い単語を含む要素</div>
    <div class="inline-block element4">要素4</div>
  </div>
</body>
</html>

CSS

.container {
  display: flex; /* flexboxレイアウトを使用する */
  flex-wrap: wrap; /* 要素を折り返す */
}

.inline-block {
  display: inline-block;
  margin-bottom: 10px; /* 方法1 */
  vertical-align: top; /* 方法2 */
  word-break: break-all; /* 方法3 */
}

.element2 {
  margin-top: 10px; /* 方法4 */
}

このコードでは、以下の方法でinline-block要素の前後に改行を設定しています。

方法1：marginプロパティを使用する
方法2：vertical-alignプロパティを使用する
方法3：word-breakプロパティを使用する
- element3のみを対象に、長い単語が途中で折り返されるように設定しています。
方法4：<br>タグを使用する

上記はあくまでも一例であり、状況に合わせて様々な方法を組み合わせて使用することができます。

ポイント

方法1、方法2、方法3は、CSSセレクタを調整することで、特定の要素だけに適用することができます。
方法4は、HTMLコードが冗長になるため、必要最低限の使用に留めることをおすすめします。

::before擬空要素を使用して、改行用の要素を挿入することができます。

<div class="inline-block">要素1</div>
<div class="inline-block">要素2</div>

.inline-block::before {
  content: "";
  display: block;
  height: 10px; /* 改行したい高さ */
}

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

positionプロパティとtopプロパティを使用して、要素を垂直方向に移動することで、改行を挿入することができます。

<div class="inline-block">要素1</div>
<div class="inline-block">要素2</div>

.inline-block {
  position: relative;
  top: 10px; /* 改行したい高さ */
}

floatプロパティを使用する

floatプロパティを使用して、要素を左右に寄せ、隣接する要素と重ならないようにすることで、改行を挿入することができます。

<div class="inline-block">要素1</div>
<div class="inline-block">要素2</div>

.inline-block {
  float: left;
  clear: both;
}

このコードでは、すべてのinline-block要素を左に寄せ、かつ、その下に発生するクリアランスを解除することで、要素間に改行を挿入しています。

displayプロパティをtableに設定する

displayプロパティをtableに設定することで、要素をテーブルセルとして表示し、テーブルレイアウトの規則に従って配置することができます。

<div class="inline-block">要素1</div>
<div class="inline-block">要素2</div>

.inline-block {
  display: table;
  table-layout: auto; /* 自動レイアウト */
}

このコードでは、すべてのinline-block要素をテーブルセルとして表示し、自動レイアウトを適用することで、要素間に改行を挿入しています。

<div class="inline-block">要素1</div>
<div class="inline-block">要素2</div>

.inline-block {
  display: table-cell;
  vertical-align: middle; /* 垂直方向に中央揃え */
}

<div class="inline-block">要素1</div>
<div class="inline-block">要素2</div>

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 列の自動調整 */
  grid-gap: 10px; /* 要素間の隙間 */
}

.inline-block {
  display: inline-block;
}