CSS プロパティ display

CSS display プロパティ徹底解説：要素の表示と非表示を自在に操る

CSS display プロパティ徹底解説：要素の表示と非表示を自在に操る

このページでは、CSS の非常に重要なプロパティである `display` について、初心者にも分かりやすく解説します。 `display` プロパティの様々な値、使用シーン、ブラウザの対応状況などを、コード例を交えながら詳しく説明することで、 Web ページのレイアウトを思い通りに制御できるようになりましょう。

1. CSS `display` プロパティとは？

`display` プロパティは、要素の表示タイプを定義し、ページ上でのレイアウト方法や表示/非表示を決定します。 CSS レイアウトにおいて最もよく使われるプロパティの一つであり、その仕組みを深く理解することは、 Web ページ制作において非常に重要です。

2. `display` プロパティの主な値

`display` プロパティには、要素の表示方法を指定するための様々な値が用意されています。 ここでは、よく使われる値とその役割について解説します。

2.1. `block` (ブロックレベル要素)

`block` は、要素をブロックレベル要素として表示します。ブロックレベル要素は、以下のような特徴を持ちます。

  • 他の要素と水平方向に並ぶことができず、常に新しい行に配置される
  • 幅、高さ、マージン、パディングなどの指定が可能

例えば、`div`、`p`、`h1` などの要素は、デフォルトで `display: block` が指定されています。 


<div>これは div 要素です。</div>
<p>これは p 要素です。</p>
<h1>これは h1 要素です。</h1>

2.2. `inline` (インライン要素)

`inline` は、要素をインライン要素として表示します。インライン要素は、以下のような特徴を持ちます。

  • 他のインライン要素と水平方向に並べることができる
  • 幅、高さ、上下のマージン、パディングは指定できない
  • 左右のマージン、パディングは指定可能

例えば、`span`、`a`、`strong` などの要素は、デフォルトで `display: inline` が指定されています。 


<p>これは <span>span</span> 要素を含む段落です。</p>

2.3. `inline-block` (インラインブロック要素)

`inline-block` は、要素をインラインブロック要素として表示します。インラインブロック要素は、以下のような特徴を持ちます。

  • 他のインライン要素と水平方向に並べることができる
  • 幅、高さ、マージン、パディングなどの指定が可能

`inline-block` は、`block` と `inline` の両方の特徴を併せ持つ表示方法です。 


<span style="display: inline-block; width: 100px; height: 100px; background-color: #f00;">赤</span>
<span style="display: inline-block; width: 100px; height: 100px; background-color: #0f0;">緑</span>

2.4. `none` (非表示)

`none` は、要素を非表示にします。非表示になった要素は、ページ上から完全に削除されたかのように扱われます。

`display: none` は、要素を視覚的に非表示にするだけでなく、画面リーダーなどの補助技術を使用しているユーザーに対しても、 要素が存在しないかのように振る舞います。 


<div style="display: none;">この要素は表示されません。</div>

`visibility: hidden;` との違いは、`visibility: hidden;` の場合は要素は非表示になりますが、 その要素が本来配置されるべきスペースは確保されたままになります。

3. `display` プロパティのその他の重要な値

上記以外にも、`display` プロパティには、いくつかの重要な値が存在します。

3.1. `list-item`

`list-item` は、要素をリストアイテムとして表示します。通常、`

    ` や `
      ` 要素と組み合わせて使用します。

      3.2. `table`, `table-row`, `table-cell` など

      これらの値は、要素をテーブルの要素 (テーブル、行、セルなど) として表示するために使用します。 これらの値を使用することで、柔軟なテーブルレイアウトを実現することができます。

      3.3. `flex`, `grid`

      `flex` と `grid` は、それぞれ Flexbox レイアウトと Grid レイアウトと呼ばれる、より高度なレイアウトを実現するための値です。 これらのレイアウト手法は、従来のフロートやポジショニングよりも、より柔軟で強力なレイアウトを可能にします。

      4. `display` プロパティの応用

      `display` プロパティは、要素の表示/非表示の切り替えや、様々なレイアウトを実現するために使用することができます。

      4.1. 要素の表示/非表示の切り替え

      JavaScript を使用することで、`display` プロパティの値を動的に変更することができます。 これにより、例えばボタンをクリックしたら要素を表示する、といったインタラクティブな表現を実現することができます。 

      
<button id="toggle">ボタン</button>
<div id="target" style="display: none;">表示/非表示を切り替える要素</div>

<script>
const button = document.getElementById('toggle');
const target = document.getElementById('target');

button.addEventListener('click', () => {
  if (target.style.display === 'none') {
    target.style.display = 'block';
  } else {
    target.style.display = 'none';
  }
});
</script>

      4.2. 様々なレイアウトの実現

      `display` プロパティの値を組み合わせることで、様々なレイアウトを実現することができます。 例えば、`inline-block` を使用することで、要素を水平方向に並べて表示することができます。 

      
<nav>
  <ul>
    <li style="display: inline-block; margin: 0 10px;"><a href="#">メニュー1</a></li>
    <li style="display: inline-block; margin: 0 10px;"><a href="#">メニュー2</a></li>
    <li style="display: inline-block; margin: 0 10px;"><a href="#">メニュー3</a></li>
  </ul>
</nav>

      5. ブラウザの対応状況

      `display` プロパティの一般的な値は、主要なブラウザで広くサポートされています。 ただし、`grid` などの新しい値については、ブラウザによってはサポートされていない場合があります。 そのため、新しい値を使用する際には、事前にブラウザの対応状況を確認しておく必要があります。

      ブラウザの対応状況は、以下のサイトなどで確認することができます。

      6. まとめ

      `display` プロパティは、CSS において非常に重要なプロパティであり、Web ページのレイアウトを制御する上で欠かせないものです。 この記事では、`display` プロパティの基本的な使い方から、応用的な使い方までを解説しました。 この記事が、`display` プロパティの理解を深め、Web ページ制作に役立てば幸いです。

      関連する質問と回答

      Q1: `display: none;` と `visibility: hidden;` の違いは何ですか？

      A1: `display: none;` は要素を完全に非表示にし、レイアウト上から削除します。 一方、`visibility: hidden;` は要素を非表示にしますが、レイアウト上のスペースは保持されます。

      Q2: `inline-block` とはどのような表示方法ですか？

      A2: `inline-block` は、インライン要素のように他の要素と水平方向に並べることができ、 かつブロック要素のように幅や高さを指定できる表示方法です。

      Q3: Flexbox や Grid レイアウトを使用するメリットは何ですか？

      A3: Flexbox や Grid レイアウトは、従来のフロートやポジショニングよりも、 より柔軟で強力なレイアウトを実現するための仕組みです。 特に、レスポンシブデザインに対応したページを作成する際に非常に役立ちます。