HTMLでDisplay Noneを実践例8選で完全マスター！

📋 対応バージョン

HTML HTML5

CSS CSS3

JavaScript ES5+

IE 11 ⓘ

Edge Legacy 12-18 ⓘ

完全対応一部機能制限 ⓘ

はじめに

この記事を読めばHTMLのDisplay Noneを完全マスターできます。

初心者でも分かりやすいように、Display Noneの使い方や対処法、注意点、カスタマイズ方法、そして実践的な応用例まで、詳しく解説していきます。

サンプルコードも豊富に用意しているので、実際に手を動かして学んでいきましょう。

HTMLでDisplay Noneとは

HTMLでのDisplay Noneは、要素を非表示にするためのCSSプロパティです。

指定された要素は、見た目上だけでなくページのレイアウトからも削除されるため、他の要素に影響を与えません。

この記事では、Display Noneの使い方や対処法、注意点、カスタマイズ方法、そして実践的な応用例まで、詳しく解説していきます。

Display Noneの使い方

基本的な使い方

Display Noneを使って要素を非表示にするには、対象の要素に対してdisplay: none;というスタイルを適用します。

これをHTMLのstyle属性や外部CSSファイルに記述することで、要素を非表示にできるでしょう。

例えば、下記のようにHTML内のstyle属性で指定することができます。

<p style="display: none;">このテキストは非表示です。</p>

また、下記のように外部CSSファイルで指定することも可能です。

/* CSSファイル */
.hidden {
  display: none;
}

<!-- HTMLファイル -->
<p class="hidden">このテキストは非表示です。</p>

Display Noneの対処法

表示/非表示の切り替え

Display Noneを使って要素を非表示にした後、表示させたい場合は、CSSクラスの追加・削除やスタイルプロパティの初期化で切り替えが可能になります。

下記の例では、ボタンをクリックすることで要素の表示/非表示を切り替えています。

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

<p id="text" class="hidden">このテキストは非表示です。</p>
<button onclick="toggleDisplay()">表示/非表示を切り替える</button>

<script>
  function toggleDisplay() {
    var text = document.getElementById("text");
    text.classList.toggle("hidden");
  }
</script>

Display Noneの注意点

SEOへの影響

Display Noneで非表示にした要素は、検索エンジンによって隠しテキストと判断される可能性があります。

そのため、重要な情報やキーワードを含む要素を非表示にすることは、SEOに悪影響を与える場合があるでしょう。

アクセシビリティの観点

Display Noneで非表示にした要素は、スクリーンリーダーからも読み上げられなくなります。

視覚的には隠したいが、スクリーンリーダーには読み上げてほしい場合は、visibility: hiddenやopacity: 0、または画面外への配置といった代替手段を使用してください。

Display Noneのカスタマイズ

スタイルシートでの指定

Display Noneを使う際に、CSSファイルでの指定が一般的です。

これにより、複数の要素に対して同じスタイルを適用したり、スタイルの変更が容易になるでしょう。

JavaScriptでの制御

JavaScriptを使ってDisplay Noneを制御することで、動的な表示/非表示の切り替えが可能になります。

例えば、ボタンクリックや特定の条件を満たしたときに要素を非表示にすることができるでしょう。

// クラスを使った制御方法
function hideElement() {
  document.getElementById("target").classList.add("hidden");
}

function showElement() {
  document.getElementById("target").classList.remove("hidden");
}

実践的な応用例6選

このセクションでは、Display Noneを応用した6個の実践的な例を紹介します。それぞれの例にはサンプルコードも付属しているので、ぜひ参考にしてください。

例1：ドロップダウンメニュー

ドロップダウンメニューは、マウスオーバーやクリックで表示される子要素を持つメニューです。

Display Noneを使って、子要素を非表示にしておき、表示イベント時に表示させることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ドロップダウンメニュー</title>
  <style>
    .dropdown {
      display: inline-block;
      position: relative;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown-content a:hover {
      background-color: #f1f1f1;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }
  </style>
</head>
<body>
  <div class="dropdown">
    <button>メニュー</button>
    <div class="dropdown-content">
      <a href="#">リンク1</a>
      <a href="#">リンク2</a>
      <a href="#">リンク3</a>
    </div>
  </div>
</body>
</html>

例2：アコーディオンパネル

アコーディオンパネルは、クリックでコンテンツを展開・折りたたむことができるUIです。

Display Noneを使って、非表示にしたコンテンツを表示させることができるでしょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>アコーディオンパネル</title>
  <style>
    .accordion {
      cursor: pointer;
      width: 100%;
      text-align: left;
      outline: none;
      border: none;
      background-color: #eee;
      padding: 10px;
      margin-bottom: 10px;
    }

    .panel {
      display: none;
      padding: 0 10px;
      margin-bottom: 10px;
      background-color: white;
      overflow: hidden;
    }

    .panel.active {
      display: block;
    }
  </style>
</head>
<body>
  <button class="accordion">セクション1</button>
  <div class="panel">
    <p>セクション1のコンテンツ</p>
  </div>

  <button class="accordion">セクション2</button>
  <div class="panel">
    <p>セクション2のコンテンツ</p>
  </div>

  <button class="accordion">セクション3</button>
  <div class="panel">
    <p>セクション3のコンテンツ</p>
  </div>

  <script>
    var accordions = document.getElementsByClassName("accordion");
    
    for (var i = 0; i < accordions.length; i++) {
      accordions[i].addEventListener("click", function() {
        var panel = this.nextElementSibling;
        panel.classList.toggle("active");
      });
    }
  </script>
</body>
</html>

例3：モーダルウィンドウ

モーダルウィンドウは、親ウィンドウとは独立した小さなウィンドウで、ポップアップ表示されるコンテンツです。

Display Noneを使って、非表示にしておいたモーダルウィンドウを表示させることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>モーダルウィンドウ</title>
  <style>
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.4);
    }

    .modal-content {
      background-color: #fefefe;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
    }

    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .close:hover,
    .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h2>モーダルウィンドウのデモ</h2>
  <button id="modalBtn">モーダルを開く</button>

  <div id="myModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <p>モーダルウィンドウのコンテンツです。</p>
    </div>
  </div>

  <script>
    var modal = document.getElementById("myModal");
    var btn = document.getElementById("modalBtn");
    var span = document.getElementsByClassName("close")[0];

    btn.onclick = function() {
      modal.style.display = "block";
    }

    span.onclick = function() {
      modal.style.display = "none";
    }

    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }
  </script>
</body>
</html>

例4：タブ付きコンテンツ

タブ付きコンテンツは、複数のコンテンツをタブで切り替えて表示させるUIです。

Display Noneを使って、非表示にしたコンテンツを選択したタブに応じて表示させることができるでしょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>タブ付きコンテンツ</title>
  <style>
    .tab {
      overflow: hidden;
      border-bottom: 1px solid #ccc;
    }

    .tab button {
      background-color: inherit;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
      font-size: 17px;
    }

    .tab button:hover {
      background-color: #ddd;
    }

    .tab button.active {
      background-color: #ccc;
    }

    .tabcontent {
      display: none;
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-top: none;
    }

    .tabcontent.active {
      display: block;
    }
  </style>
</head>
<body>
  <div class="tab">
    <button class="tablinks active" onclick="openTab(event, 'Tab1')">タブ1</button>
    <button class="tablinks" onclick="openTab(event, 'Tab2')">タブ2</button>
    <button class="tablinks" onclick="openTab(event, 'Tab3')">タブ3</button>
  </div>

  <div id="Tab1" class="tabcontent active">
    <h3>タブ1</h3>
    <p>タブ1のコンテンツです。</p>
  </div>

  <div id="Tab2" class="tabcontent">
    <h3>タブ2</h3>
    <p>タブ2のコンテンツです。</p>
  </div>

  <div id="Tab3" class="tabcontent">
    <h3>タブ3</h3>
    <p>タブ3のコンテンツです。</p>
  </div>

  <script>
    function openTab(evt, tabName) {
      var tabcontent = document.getElementsByClassName("tabcontent");
      var tablinks = document.getElementsByClassName("tablinks");
      
      for (var i = 0; i < tabcontent.length; i++) {
        tabcontent[i].classList.remove("active");
      }
      
      for (var i = 0; i < tablinks.length; i++) {
        tablinks[i].classList.remove("active");
      }
      
      document.getElementById(tabName).classList.add("active");
      evt.currentTarget.classList.add("active");
    }
  </script>
</body>
</html>

例5：レスポンシブナビゲーションバー

レスポンシブデザインのナビゲーションバーは、画面サイズに応じて表示を切り替えることができます。

Display Noneを使って、非表示にしたコンテンツを画面サイズに応じて表示させることができるでしょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>レスポンシブナビゲーションバー</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }

    .topnav {
      overflow: hidden;
      background-color: #333;
    }

    .topnav a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }

    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }

    .topnav a.active {
      background-color: #4CAF50;
      color: white;
    }

    .topnav .icon {
      display: none;
    }

    @media screen and (max-width: 600px) {
      .topnav a:not(:first-child) {display: none;}
      .topnav a.icon {
        float: right;
        display: block;
      }
    }

    @media screen and (max-width: 600px) {
      .topnav.responsive {position: relative;}
      .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
      }
      .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
      }
    }
  </style>
</head>
<body>
  <div class="topnav" id="myTopnav">
    <a href="#home" class="active">ホーム</a>
    <a href="#news">ニュース</a>
    <a href="#contact">お問い合わせ</a>
    <a href="#about">アバウト</a>
    <a href="javascript:void(0);" class="icon" onclick="toggleNav()">
      ☰
    </a>
  </div>

  <script>
    function toggleNav() {
      var nav = document.getElementById("myTopnav");
      nav.classList.toggle("responsive");
    }
  </script>
</body>
</html>

例6：画像ギャラリー

画像ギャラリーは、サムネイル画像をクリックすることで大きな画像を表示する仕組みです。

Display Noneを使って、非表示にしておいた画像を切り替えて表示させることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>画像ギャラリー</title>
  <style>
    .gallery-container {
      max-width: 600px;
      margin: auto;
    }

    .main-image {
      width: 100%;
      height: 400px;
      background-color: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      border: 1px solid #ddd;
    }

    .gallery-image {
      display: none;
      font-size: 24px;
      color: #666;
    }

    .gallery-image.active {
      display: block;
    }

    .thumbnail-container {
      display: flex;
      gap: 10px;
      justify-content: center;
    }

    .thumbnail {
      width: 80px;
      height: 80px;
      background-color: #e0e0e0;
      border: 2px solid #ccc;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }

    .thumbnail:hover {
      border-color: #4CAF50;
    }

    .thumbnail.active {
      border-color: #4CAF50;
      background-color: #c8e6c9;
    }
  </style>
</head>
<body>
  <div class="gallery-container">
    <div class="main-image">
      <div class="gallery-image active" id="image1">画像1</div>
      <div class="gallery-image" id="image2">画像2</div>
      <div class="gallery-image" id="image3">画像3</div>
    </div>
    
    <div class="thumbnail-container">
      <div class="thumbnail active" onclick="showImage('image1', this)">サムネイル1</div>
      <div class="thumbnail" onclick="showImage('image2', this)">サムネイル2</div>
      <div class="thumbnail" onclick="showImage('image3', this)">サムネイル3</div>
    </div>
  </div>

  <script>
    function showImage(imageId, thumbnailElement) {
      // すべての画像を非表示
      var images = document.getElementsByClassName("gallery-image");
      for (var i = 0; i < images.length; i++) {
        images[i].classList.remove("active");
      }
      
      // すべてのサムネイルから active クラスを削除
      var thumbnails = document.getElementsByClassName("thumbnail");
      for (var i = 0; i < thumbnails.length; i++) {
        thumbnails[i].classList.remove("active");
      }
      
      // 選択された画像を表示
      document.getElementById(imageId).classList.add("active");
      // 選択されたサムネイルに active クラスを追加
      thumbnailElement.classList.add("active");
    }
  </script>
</body>
</html>