【簡単！】条件によって表示を変えるHTMLの作り方3選

●HTMLで条件によって表示を変える方法とは？
- ○JavaScriptを使った表示の変更
- ○CSSを使った表示の変更
●JavaScriptを使って条件によって表示を変える方法
応用例
まとめ

●HTMLで条件によって表示を変える方法とは？

HTMLで条件によって表示を変える方法は、主にJavaScriptとCSSを使った2つのアプローチがあります。

JavaScriptを使うと、より複雑な条件で表示を変えることができ、CSSを使うとシンプルな条件で表示を変えることができます。

それぞれの方法のメリットやデメリットを理解し、適切な手法を選ぶことが大切です。

○JavaScriptを使った表示の変更

JavaScriptを使って条件によって表示を変える場合、主にif文やswitch文を使って条件分岐を行い、要素の表示や非表示を切り替えます。

また、イベントリスナーを使ってユーザーの操作に応じて表示を変えることもできます。

しかし、JavaScriptはブラウザの設定やバージョンによっては動作しないことがあるため、注意が必要です。

○CSSを使った表示の変更

CSSを使って条件によって表示を変える場合、主にメディアクエリやクラスの切り替えを使って表示を変更します。

CSSはシンプルな条件での表示変更に向いており、ブラウザの互換性も良いですが、複雑な条件では限定的なため、適切な用途で使うことが大切です。

●JavaScriptを使って条件によって表示を変える方法

JavaScriptを使って条件によって表示を変える方法には、下記のような方法があります。

○if文を使った条件分岐

if文を使って条件分岐を行い、条件によって表示を変えることができます。

例えば、下記のように記述することで、条件によって表示を変えることができます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>条件によって表示を変える例</title>
  <style>
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <div id="message1" class="hidden">条件1に合致すると表示されます。</div>
  <div id="message2" class="hidden">条件2に合致すると表示されます。</div>

  <script>
    const condition = 1; // 条件を変更することで表示が変わります。
    const message1 = document.getElementById("message1");
    const message2 = document.getElementById("message2");

    if (condition === 1) {
      message1.classList.remove("hidden");
    } else if (condition === 2) {
      message2.classList.remove("hidden");
    }
  </script>
</body>
</html>

上記のサンプルコードでは、conditionの値によって表示されるメッセージが変わります。

○switch文を使った条件分岐

switch文を使って条件分岐を行うこともできます。

例えば、下記のように記述することで、条件によって表示を変えることができます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>条件によって表示を変える例</title>
  <style>
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <div id="message1" class="hidden">条件1に合致すると表示されます。</div>
  <div id="message2" class="hidden">条件2に合致すると表示されます。</div>
  <div id="message3" class="hidden">条件3に合致すると表示されます。</div>

  <script>
    const condition = 1; // 条件を変更することで表示が変わります。
    const message1 = document.getElementById("message1");
    const message2 = document.getElementById("message2");
    const message3 = document.getElementById("message3");

    switch (condition) {
      case 1:
        message1.classList.remove("hidden");
        break;
      case 2:
        message2.classList.remove("hidden");
        break;
      case 3:
        message3.classList.remove("hidden");
        break;
    }
  </script>
</body>
</html>

上記のサンプルコードでは、conditionの値によって表示されるメッセージが変わります。

○イベントリスナーを使った表示の変更

イベントリスナーを使って、ユーザーの操作に応じて表示を変えることができます。

例えば、下記のように記述することで、ボタンをクリックしたときに表示が変わるようにできます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>条件によって表示を変える例</title>
  <style>
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <button id="button">ボタンをクリックして表示を変える</button>
  <div id="message" class="hidden">ボタンがクリックされたら表示されます。</div>

  <script>
    const button = document.getElementById("button");
    const message = document.getElementById("message");

    button.addEventListener("click", () => {
      message.classList.toggle("hidden");
    });
  </script>
</body>
</html>

上記のサンプルコードでは、ボタンをクリックするとメッセージの表示が切り替わります。

○注意点

JavaScriptを使って条件によって表示を変える場合、ブラウザの設定やバージョンによっては動作しないことがあるため、注意が必要です。

また、JavaScriptの実行速度や、ページの読み込み速度にも影響があるため、適切な実装を心がけることが大切です。

○カスタマイズ

条件によって表示を変える方法は、様々なカスタマイズが可能です。

例えば、条件によって背景色やフォントサイズを変えたり、特定の条件で特定の要素を非表示にするなど、目的に応じてカスタマイズが可能です。

応用例

ユーザーの選択によって表示内容を変える

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ユーザーの選択によって表示を変える例</title>
  <style>
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <select id="select">
    <option value="0">選択してください</option>
    <option value="1">条件1</option>
    <option value="2">条件2</option>
  </select>
  <div id="message1" class="hidden">条件1に合致すると表示されます。</div>
  <div id="message2" class="hidden">条件2に合致すると表示されます。</div>

  <script>
    const select = document.getElementById("select");
    const message1 = document.getElementById("message1");
    const message2 = document.getElementById("message2");

    select.addEventListener("change", (event) => {
      const value = event.target.value;
      message1.classList.toggle("hidden", value !== "1");
      message2.classList.toggle("hidden", value !== "2");
    });
  </script>
</body>
</html>

上記のサンプルコードでは、ユーザーが選択肢を選ぶと、選択された条件に応じて表示内容が変わります。

ユーザーが入力した内容に応じて表示を変える

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ユーザーが入力した内容に応じて表示を変える例</title>
  <style>
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <input id="input" type="text" placeholder="テキストを入力してください">
  <div id="message" class="hidden">テキストが入力されたら表示されます。</div>

  <script>
    const input = document.getElementById("input");
    const message = document.getElementById("message");

    input.addEventListener("input", (event) => {
      const value = event.target.value;
      message.classList.toggle("hidden", value.trim() === "");
    });
  </script>
</body>
</html>

上記のサンプルコードでは、ユーザーがテキストボックスに入力した内容に応じて、表示内容が変わります。

入力がある場合にメッセージが表示され、入力がない場合には非表示になります。

時間帯に応じて表示を変える

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>時間帯に応じて表示を変える例</title>
  <style>
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <div id="morning" class="hidden">おはようございます！</div>
  <div id="afternoon" class="hidden">こんにちは！</div>
  <div id="evening" class="hidden">こんばんは！</div>

  <script>
    const morning = document.getElementById("morning");
    const afternoon = document.getElementById("afternoon");
    const evening = document.getElementById("evening");

    const hour = new Date().getHours();

    if (hour >= 5 && hour < 12) {
      morning.classList.remove("hidden");
    } else if (hour >= 12 && hour < 18) {
      afternoon.classList.remove("hidden");
    } else {
      evening.classList.remove("hidden");
    }
  </script>
</body>
</html>

上記のサンプルコードでは、現在の時間帯に応じて表示内容が変わります。

朝、昼、夜それぞれに対応したメッセージが表示されます。