株式会社レクタス
ホームページアクセスログ解析
追跡・トラッキング機能
ページ閲覧解析システム
アンケートフォーム
認証付きダウンロード機能
会員制不要なオンライン展示会
メール配信システム
営業支援システム
ホームページ制作勉強会
ホームページ制作＆コンサル
商品企画コンサルティング
営業コンサルティング
ホームページメンテナンス【CSSのみ】ヘルプボタンを作成する
画像を使用しないヘルプボタン
【CSSのみ】ヘルプボタンをクリックしたときに説明を表示する方法 では、ヘルプボタンは画像を使用していましたが、CSSのみでヘルプボタンを作成することができたのでご紹介します。チェックボックスを利用していますので、チェックボックスは常に非表示にしています。
チェックボックスを非表示にする前は以下のようになっています。
上記のヘルプボタンを使って実際に動かせるサンプルを用意しました。
好きな動物は何ですか？サンプルコード
HTML
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./helpbutton.css">
</head>
<body>
<label class="helpbutton">
<input type="checkbox" class="checkhelp">
</label>
</body>
</html>
CSS
.checkhelp {
display: none;
}
.helpbutton:after{
content: "?";
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
text-align: center;
line-height: 1.4;
color: black;
border: solid;
font-weight: bold;
}
.helpbutton:hover {
cursor: pointer;
}
解説
チェックボタンのクリックに対応できるように、label タグに疑似要素を使用してヘルプボタンを作成しました。
今回、チェックボックスは常に非表示にしてしまうので、サンプルでは疑似要素に after を利用していますが before, after のどちらでも大丈夫です。
画像を用意するよりも簡単に、好きなようにデザインを変更することができるので、用途に応じて色や枠の形を変えて使っていただければと思います。
