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

生徒

「先生、CSSで要素の表示方法を変えたいんですが、どうやって使うんですか？」

先生

「CSSではdisplayプロパティを使うと、要素がどのように画面に表示されるかを設定できます。」

生徒

「displayって難しそうな名前ですが、簡単に説明できますか？」

先生

「もちろんです。displayは英語で『表示』という意味です。要素をブロックのように独立して表示するか、文章の中に溶け込むように表示するかを決めるものです。」

1. displayプロパティの基本とは？

displayプロパティは、HTMLの要素が画面上でどのように表示されるかを指定するCSSの基本プロパティです。特に、block、inline、inline-blockの3つは初心者がよく使う重要な値です。これを理解すると、ウェブページのレイアウトがぐっとコントロールしやすくなります。

簡単な例えで言うと、blockは『大きな段ボール箱』のように一行全体を使って独立して表示されるイメージ、inlineは『文中の文字』のように他の要素と同じ行に並んで表示されるイメージ、inline-blockは『文字のように並ぶけど箱の中に詰め物がある』イメージです。

2. blockの特徴と使い方

blockはブロック要素として表示され、横幅は自動でいっぱいになり、改行されます。代表的なHTMLタグでは<div>や<p>、<h1>などがあります。これにdisplay: blockを指定すると、どんな要素でもブロック要素として独立して表示できます。


<style>
    .block-box {
        display: block;
        width: 200px;
        height: 50px;
        background-color: #add8e6;
        margin-bottom: 10px;
    }
</style>

<div class="block-box">ブロック要素の例</div>
<div class="block-box">もう一つのブロック</div>

ブラウザ表示

上記の例では、2つのdiv要素がそれぞれ独立して改行されて表示されます。マージンやパディングも使いやすく、レイアウトを作る基本中の基本です。

3. inlineの特徴と使い方

inlineは文字のように他の要素と同じ行に並ぶ表示方法です。横幅や高さを直接指定しても反映されません。代表的なHTMLタグは<span>や<a>です。文章中に色や装飾を加えるときに便利です。


<style>
    .inline-text {
        display: inline;
        color: red;
        font-weight: bold;
    }
</style>

<p>これは<span class="inline-text">インライン要素</span>の例です。</p>

ブラウザ表示

文章中にspanを置くことで、文字だけ赤く太くなり、行の中に自然に溶け込みます。ボックスのような独立表示は必要ない場合に便利です。

4. inline-blockの特徴と使い方

inline-blockはinlineのように横並びできるけれど、blockのように幅や高さを指定できる便利な表示方法です。ボタンや小さなカードレイアウトなどに活用できます。


<style>
    .inline-block-box {
        display: inline-block;
        width: 150px;
        height: 50px;
        background-color: #90ee90;
        margin-right: 10px;
        text-align: center;
        line-height: 50px;
    }
</style>

<div class="inline-block-box">ボックス1</div>
<div class="inline-block-box">ボックス2</div>
<div class="inline-block-box">ボックス3</div>

ブラウザ表示

この例では3つのボックスが横に並び、幅や高さも自由に指定できます。文章中に配置できるので、ボタンやメニューを作るときに非常に便利です。