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

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

1. JavaScriptを使用しないヘルプボタン
- 1.1. サンプルコード
  - 1.1.1. HTML
  - 1.1.2. CSS
- 1.2. 解説

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 を指定する必要がなくなります。

javascript

ご質問等ありましたら，お手数ですが弊社の個人情報保護方針をお読み頂いた上でフォームからお願い致します．

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

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

サンプルコード

HTML

CSS

解説

関連記事