先生と生徒の会話形式で理解しよう

生徒

「CSSで要素の表示方法が違うって聞きました。blockとかinlineとかinline-blockって何ですか？」

先生

「それぞれの要素の表示方法を決めるプロパティがdisplayです。blockはブロック要素、inlineはインライン要素、inline-blockはその中間的な要素を作ります。」

生徒

「具体的にどう違うんですか？」

先生

「わかりやすく図で説明しますね。blockは横幅いっぱいを使い、新しい行に表示されます。inlineは文字のように横に並びます。inline-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とは

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とは

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>

ブラウザ表示