立体的なくぼみがあるチェックボックスを作る方法
立体的なくぼみがあるチェックボックスを作る方法を紹介します。このサンプルでは、HTMLのcheckbox要素とCSSを使って、チェック前は内側へくぼんで見えるチェックボックスを作成します。標準のチェックボックスとは異なり、内側の影を組み合わせることで、背景へ埋め込まれているような立体感を表現しています。
チェックボックスをクリックすると中央に青い四角が表示され、選択状態を確認できます。ラジオボタンとは異なり、複数の項目を同時に選択できるため、お問い合わせ画面の希望項目、会員サイトの設定項目、ECサイトの商品オプション、管理画面の表示設定など、複数選択が必要な場面で利用できます。JavaScriptは使用せず、HTMLとCSSだけで動作します。
HTMLではタイトル、説明文、各選択肢の文字を変更できます。CSSではチェックボックスのサイズ、角丸、背景色、くぼみを作る内側の影、選択時に表示する青い四角の大きさや色などを調整できます。画面幅が狭い場合は選択肢を縦方向へ並べるレスポンシブ対応も行っているため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
チェックしたい項目を選択してください。
未選択時は内側へくぼんで見え、チェックすると中央に立体的な青い四角が表示されます。複数の項目を同時に選択できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>立体的なくぼみがあるチェックボックス</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- チェックボックス全体 -->
<div class="three-dimensional-recessed-checkbox_demo">
<!-- タイトル -->
<div class="three-dimensional-recessed-checkbox_title">
立体的なくぼみがあるチェックボックス
</div>
<!-- 説明文 -->
<p class="three-dimensional-recessed-checkbox_text">
チェックしたい項目を選択してください。
</p>
<!-- 選択肢全体 -->
<div class="three-dimensional-recessed-checkbox_options">
<!-- 選択肢1 -->
<label class="three-dimensional-recessed-checkbox_label">
<input
class="three-dimensional-recessed-checkbox_input"
type="checkbox"
name="option1"
checked>
<span class="three-dimensional-recessed-checkbox_box"></span>
選択肢1
</label>
<!-- 選択肢2 -->
<label class="three-dimensional-recessed-checkbox_label">
<input
class="three-dimensional-recessed-checkbox_input"
type="checkbox"
name="option2">
<span class="three-dimensional-recessed-checkbox_box"></span>
選択肢2
</label>
<!-- 選択肢3 -->
<label class="three-dimensional-recessed-checkbox_label">
<input
class="three-dimensional-recessed-checkbox_input"
type="checkbox"
name="option3">
<span class="three-dimensional-recessed-checkbox_box"></span>
選択肢3
</label>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは3つのチェックボックスと選択肢の文字を配置し、CSSではブラウザ標準のチェックボックスを非表示にして、内側へくぼんで見える独自デザインへ変更します。未選択時は内側の影によってくぼみを表現し、選択すると中央に立体的な青い四角が表示されます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはチェックボックス全体を構成するファイルです。タイトル、説明文、「選択肢1」「選択肢2」「選択肢3」の文字を変更できます。各項目は独立したcheckbox要素で作成しているため、複数の選択肢を同時に選択できます。最初のチェックボックスにはcheckedを指定しているため、ページを開いた時点では選択肢1が選択されています。
style.cssはチェックボックス全体の見た目を設定するファイルです。サンプル全体の横幅や余白、チェックボックスの大きさ、角丸、背景色、未選択時のくぼみ、選択時の青い四角、フォーカス時の外枠などを変更できます。未選択時の立体感はinsetを使った内側の影で作り、選択時は青い四角へ明るい影と濃い影を付けて盛り上がって見えるようにしています。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、2つのファイルを同じ階層へ保存します。そのあとsample/index.htmlをブラウザで開いてください。チェックボックスまたは選択肢の文字をクリックすると選択状態を切り替えられます。チェックボックスなので、1つだけでなく複数の項目を同時に選択できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、各選択肢の文字を変更できます。最初から選択状態にする項目を変更したい場合は、対象となるcheckbox要素へcheckedを指定します。選択肢を追加する場合は、同じ構成のlabel要素とcheckbox要素、見た目用のspan要素を追加できます。
style.cssではサンプル全体の最大横幅、余白、背景色、角丸、タイトルの文字サイズ、選択肢同士の間隔を変更できます。チェックボックス本体では大きさ、角丸、背景色、くぼみの深さを調整でき、選択時の青い四角ではサイズ、位置、角丸、色、影を変更できます。
数値調整
style.css
max-width:700px;
チェックボックス全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:40px 32px;
全体の内側余白です。40pxが上下、32pxが左右の余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
全体を囲む枠の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
margin:0 0 30px;
説明文の下側余白です。30pxを大きくすると説明文と選択肢の間隔が広がります。
gap:28px;
選択肢同士の間隔です。値を大きくすると各選択肢が離れ、小さくすると近づきます。
gap:10px;
チェックボックスと選択肢の文字との間隔です。値を大きくすると両者の間隔が広がります。
width:32px; / height:32px;
くぼんで見えるチェックボックス本体の大きさです。2つの値を同じように変更すると、形を保ったままサイズを調整できます。
border-radius:9px;
チェックボックス本体の角丸です。値を大きくすると丸みが強くなり、小さくすると四角に近づきます。
inset 5px 5px 9px
未選択時のくぼみを作る内側の影です。最初の2つの5pxを変更すると影の位置が変わり、9pxを変更するとぼかしの広がりが変わります。
top:7px; / left:7px;
選択時に表示する青い四角の位置です。値を変更するとチェックボックス内での配置が変わります。
width:18px; / height:18px;
選択時に表示する青い四角の大きさです。値を大きくすると中央の四角が大きくなり、小さくすると小さくなります。
border-radius:5px;
選択時の青い四角の角丸です。値を大きくすると丸みが強くなります。
-2px -2px 4px / 3px 3px 6px
選択時の青い四角へ付ける影です。左上へ明るい影、右下へ濃い影を付けることで盛り上がって見える立体感を表現しています。値を変更すると影の位置やぼかし具合を調整できます。
outline:3px / outline-offset:3px
キーボード操作時のフォーカス表示です。3pxを変更すると外枠の太さやチェックボックスとの間隔が変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでは全体にwidth:100%とmax-width:700pxを指定しているため、画面幅に合わせて横幅が縮小されます。通常時は選択肢を横方向へ並べ、flex-wrap:wrapによって横幅が足りない場合は折り返します。
画面幅640px以下では全体の余白をpadding:32px 18px;へ変更し、選択肢をflex-direction:column;で縦並びへ切り替えます。選択肢全体にはwidth:max-contentとmax-width:100%を指定しているため、スマートフォン・タブレット・PCで利用できます。
コメント