CSSの display プロパティ

 CSSの display プロパティは、HTML要素がどのように配置され、他の要素とどのように相互作用するかを決定する上で非常に重要な役割を果たします。要素のボックスの種類（ブロックレベル、インラインレベルなど）や、子要素のレイアウト方法（フレックスボックス、グリッドなど）を制御するために使用されます。

ここでは、主要な display の値とその使用方法を解説します。

1. display: block; (ブロックレベル要素)

• 要素は親要素の利用可能な幅全体を占有し、常に新しい行から開始されます。
• 幅（width）と高さ（height）のプロパティ、内側余白（padding）、外側余白（margin）のすべての辺に影響を与えます。
• 他のブロックレベル要素やインラインレベル要素を内包できます。

主な要素: <div>, <p>, <h1>～<h6>, <ul>, <ol>, <li>, <form> など

使用例:

HTML

<div style="background-color: lightblue; display: block; width: 200px; height: 100px; margin-bottom: 10px;">ブロック要素1</div>
<div style="background-color: lightcoral; display: block; width: 300px; height: 50px;">ブロック要素2</div>

2. display: inline; (インラインレベル要素)

• 要素は必要な幅だけを占有し、テキストの流れの中に配置されます。
• 幅（width）と高さ（height）のプロパティは無視されます。
• 内側余白（padding）は左右には影響しますが、上下には要素の高さに影響を与えません。
• 外側余白（margin）は左右には影響しますが、上下には他のインライン要素との間隔に影響を与えません。
• 他のインラインレベル要素を内包できますが、ブロックレベル要素を内包することは推奨されません。

主な要素: <span>, <a>, <img>, <strong>, <em>, <br> など

使用例:

HTML

<span style="background-color: lightgreen; display: inline; padding: 5px;">インライン要素1</span>
<span style="background-color: lightyellow; display: inline; padding: 10px;">インライン要素2</span>

3. display: inline-block; (インラインブロックレベル要素)

• インライン要素のようにテキストの流れの中に配置されますが、ブロックレベル要素のように幅（width）と高さ（height）のプロパティ、内側余白（padding）、外側余白（margin）のすべての辺に影響を与えます。
• 他のインライン要素やブロックレベル要素を内包できます。

使用例:

HTML

<div style="border: 1px solid black;">
  <div style="background-color: lightskyblue; display: inline-block; width: 150px; height: 80px; margin-right: 10px;">インラインブロック1</div>
  <div style="background-color: lightsalmon; display: inline-block; width: 100px; height: 60px;">インラインブロック2</div>
</div>

4. display: none; (非表示)

• 要素は完全に非表示になり、ドキュメントツリーからも削除されたように扱われます。
• 非表示の要素はレイアウトに影響を与えず、スペースも占有しません。

使用例:

HTML

<div id="hiddenElement" style="background-color: gray; display: none;">この要素は非表示です。</div>
<button onclick="document.getElementById('hiddenElement').style.display = 'block';">表示する</button>

5. display: flex; (フレックスボックスレイアウト)

• 要素をフレックスコンテナとして定義し、その子要素（フレックスアイテム）のレイアウトを柔軟に制御するための強力な仕組みを提供します。
• 主に一次元のレイアウト（行または列）に適しています。
• 子要素の順序、配置、サイズ、間隔などを柔軟に調整できます。

使用例:

HTML

<div style="display: flex; background-color: #eee; padding: 10px;">
  <div style="background-color: lightcoral; width: 100px; height: 50px; margin-right: 10px;">アイテム1</div>
  <div style="background-color: lightgreen; width: 150px; height: 70px;">アイテム2</div>
  <div style="background-color: lightblue; width: 80px; height: 60px; margin-left: 10px;">アイテム3</div>
</div>

6. display: grid; (グリッドレイアウト)

• 要素をグリッドコンテナとして定義し、その子要素（グリッドアイテム）を二次元のグリッドシステムに基づいてレイアウトするための強力な仕組みを提供します。
• 複雑なページレイアウトや構造化されたコンテンツの配置に適しています。
• 行と列の定義、アイテムの配置領域などを細かく制御できます。

使用例:

HTML

<div style="display: grid; grid-template-columns: 1fr 2fr 1fr; grid-gap: 10px; background-color: #f0f0f0; padding: 10px;">
  <div style="background-color: lightcoral; height: 80px;">アイテム1</div>
  <div style="background-color: lightgreen; height: 80px;">アイテム2</div>
  <div style="background-color: lightblue; height: 80px;">アイテム3</div>
  <div style="background-color: lightyellow; height: 80px;">アイテム4</div>
  <div style="background-color: lightpink; height: 80px;">アイテム5</div>
</div>

7. その他の display の値:

• inline-table: 要素をインライン要素のように配置しつつ、内部をテーブルとして扱います。
• list-item: 要素をリスト項目として扱います（<li> 要素のデフォルト）。
• table, table-row, table-cell, table-caption, table-column, table-colgroup, table-row-group, table-header-group, table-footer-group: HTMLのテーブル要素と同様の表示形式を要素に適用します。
• contents: 要素自体は描画されず、その子要素が親要素に直接配置されたように扱われます（アクセシビリティに注意が必要）。

display プロパティの使い分け:

• 基本的な構造要素: div, p, h1 などは通常 block で使用し、コンテンツのまとまりや段落を形成します。
• テキストの一部や装飾: span, a, strong などは通常 inline で使用し、テキストの流れを維持しながらスタイルを適用したり、リンクを作成したりします。
• 横並びやサイズの調整: 要素を横に並べたい場合や、インライン要素に幅や高さを適用したい場合は inline-block が便利です。
• 複雑な一次元レイアウト: ナビゲーションバーや均等配置された要素などには flex を使用します。
• 複雑な二次元レイアウト: ページ全体のレイアウトや、グリッド状に要素を配置したい場合には grid を使用します。
• 要素の非表示: JavaScriptとの連携などで、要素を動的に表示/非表示にする場合に none を使用します。

display プロパティはCSSレイアウトの基礎であり、Webページのデザインにおいて非常に重要な役割を果たします。それぞれの値の特性を理解し、適切に使いこなすことで、柔軟でレスポンシブなレイアウトを実現することができます。