【CSSのみ】ヘルプボタンで説明を表示する方法

最終更新日: 公開日: 2021年12月

JavaScriptを使用しないヘルプボタン

フォームの入力項目や機能の使い方についての説明を、?マーク(ヘルプボタン)をクリックしたときに表示する方法をご紹介します。
今回は HTML と CSS のみを使用しており、JavaScript や JQuery は使用しません。

以下に実際に動かせるサンプルを用意したので、?マーク(ヘルプボタン)を押してみてください。

好きな動物は何ですか?

サンプルコード

HTML

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./helpbutton.css">
  </head>
  <body>
    <span>好きな動物は何ですか?</span>
    <label>
      <input type="checkbox" class="checkhelp">
      <img src="./img/help.png" class="helpbutton">
      <p class="helpcontent">セレクトボックスから好きな動物を選択してください。</p>
    </label>
    <select class="selectanimal">
      <option value="">--選択肢--</option>
      <option value="dog">犬</option>
      <option value="cat">猫</option>
    </select>
  </body>
</html>

CSS

.checkhelp {
  display: none; /* チェックボタンは常に隠す */
}
.helpcontent {
  display: none; /* 説明非表示 */
  background-color: yellow;
}
.checkhelp:checked ~ .helpcontent { 
  display: block; /* 説明表示、チェック有無で表示非表示を切り替え */
}
.selectanimal {
  display: block;
}
.helpbutton:hover {
  cursor: pointer;
}

解説

今回肝になっているのは、?マークをクリックしたときに、チェックボタンのチェック有無からもともと非表示だった説明を表示する、もしくは表示されている説明を非表示にする部分。そして、label の使い方です。
チェックボックスの input と label はセットとして使います。ヘルプボタンは同一ページ内に複数設置する可能性が高いと思いますので、 label でチェックボックスの input、ヘルプボタンの画像、挿入したい説明をくくってしまうことで for で input の id を指定する必要がなくなります。

関連ページ

 

Contact

ご質問等ありましたら,下のフォームからお願いします.

 
   
contact
Pagetop