CSSでdisplayの違いを図解で理解！block・inline・inline-blockの使い方

1. display: blockとは

1. display: blockとは

blockはボックスが常に新しい行から始まる表示方法です。幅はデフォルトで親要素いっぱいになります。見出しや段落などがblockです。

<style>
    .block-box {
        display: block;
        width: 200px;
        background-color: lightblue;
        margin-bottom: 10px;
        padding: 5px;
    }
</style>
<div class="block-box">block要素1</div>
<div class="block-box">block要素2</div>

2. display: inlineとは

2. display: inlineとは

inlineは文字やリンクのように横に並ぶ表示方法です。高さや幅は指定できず、文字と同じラインに表示されます。

<style>
    .inline-box {
        display: inline;
        background-color: lightgreen;
        margin-right: 5px;
        padding: 5px;
    }
</style>
<span class="inline-box">inline1</span>
<span class="inline-box">inline2</span>
<span class="inline-box">inline3</span>

3. display: inline-blockとは

3. display: inline-blockとは

inline-blockは横に並びながらも、widthやheightが指定できる表示方法です。デザインを調整したい場合に便利です。

<style>
    .inline-block-box {
        display: inline-block;
        width: 100px;
        height: 50px;
        background-color: lightcoral;
        margin-right: 5px;
        text-align: center;
        vertical-align: middle;
        line-height: 50px;
    }
</style>
<div class="inline-block-box">box1</div>
<div class="inline-block-box">box2</div>
<div class="inline-block-box">box3</div>

4. 使い分けのポイント

4. 使い分けのポイント

文章や見出しのように新しい行で表示したい場合はblock。文字やリンクのように横に並べたい場合はinline。ボックスを横に並べたいけど大きさも調整したい場合はinline-blockを使います。これを理解すると、CSSのレイアウトがぐっと簡単になります。

5. 初心者向けの活用例

5. 初心者向けの活用例

• メニューの横並びボタンはinline-block
• 段落や見出しはblock
• 文字装飾やリンクはinline

これらを組み合わせることで、自然なウェブページデザインが可能になります。特にinline-blockはレスポンシブデザインでも便利です。

まとめ

まとめ

ウェブサイトのデザインを構築する上で、CSSのdisplayプロパティを正しく理解することは、レイアウト崩れを防ぎ、意図通りの外観を実現するための最も重要なステップの一つです。これまで解説してきた通り、HTML要素にはそれぞれデフォルトの表示形式が存在しますが、CSSのdisplayプロパティを上書きすることで、その性質を自由に変更することができます。

あらためて、主要な3つの値について振り返ってみましょう。 まずは「display: block;」です。これは、要素が画面の横幅いっぱいに広がり、前後に改行が入る性質を持っています。divタグ、h1〜h6タグ、pタグなどがこれに該当します。構造を作るための「箱」として機能し、width（幅）やheight（高さ）を自由に指定できるほか、上下左右のmargin（外側の余白）やpadding（内側の余白）が正確に反映されるのが特徴です。

次に「display: inline;」です。これは文章の中の一部として扱われる要素で、spanタグ、aタグ、strongタグなどがデフォルトでこの設定になっています。横に並ぶという性質がありますが、widthやheightを指定することができず、上下のmarginも反映されません。主にテキストの装飾や、リンクの設定など、文章の流れを止めずに特定の箇所を指定したい場合に活用されます。

そして、最も柔軟性が高いのが「display: inline-block;」です。これは「横に並ぶ」というinlineの長所と、「サイズ指定ができる」というblockの長所を兼ね備えたハイブリッドな設定です。ナビゲーションメニューのボタンを横に並べたり、画像を説明文の横に配置したりする際に非常に重宝します。

各プロパティの比較表

それぞれの違いを整理するために、以下の表で特性を比較してみましょう。これを頭に入れておくだけで、コーディングのスピードが格段に上がります。

実践的なコード例：カードレイアウトの作成

実際の現場でよく使われる、inline-blockを利用した画像付きカードの横並びレイアウトを作成してみましょう。block要素であるdivをinline-blockに変えることで、簡単に横並びのリストを作成できます。

<style>
.card-container {
    padding: 20px;
    background-color: #f8f9fa;
}

.item-card {
    display: inline-block;
    width: 160px;
    margin: 10px;
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
    vertical-align: top;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

.item-card img {
    width: 120px;
    height: 120px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.item-card p {
    font-size: 14px;
    color: #333;
    margin: 0;
}
</style>

<div class="card-container">
    <div class="item-card">
        <img src="/img/sample120-120.jpg" alt="サンプル画像1">
        <p>商品アイテムA</p>
    </div>
    <div class="item-card">
        <img src="/img/sample120-120.jpg" alt="サンプル画像2">
        <p>商品アイテムB</p>
    </div>
    <div class="item-card">
        <img src="/img/sample120-120.jpg" alt="サンプル画像3">
        <p>商品アイテムC</p>
    </div>
</div>

このように、displayを使い分けることで、複雑なレイアウトもシンプルに記述できるようになります。特に最近ではFlexbox（display: flex）を使用することも多いですが、その基礎となるのはこれらの概念です。要素がどの程度の空間を占有し、どのように配置されるのかを常に意識して、読みやすくメンテナンス性の高いコードを目指しましょう。