CSSの基礎：ディスプレイプロパティ

Posted on by

CSSのディスプレイプロパティ（display プロパティ）は、
HTML要素の表示方法を決定する重要なプロパティです。
display プロパティを使用することで、要素をブロックレベル、
インラインレベル、またはその両方の特性を持つインラインブロックレベルに設定できます。
また、要素を非表示にすることもできます。

display: block

定義

block 値を持つ要素は、ブロックレベル要素として表示されます。
ブロックレベル要素は、親の横幅全体を占有し、新しい行を開始します。

特徴

  • 親の横幅全体を占有する。
  • 新しい行を開始する。
  • 幅、高さ、マージン、パディングを設定できる。

使用例

css

.block-element {
    display: block;
    width: 100%;
    background-color: lightblue;
}

HTML

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

display: inline

定義

inline 値を持つ要素は、インラインレベル要素として表示されます。
インラインレベル要素は、隣接する要素と同じ行に並びます。

特徴

  • 親の横幅全体を占有しない。
  • 新しい行を開始しない。
  • 幅や高さを設定できない（マージンやパディングは設定できるが、上下のマージンやパディングは影響しない）。

使用例

css

.inline-element {
    display: inline;
    background-color: lightgreen;
}

HTML

<span class="inline-element">This is an inline-level element.</span>
<a href="#" class="inline-element">This is another inline-level element.</a>

display: inline-block

定義

inline-block 値を持つ要素は、
インラインレベルの特性とブロックレベルの特性を組み合わせた表示をします。
インラインブロック要素は、隣接する要素と同じ行に並びますが、幅や高さを設定することができます。

特徴

  • 新しい行を開始しない。
  • 幅や高さを設定できる。
  • 他のインライン要素と同じ行に並ぶ。

使用例

css

.inline-block-element {
    display: inline-block;
    width: 150px;
    height: 50px;
    background-color: lightcoral;
}

HTML

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

display: none

定義

none 値を持つ要素は、完全に表示されなくなります。
要素はレンダリングツリーに含まれず、ページレイアウトに影響を与えません。

特徴

  • 要素は表示されない。
  • 要素はレイアウトやページの他の要素に影響を与えない。

使用例

CSS

.hidden-element {
    display: none;
}

HTML

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

まとめ

CSSのディスプレイプロパティは、要素のレイアウトと表示方法を制御するための強力なツールです。
block はブロックレベル要素を作成し、親の横幅全体を占有します。
inline はインラインレベル要素を作成し、隣接する要素と同じ行に並びます。
inline-block は、インラインとブロックの特性を組み合わせた要素を作成し、
同じ行に並びながら幅や高さを設定できます。
none は要素を非表示にし、ページのレイアウトに影響を与えません。