CSSのdisplayプロパティの使い方と解説｜block、inline、inline-block、noneの違いとは

displayとは

CSSのdisplayプロパティは、要素の表示方法を指定するためのプロパティです。displayプロパティは、要素がブロックレベル要素として表示されるか、インライン要素として表示されるかを制御します。

blockの解説と使い方

blockは、ブロックレベル要素として要素を表示します。要素は横幅いっぱいの領域を占有し、改行されるため、独立したブロックとして配置されます。

以下はblockを指定した要素の例です。

<div class="block-element">
  This is a block element.
</div>

.block-element {
  display: block;
}

inlineの解説と使い方

inlineは、インライン要素として要素を表示します。要素は横幅が内容に合わせて自動的に調整され、同じ行に他のインライン要素と共存します。

以下はinlineを指定した要素の例です。

<span class="inline-element">
  This is an inline element.
</span>

.inline-element {
  display: inline;
}

inline-blockの解説と使い方

inline-blockは、インライン要素として要素を表示しつつ、幅や高さを指定することができます。要素は同じ行に表示され、ブロックレベル要素と同様に幅や高さを持ちます。

以下はinline-blockを指定した要素の例です。

<span class="inline-block-element">
  This is an inline-block element.
</span>

.inline-block-element {
  display: inline-block;
  width: 200px;
  height: 100px;
}

noneの解説と使い方

noneは、要素を非表示にします。要素はレイアウトから完全に取り除かれ、スペースも占有しません。noneを指定すると、要素が存在しないかのようになります。

以下はnoneを指定した要素の例です。

<div class="none-element">
  This element will be hidden.
</div>

.none-element {
  display: none;
}

まとめ

displayプロパティは、要素の表示方法を制御するための重要なプロパティです。以下のまとめによってそれぞれの使い方を把握しましょう。

• block: ブロックレベル要素として表示され、横幅いっぱいの領域を占有します。
• inline: インライン要素として表示され、横幅が内容に合わせて調整されます。
• inline-block: インライン要素として表示されつつ、幅や高さを指定できます。
• none: 要素を非表示にし、レイアウトから完全に取り除きます。

これらのdisplayプロパティを適切に使用することで、要素の表示とレイアウトを柔軟に制御できます。

以上が、CSSのdisplayプロパティについて解説したブログ記事のサンプルです。