株式会社レクタス
ホームページアクセスログ解析
追跡・トラッキング機能
ページ閲覧解析システム
アンケートフォーム
認証付きダウンロード機能
会員制不要なオンライン展示会
メール配信システム
営業支援システム
ホームページ制作勉強会
ホームページ制作＆コンサル
商品企画コンサルティング
営業コンサルティング
ホームページメンテナンス【CSSのみ】ヘルプボタンで説明を表示する方法
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 を指定する必要がなくなります。
