横に2行で並ぶラジオボタンを作る方法
横に2行で並ぶラジオボタンをHTMLとCSSで作る方法を紹介します。このサンプルでは、6つの選択肢を3列×2行のレイアウトで配置し、複数の候補をコンパクトにまとめて表示します。すべてのradio要素へ同じname属性を指定しているため、通常のラジオボタンと同じように複数の選択肢から1つだけを選択できます。
選択肢が多いフォームでは、すべてを縦一列に配置すると表示エリアが長くなります。横方向にも並べることで、アンケート、会員サイトの設定画面、ECサイトの商品オプション、管理画面の条件選択などで、複数の項目を見渡しやすく配置できます。各項目はラベル全体をクリックできるため、文字部分をクリックしても選択を切り替えられます。
CSS Gridを利用してPCでは3列×2行に配置し、画面幅が640px以下では1列へ切り替えます。HTMLではタイトル、説明文、選択肢の内容を変更でき、CSSでは列数、項目同士の間隔、余白、枠線、角丸などを調整できます。JavaScriptを使用しないシンプルな構成で、スマートフォン・タブレット・PCの画面幅に合わせて利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
PCでは6つのラジオボタンが3列×2行で表示されます。各項目をクリックすると選択が切り替わり、画面幅640px以下では1列表示へ切り替わります。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>横に2行で並ぶラジオボタン</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ラジオボタン全体 -->
<div class="two-row-radio-button_wrap">
<!-- タイトル -->
<div class="two-row-radio-button_title">
好きな言語を選択
</div>
<!-- 説明文 -->
<p class="two-row-radio-button_text">
6つの選択肢を3列×2行で表示しています。
</p>
<!-- ラジオボタン一覧 -->
<div class="two-row-radio-button_list">
<!-- HTMLの選択肢 -->
<label class="two-row-radio-button_label">
<input class="two-row-radio-button_input" type="radio" name="language" checked>
<span class="two-row-radio-button_name">HTML</span>
</label>
<!-- CSSの選択肢 -->
<label class="two-row-radio-button_label">
<input class="two-row-radio-button_input" type="radio" name="language">
<span class="two-row-radio-button_name">CSS</span>
</label>
<!-- JavaScriptの選択肢 -->
<label class="two-row-radio-button_label">
<input class="two-row-radio-button_input" type="radio" name="language">
<span class="two-row-radio-button_name">JavaScript</span>
</label>
<!-- PHPの選択肢 -->
<label class="two-row-radio-button_label">
<input class="two-row-radio-button_input" type="radio" name="language">
<span class="two-row-radio-button_name">PHP</span>
</label>
<!-- Pythonの選択肢 -->
<label class="two-row-radio-button_label">
<input class="two-row-radio-button_input" type="radio" name="language">
<span class="two-row-radio-button_name">Python</span>
</label>
<!-- SQLの選択肢 -->
<label class="two-row-radio-button_label">
<input class="two-row-radio-button_input" type="radio" name="language">
<span class="two-row-radio-button_name">SQL</span>
</label>
</div>
</div>
</body>
</html>コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは6つのラジオボタンを配置し、CSS Gridを使ってPCでは3列×2行に並べます。すべてのradio要素へ同じname属性を指定しているため、6つの選択肢から1つだけを選択できます。JavaScriptや外部ライブラリは使用しません。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはラジオボタン全体を構成するファイルです。タイトル、説明文、「HTML」「CSS」「JavaScript」「PHP」「Python」「SQL」の6つの選択肢を配置しています。すべてのradio要素へ同じname="language"を指定しているため、選択肢をクリックすると常に1つだけが選択されます。最初のHTMLにはcheckedを指定しているため、ページを開いた時点ではHTMLが選択されています。
style.cssはラジオボタン全体のデザインと選択肢の配置を設定するファイルです。display:grid;とgrid-template-columns:repeat(3,1fr);によって6つの項目を3列×2行へ配置し、640px以下では1列表示へ切り替えます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssを読み込む構成になっているため、追加のファイルやJavaScriptを用意する必要はありません。表示された選択肢のいずれかをクリックすると選択状態が切り替わります。
カスタマイズできる内容
index.htmlでは「好きな言語を選択」のタイトル、説明文、「HTML」「CSS」「JavaScript」「PHP」「Python」「SQL」の選択肢を変更できます。選択肢を増減する場合はlabel要素を追加・削除し、同じグループとして扱うradio要素には同じname="language"を指定します。
style.cssでは全体の最大横幅、余白、枠線、角丸、選択肢同士の間隔、ラジオボタンの大きさなどを変更できます。grid-template-columns:repeat(3,1fr);の3を変更すると、PC表示時の列数も変更できます。
数値調整
style.css
max-width:640px;
ラジオボタン全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
ラジオボタン全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
ラジオボタン全体の内側余白です。値を大きくすると内容と外枠の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
ラジオボタン全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると選択肢との間隔が広がり、小さくすると狭くなります。
grid-template-columns:repeat(3,1fr);
PC表示時の列数です。3を2へ変更すると2列、4へ変更すると4列で配置されます。選択肢の数と列数によって行数も変化します。
gap:14px;
グリッド内の選択肢同士の間隔です。値を大きくすると縦横の間隔が広がり、小さくすると近くなります。
gap:12px;
ラジオボタンと項目名との間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。
padding:14px 16px;
各選択肢の内側余白です。上下の14pxを大きくすると選択肢が高くなり、左右の16pxを大きくすると内容と枠線との間隔が広がります。
border-radius:10px;
各選択肢の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
width:20px;・height:20px;
ラジオボタン本体の大きさです。値を大きくするとラジオボタンが大きくなり、小さくすると小さくなります。
font-size:16px;
選択肢の文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:640pxによって画面幅に合わせて全体が縮小されます。通常はgrid-template-columns:repeat(3,1fr);で3列表示になり、画面幅640px以下ではgrid-template-columns:1fr;へ切り替えて1列で表示します。同時に全体の内側余白をpadding:20px;へ変更するため、スマートフォン・タブレット・PCで利用できます。
コメント