読み込み中...

HTMLでクリックして表示/非表示を切り替えるボタンの全技術6選

HTMLでクリックしたら表示する機能を実装する方法を解説するイメージ HTML
2024.04.09
この記事は約17分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事では、初心者でも簡単に学べるHTMLの基本から、少し応用的な表示と非表示の切り替えまで、実用的なボタン操作の全てを解説します。

ウェブページにアクティブな動きを加えるためには、HTMLの構造を理解し、クリック操作で何ができるかを知ることが重要です。

この記事を読み進めることで、あなたのウェブサイトが一段とユーザーフレンドリーになるでしょう。

●HTMLの基礎

HTML（HyperText Markup Language）は、ウェブページを作成するための標準的なマークアップ言語です。

HTMLは、ウェブページの骨組みを構築し、テキスト、画像、リンクなどの要素をウェブページに配置する役割を果たします。

HTMLは、開始タグ<タグ名>と終了タグ</タグ名>を使用して要素を定義します。

例えば、<p>これは段落です。</p>というコードは、段落を表示するためのHTMLです。

○HTMLの構造と要素の役割

HTMLの基本的な構造は、<html>、<head>、<body>の三つの主要な部分から成り立っています。

<html>タグは、ドキュメントがHTMLであることを表します。

<head>タグの中には、ページのタイトルやメタデータ、スタイルシートのリンクなど、ページに関する情報が含まれます。

最も重要な<body>タグは、実際にブラウザで表示されるウェブページの内容を含みます。

ウェブページ上で見ることができるすべての項目は、HTML要素として定義されます。

これには、テキスト、画像、動画、リンク、ボタンなどが含まれます。

例えば、<img src="image.jpg" alt="画像の説明">は、画像をウェブページに挿入するHTML要素です。

○属性の基本

HTML要素は属性を持つことができます。

属性は、要素に追加情報を提供し、その振る舞いや外観を制御するために使われます。

例えば、<a href="https://example.com">リンク</a>のhref属性は、リンクの目的地を指定します。

属性は、常に開始タグの中に書かれ、通常は名前と値のペアで構成されます。

●表示/非表示のボタン操作

ウェブサイトを訪れるユーザーにとって、表示と非表示の操作は重要な要素です。

例えば、FAQの答えを表示したり、追加情報を提供したりする場合には、この技術が非常に有用です。

ここでは、HTMLとJavaScript、CSSを活用して、この表示/非表示の操作を行う方法について説明します。

○サンプルコード1：基本の表示/非表示ボタン

最初の例では、HTMLとJavaScriptを使って、簡単な表示/非表示のボタンを作成します。

<!DOCTYPE html>
<html>
<head>
    <title>表示/非表示ボタンの例</title>
    <script>
        function toggleVisibility() {
            var x = document.getElementById("myDIV");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
    </script>
</head>
<body>

<button onclick="toggleVisibility()">クリックして表示/非表示</button>

<div id="myDIV">
    これは表示または隠れる内容です。
</div>

</body>
</html>

このコードでは、<button>要素のonclick属性を使って、JavaScript関数toggleVisibility()を呼び出します。

この関数は、特定の要素（この場合は<div>タグ）のdisplayスタイルを切り替え、それにより内容の表示と非表示を制御します。

○サンプルコード2：JavaScriptと連携した動的操作

次に、JavaScriptを使ってもう少し動的な表示/非表示の制御を行う例を見てみましょう。

このコードでは、クラス名を利用して、複数の要素を一度に制御します。

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript動的表示/非表示</title>
    <script>
        function toggleVisibility(className) {
            var elements = document.getElementsByClassName(className);
            for (var i = 0; i < elements.length; i++) {
                var x = elements[i];
                if (x.style.display === "none") {
                    x.style.display = "block";
                } else {
                    x.style.display = "none";
                }
            }
        }
    </script>
</head>
<body>

<button onclick="toggleVisibility('myClass')">表示/非表示を切り替える</button>

<div class="myClass">
    最初の内容です。
</div>
<div class="myClass">
    2番目の内容です。
</div>

</body>
</html>

この例では、getElementsByClassNameメソッドを使って、特定のクラス名を持つ全ての要素を取得し、それらの表示状態を一括で切り替えています。

○サンプルコード3：CSSを活用したスタイリッシュな表示切り替え

最後に、CSSのトランジション効果を使って、スタイリッシュな表示/非表示の切り替えを実装する方法を紹介します。

CSSのアニメーションを使用することで、ユーザー体験を向上させることができます。

<!DOCTYPE html>
<html>
<head>
    <title>CSS表示/非表示</title>
    <style>
        .myClass {
            display: none;
            transition: display 0.5s ease;
        }
        .show {
            display: block;
        }
    </style>
    <script>
        function toggleVisibility() {
            var element = document.getElementById("myDIV");
            element.classList.toggle("show");
        }
    </script>
</head>
<body>

<button onclick="toggleVisibility()">表示/非表示を切り替える</button>

<div id="myDIV" class="myClass">
    ここはトグルで表示/非表示されるコンテンツです。
</div>

</body>
</html>

このコードでは、CSSのtransitionプロパティを利用して、要素の表示と非表示の際に滑らかなアニメーションを追加しています。

JavaScriptのtoggleメソッドで、特定のクラスを要素に追加または削除することで、このアニメーションを制御しています。

●よくあるエラーとその対策

ウェブ開発において、特にHTMLやJavaScriptを使用した表示/非表示の操作には、時折予期せぬエラーや問題が発生することがあります。

ここでは、そうした一般的な問題と、それらを解決するための対策を紹介します。

○エラー例1：ボタンが反応しない時のチェックポイント

ボタンが反応しない場合、最も一般的な原因はJavaScriptの関数やイベントリスナーの誤りです。

まずは、ボタンのonclick属性が正しく設定されているかを確認しましょう。

また、JavaScriptのコードに誤字脱字がないか、またはコードが正しい順序で記述されているかもチェックする必要があります。

JavaScriptのデバッグには、ブラウザの開発者ツールを使用すると便利です。

コンソールタブでエラーメッセージを確認し、問題の原因を特定しましょう。

たとえば、下記のような簡単なHTMLとJavaScriptのコードがあります。

<button id="myButton">表示/非表示</button>

<script>
    document.getElementById('myButton').addEventListener('click', function() {
        alert('ボタンがクリックされました！');
    });
</script>

このコードでは、ボタンにIDが設定されており、JavaScriptではそのIDを使用してイベントリスナーを追加しています。

ここで誤ったIDを指定したり、スクリプトの記述に誤りがあると、ボタンは反応しません。

○エラー例2：表示/非表示の切り替えが上手くいかない場合の解決策

表示と非表示の切り替えがうまくいかない場合、CSSとJavaScriptの両方に注目する必要があります。

CSSでdisplayプロパティを使って要素の表示状態を制御している場合、JavaScriptコードがそのプロパティを適切に変更しているかを確認します。

例えば、下記のコードではdisplayプロパティを用いて要素の表示を制御しています。

<div id="content" style="display: none;">隠れているコンテンツ</div>
<button id="toggleButton">表示/非表示</button>

<script>
    document.getElementById('toggleButton').addEventListener('click', function() {
        var content = document.getElementById('content');
        if (content.style.display === 'none') {
            content.style.display = 'block';
        } else {
            content.style.display = 'none';
        }
    });
</script>

このコードでは、<div>要素のdisplayスタイルがnoneとblockの間で切り替わります。

JavaScriptが正しくstyle.displayプロパティを操作しているかを確認してください。

また、初期状態のdisplayプロパティが適切に設定されているかも重要です。

●ボタン操作の応用技術

ボタン操作を用いることで、ウェブページ上で様々なインタラクティブな機能を実現することができます。

ここでは、タブの切り替え、アコーディオンメニュー、コンテンツのフィルタリングといった応用技術を具体的なサンプルコードを交えて解説します。

○サンプルコード4：タブ切り替えの実装

タブを使ったコンテンツの表示切り替えは、ユーザーに複数の情報を効率的に提供するのに適した方法です。

下記のコードは、簡単なタブ切り替えの実装例を表しています。

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">東京</button>
  <button class="tablinks" onclick="openCity(event, 'Osaka')">大阪</button>
  <button class="tablinks" onclick="openCity(event, 'Kyoto')">京都</button>
</div>

<div id="Tokyo" class="tabcontent">
  <h3>東京</h3>
  <p>東京は日本の首都です。</p>
</div>

<div id="Osaka" class="tabcontent">
  <h3>大阪</h3>
  <p>大阪は日本の大都市の一つです。</p>
</div>

<div id="Kyoto" class="tabcontent">
  <h3>京都</h3>
  <p>京都は歴史的な都市です。</p>
</div>

<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>

このコードでは、各タブがクリックされるとopenCity関数が呼び出され、関連するタブコンテンツが表示されます。

それ以外のコンテンツは非表示になります。

○サンプルコード5：アコーディオンメニューの作成

アコーディオンメニューは、限られたスペースで情報を効果的に整理して表示するための優れた方法です。

下記のコードは、アコーディオンメニューの基本的な実装を表しています。

<button class="accordion">セクション1</button>
<div class="panel">
  <p>セクション1の内容です。</p>
</div>

<button class="accordion">セクション2</button>
<div class="panel">
  <p>セクション2の内容です。</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>

このコードでは、アコーディオンボタンがクリックされると、隣接するパネルが開閉します。

CSSを用いて、開閉のアニメーションを追加することも可能です。

○サンプルコード6：コンテンツのフィルタリング

ウェブページ内のコンテンツをフィルタリングする機能は、ユーザーが目的の情報を迅速に見つけるのに役立ちます。

下記のコードは、シンプルなフィルタリング機能の例を表しています。

<input type="text" id="myInput" onkeyup="filterFunction()" placeholder="検索...">

<ul id="myUL">
  <li><a href="#">アイテム1</a></li>
  <li><a href="#">アイテム2</a></li>
  <li><a href="#">アイテム3</a></li>
</ul>

<script>
function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
</script>

このコードでは、テキストボックスに入力された値に基づいてリストアイテムをフィルタリングします。

大文字と小文字を区別しないため、toUpperCaseメソッドを使用しています。

●HTMLとJavaScriptの裏技

HTMLとJavaScriptを使った開発では、様々な裏技やテクニックが存在し、これらを知ることでより効率的かつ効果的なウェブサイトやアプリケーションを構築できます。

特に重要なのが、異なるブラウザでの一貫した表示を実現する方法と、HTML5の新機能を活用することです。

○豆知識1：異なるブラウザでの対応策

ウェブサイトやアプリケーションが異なるブラウザ上で一貫して動作し、表示されるようにするためには、いくつかの対応策を講じる必要があります。

まず、CSSの初期化やリセットを行い、異なるブラウザ間でのスタイルの差異を最小限に抑えることが大切です。

次に、ブラウザ固有のプレフィックスを適切に使用して、CSSの互換性を保ちます。また、JavaScriptにおいても、ブラウザ間の動作の差異を考慮し、必要に応じてポリフィルやシムを使用して、古いブラウザでも現代的な機能を利用できるようにします。

これらの対策により、異なるブラウザでも一貫したユーザーエクスペリエンスを提供することが可能になります。

○豆知識2：HTML5の新機能を活用する

HTML5は、ウェブ開発の様々な側面で革新をもたらしました。

HTML5では、新たに多くのセマンティック要素が導入され、ウェブページの構造をより明確にし、検索エンジンにとって理解しやすいものにしています。

また、HTML5はフォーム要素の多様化を図り、ユーザーのデータ入力の利便性を向上させています。

さらに、<canvas>要素や<video>、<audio>タグの導入により、グラフィックスとマルチメディアコンテンツを容易に統合し、よりリッチなユーザーインターフェイスを実現することができます。

これらの新機能を適切に活用することで、より魅力的で機能的なウェブサイトやアプリケーションを作成することが可能です。

まとめ

この記事を通じて、HTMLとJavaScriptを活用したボタンの表示・非表示操作や、それを応用した様々なテクニックを深く解説しました。

基本的な使い方から応用例、そしてよくあるエラーとその対処法、さらにはHTML5の新機能の利用方法まで、幅広い知識を習得することができたと思います。

これらの知識を活かせば、あなたのウェブサイトはより機能的でユーザーフレンドリーなものになるでしょう。

ウェブ開発の道において、これらの情報が光となり、あなたのスキル向上に大きく貢献することを願っています。