立体的なくぼみがあるラジオボタンを作る方法
ラジオボタンは、複数の選択肢から1つだけを選択してもらうときに使われるフォーム部品です。この記事では、HTMLとCSSを使って、内側へくぼんでいるような立体感を付けたラジオボタンを作る方法を紹介します。通常のラジオボタンとは異なり、丸い部分に内側の影を付けることで、背景へ埋め込まれているような見た目に仕上げています。
選択肢をクリックすると、選択したラジオボタンの中央が青色に変わります。同じname属性を指定したラジオボタンなので、3つの選択肢から選択できるのは1つだけです。JavaScriptは使用せず、HTMLのradioとCSSだけで実装しています。色やサイズ、枠線、影、選択時の色などもCSSから変更できるため、サイトのデザインに合わせてカスタマイズできます。
お問い合わせ画面の回答項目、会員サイトの設定画面、ECサイトの商品オプション、アンケートフォームなど、1つの項目だけを選ばせたい場面で利用できます。スマートフォンでは余白が調整されるレスポンシブ仕様になっているため、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-radio-button_demo">
<!-- タイトル -->
<div class="three-dimensional-recessed-radio-button_title">
立体的なくぼみがあるラジオボタン
</div>
<!-- 説明文 -->
<p class="three-dimensional-recessed-radio-button_text">
選択肢から1つを選んでください。
</p>
<!-- 選択肢全体 -->
<div class="three-dimensional-recessed-radio-button_options">
<!-- 選択肢1 -->
<label class="three-dimensional-recessed-radio-button_label">
<input
class="three-dimensional-recessed-radio-button_input"
type="radio"
name="sample-option"
checked>
選択肢1
</label>
<!-- 選択肢2 -->
<label class="three-dimensional-recessed-radio-button_label">
<input
class="three-dimensional-recessed-radio-button_input"
type="radio"
name="sample-option">
選択肢2
</label>
<!-- 選択肢3 -->
<label class="three-dimensional-recessed-radio-button_label">
<input
class="three-dimensional-recessed-radio-button_input"
type="radio"
name="sample-option">
選択肢3
</label>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは同じname属性を持つ3つのradio要素を配置し、複数の選択肢から1つだけを選択できるラジオボタンを作成します。CSSではブラウザ標準のラジオボタンを非表示にし、内側の影を利用して未選択時のくぼみを表現しています。選択すると中央に青い丸が表示され、明るい影と濃い影によって盛り上がって見えるデザインへ切り替わります。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはラジオボタン全体を構成するファイルです。タイトル、説明文、「選択肢1」「選択肢2」「選択肢3」の表示内容を変更できます。3つのradio要素には同じname="sample-option"を指定しているため、同時に選択できる項目は1つだけです。最初のradio要素にはcheckedを指定しているため、ページを開いた時点では選択肢1が選択されています。
style.cssはラジオボタンの見た目を設定するファイルです。全体の横幅や余白、文字サイズ、選択肢同士の間隔に加えて、ラジオボタンの大きさ、背景色、くぼみを表現する内側の影を変更できます。選択時に表示される中央の青い丸についても、大きさ、グラデーション、影を調整できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、2つのファイルを同じ階層へ保存します。そのあとsample/index.htmlをブラウザで開いてください。選択肢のラジオボタンまたは文字をクリックすると選択状態が切り替わり、3つの選択肢から1つだけを選択できます。JavaScriptは使用しないため、HTMLとCSSだけで動作します。
カスタマイズできる内容
index.htmlではタイトル、説明文、各選択肢の文字を変更できます。選択肢を追加する場合は、同じクラスとname="sample-option"を持つlabel要素とradio要素を追加します。最初から選択しておく項目を変更したい場合は、対象となるradio要素へcheckedを指定します。
style.cssでは全体の横幅、余白、背景色、角丸、タイトルの文字サイズ、選択肢同士の間隔などを変更できます。ラジオボタン本体のbackgroundやbox-shadowを変更すると未選択時のくぼみの色や深さを調整できます。また、疑似要素::afterの大きさ、グラデーション、影を変更すると、選択時に表示される中央の丸の色や立体感を調整できます。
数値調整
style.css
max-width:620px;
ラジオボタン全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:40px 32px;
全体の内側余白です。40pxは上下、32pxは左右の余白を表します。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
全体を囲む枠の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
margin:0 0 30px;
説明文の下側余白です。30pxを大きくすると説明文と選択肢の間隔が広がります。
gap:24px;
選択肢同士の間隔です。値を大きくすると各選択肢が離れ、小さくすると近くなります。
gap:10px;
ラジオボタンと選択肢の文字との間隔です。値を大きくすると両者の間隔が広がります。
width:30px; / height:30px;
ラジオボタン本体の大きさです。2つの値を同じように変更すると円形を維持したままサイズを調整できます。
inset 4px 4px 7px
未選択時のくぼみを表現する内側の影です。最初の2つの4pxを変更すると影の位置が変わり、7pxを変更すると影のぼかし具合が変わります。
width:16px; / height:16px;
選択時に中央へ表示される青い丸の大きさです。値を大きくすると中央の丸が大きくなり、小さくすると小さくなります。
-2px -2px 4px / 3px 3px 6px
選択時の青い丸へ付けている影です。左上に明るい影、右下に濃い影を配置することで盛り上がった立体感を表現しています。各値を変更すると影の位置やぼかし具合を調整できます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:620pxによって、画面幅に合わせて全体が縮小されます。選択肢にはflex-wrap:wrapを指定しているため、横幅が足りなくなると自動的に折り返されます。また、640px以下では全体の余白をpadding:32px 18px;、選択肢同士の間隔をgap:18px;へ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント