Webデザイナー必見！display: inline と inline-block を使いこなして表現力を豊かにしよう

2024-04-02

CSS display: inline と display: inline-block の違い

CSSプロパティ display は、HTML要素の表示方法を制御します。inline と inline-block は、テキスト内要素の表示方法を調整するために使用される2つの重要な値です。

それぞれの挙動

display: inline;
- テキスト内要素として扱われます。
- 幅と高さは自動的に設定されます。
- 上下の余白は調整できません (ただし、padding は設定可能です)。
- 水平方向に並べられます。
- 要素の配置を text-align プロパティで調整できます。
- インライン要素とブロック要素の両方の性質を持ちます。
- 上下の余白を調整できます。

使い分け

用途	適した値
テキスト内要素として並べたい	`display: inline;`
ボタンや画像のように、幅と高さ、余白を調整したい	`display: inline-block;`

例

<p>
  <span style="display: inline;">This is inline.</span>
  <span style="display: inline-block;">This is inline-block.</span>
</p>

補足

display: inline-block; は、IE7 以前のブラウザではサポートされていません。
display: flex; や display: grid; などの新しいレイアウトプロパティも存在します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS display: inline と display: inline-block の違い</title>
  <style>
    .inline {
      display: inline;
      background-color: red;
    }
    .inline-block {
      display: inline-block;
      background-color: blue;
      width: 100px;
      height: 50px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <p>
    <span class="inline">This is inline.</span>
    <span class="inline-block">This is inline-block.</span>
  </p>
</body>
</html>

解説

inline 要素は、テキスト内要素として表示されます。
inline-block 要素は、幅と高さ、余白が設定されています。

このサンプルコードは、display プロパティの inline と inline-block の違いを理解するためのものです。
実際の使用例では、必要に応じて他の CSS プロパティも組み合わせて使用してください。

CSS display: inline と display: inline-block の違いを説明する他の方法

図や画像を使って、それぞれの挙動を分かりやすく説明する。
例えば、テキスト内要素とブロック要素の違いをイラストで表現する。

対話的な説明

サンプルコードを実際に動かせるようにして、ユーザーがそれぞれの挙動を体験できるようにする。
例えば、ボタンをクリックして display プロパティを切り替えられるようにする。

具体的な例

以下は、視覚的な説明と対話的な説明を組み合わせた例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS display: inline と display: inline-block の違い</title>
  <style>
    .container {
      display: flex;
    }
    .box {
      width: 100px;
      height: 50px;
      margin: 10px;
      border: 1px solid black;
    }
    .inline {
      display: inline;
      background-color: red;
    }
    .inline-block {
      display: inline-block;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box inline">This is inline.</div>
    <div class="box inline-block">This is inline-block.</div>
  </div>
  <script>
    const buttons = document.querySelectorAll('button');
    buttons.forEach(button => {
      button.addEventListener('click', () => {
        const display = button.dataset.display;
        const boxes = document.querySelectorAll('.box');
        boxes.forEach(box => {
          box.style.display = display;
        });
      });
    });
  </script>
</body>
</html>