CSS 速習チュートリアル

CSS displayプロパティ

display プロパティは、レイアウトを制御する上で最も重要なCSSプロパティです。

1. display プロパティの基本 (The display Property)

display プロパティは、要素をどのように表示するか（レンダリングの振る舞い）を指定します。

すべてのHTML要素には、その要素の種類に応じたデフォルトの display 値があります。ほとんどの要素のデフォルト値は block または inline です。

2. ブロックレベル要素 (Block-level Elements)

ブロックレベル要素（Block-level element）は、常に新しい行から始まり、利用可能な全幅（左端から右端まで）を占有します。

2.1 ブロックレベル要素の例

以下の要素は、HTMLにおける代表的なブロックレベル要素です。

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>
/* divはデフォルトでブロックレベル */
div {
  background-color: lightgrey;
  width: 100%; /* 親要素の全幅を占有 */
}

3. インライン要素 (Inline Elements)

インライン要素（Inline element）は、新しい行から始まらず、必要なだけの幅しか占有しません。

3.1 インライン要素の例

以下の要素は、HTMLにおける代表的なインライン要素です。

  • <span>
  • <a>
  • <img>
<p>これは <span>インライン要素</span> の例です。</p>

4. デフォルトの表示値の上書き

すべての要素にはデフォルトの display 値がありますが、この値を上書きすることで、Webページの特定の外観を作成し、なおかつWeb標準に準拠したセマンティックなマークアップを維持できます。

よくある例としては、リストアイテム（<li>）を inline に変更して水平メニューを作成する手法があります。

4.1 display 値の変更例

/* li要素を横並びにする */
li {
  display: inline;
}

/* spanをブロック化して幅や高さを適用可能にする */
span {
  display: block;
}

/* a要素をブロック化してクリック領域を広げる */
a {
  display: block;
}

       注意: 要素の表示形式（display）を変更しても、その要素が「何であるか」という本質は変わりません。例えば、<span> を display: block; に設定したとしても、その中にブロックレベル要素（<div> など）を配置することは、HTMLの仕様上許可されていません。

5. 要素を非表示にする：display: none vs visibility: hidden

要素を隠すには、display: none; または visibility: hidden; を使用しますが、これらにはレンダリング上の大きな違いがあります。

5.1 display: none

display: none; を指定すると、その要素はWebページから完全に削除されます。ページ上には表示されず、その要素が本来占有していたスペースも詰められます。JavaScriptと組み合わせて、要素を削除せずに動的に表示・非表示を切り替える際に多用されます。

.hidden-element {
  display: none; /* スペースもろとも消える */
}

5.2 visibility: hidden

visibility: hidden; を指定すると、要素は非表示になりますが、その要素が占有していたスペースはそのまま保持されます。つまり、要素は見えなくなるだけで、レイアウト上には「透明な箱」として残り続けます。

.invisible-element {
  visibility: hidden; /* 見えないがスペースは残る */
}

5.3 非表示のコード比較

<style>
  h1.hidden { display: none; }
</style>

<style>
  h1.invisible { visibility: hidden; }
</style>

6. その他の display 値 (Other Display Values)

display プロパティには、他にも以下のようなモダンなレイアウトに不可欠な値が存在します。

  • inline-block: インラインのように横並びになりますが、ブロック要素のように width や height を指定できます。
  • flex: フレックスボックスコンテナとして動作し、柔軟なレイアウトを可能にします。
  • grid: グリッドレイアウトコンテナとして動作し、2次元のグリッドシステムを構築します。