ラジオボタンを非表示にして選択ボタンを作る方法

ファイル構成と設置方法

このサンプルでは、HTMLのラジオボタンを残したまま、CSSで標準の丸い選択部分を隠してボタン型のデザインに変更しています。 HTMLには4つの選択肢を配置し、CSSで横並びのレイアウト、選択中の色、スマートフォンでの表示を設定しています。 選択状態の切り替えにはラジオボタン本来の機能を使用するため、JavaScriptは必要ありません。

sample/
├── index.html
└── style.css

各ファイルの役割
index.htmlには、「赤」「青」「緑」「黄色」のラジオボタンと、ボタンとして表示する文字を記述しています。 style.cssには、ラジオボタンを視覚的に隠す設定や、選択中のボタンを青色に変更するデザインを記述しています。

設置方法・使い方
「サンプル一式をダウンロード」からZIPファイルを保存して展開し、index.htmlとstyle.cssを同じフォルダに配置してください。 index.htmlをブラウザで開くと、4つの選択ボタンが表示されます。 最初は「赤」が選択されており、別のボタンをクリックすると選択状態が切り替わります。

ラジオボタンを非表示にする仕組み
index.htmlでは、通常のinput type="radio"を使用しています。 その直後にspanを配置し、選択肢の文字をボタンとして表示しています。 以下は「赤」の選択肢です。

<label class="hidden-radio-button_label">
  <input class="hidden-radio-button_input" type="radio" name="hidden-radio-button-color" id="hidden-radio-button-red" value="赤" checked>
  <span class="hidden-radio-button_text">赤</span>
</label>

ラジオボタンを視覚的に隠しているのは、style.cssの.hidden-radio-button_inputです。 position: absoluteで通常の配置から外し、表示領域を小さくしたうえで、clip-path: inset(50%)によって見えなくしています。

.hidden-radio-button_input {
  position: absolute; /* 通常の配置から外す */
  width: 1px; /* 表示領域を最小限にする */
  height: 1px; /* 表示領域を最小限にする */
  padding: 0; /* 内側余白をなくす */
  margin: -1px; /* 表示領域を外側へずらす */
  overflow: hidden; /* はみ出した内容を隠す */
  clip-path: inset(50%); /* ラジオボタンを視覚的に隠す */
  white-space: nowrap; /* 不要な折り返しを防ぐ */
  border: 0; /* 標準の枠線をなくす */
}

この方法では、ラジオボタンそのものをHTMLから削除していません。 そのため、labelをクリックしたときの選択動作や、キーボードによる操作を維持できます。 なお、display: noneやvisibility: hiddenを使用すると、通常のキーボード操作でフォーカスできなくなるため、このサンプルでは使用していません。

ラジオボタンを表示する場合
標準の丸いラジオボタンを表示したい場合は、style.cssから先ほどの.hidden-radio-button_inputのCSS設定を削除してください。 ラジオボタンが再び表示されます。 ただし、inputとspanを組み合わせたボタン型のデザインは残るため、通常のラジオボタンとボタン型の表示が併存します。 標準のラジオボタンだけを使用したい場合は、spanの装飾も用途に合わせて変更してください。

選択中のボタンを判定する仕組み
style.cssでは、:checkedを使って選択中のラジオボタンを判定しています。 +は直後の兄弟要素を指定するセレクタで、選択されたinputの直後にあるspanだけにデザインを適用します。

.hidden-radio-button_input:checked + .hidden-radio-button_text {
  border-color: #2563eb; /* 選択中の枠線を青色にする */
  background: #eff6ff; /* 選択中の背景を薄い青色にする */
  color: #1d4ed8; /* 選択中の文字色を青色にする */
}

選択中の枠線はborder-color、背景色はbackground、文字色はcolorで変更できます。 例えば、選択中の背景色を変更したい場合は、#eff6ffを好みのカラーコードに変更してください。 選択状態の判定はCSSで行うため、色を変更してもJavaScriptを追加する必要はありません。

選択肢を変更する方法
選択肢を変更する場合は、index.htmlのvalue属性とspan内の文字を変更します。 valueはプログラムで取得する値、span内の文字は画面に表示する内容です。 4つのラジオボタンには同じname="hidden-radio-button-color"が設定されているため、グループ内で1つだけ選択できます。

また、最初から選択しておきたい項目にはchecked属性を付けます。 このサンプルでは「赤」に設定していますが、別の項目を初期選択にしたい場合は、「赤」のcheckedを削除して、対象のラジオボタンへ移動してください。 同じグループ内でcheckedを複数指定しないようにします。

選択された値を取得する方法
選択中の値をJavaScriptで取得する場合は、name属性と:checkedを組み合わせて対象を指定します。 以下は、現在選択されているラジオボタンのvalueを取得し、変数selectedValueへ代入する例です。

const selectedRadio = document.querySelector('input[name="hidden-radio-button-color"]:checked');
const selectedValue = selectedRadio ? selectedRadio.value : null;

console.log(selectedValue);

「赤」が選択されていれば"赤"、「青」が選択されていれば"青"という文字列を取得できます。 選択されている項目がない場合はnullになります。 このコードは実行した時点の選択値を取得するため、ボタンを切り替えた後の値を取得するには、再度実行する必要があります。

このJavaScriptは値の取得方法を説明するためのコードであり、ダウンロードするZIPには含まれていません。 実際のページで使用する場合は、ラジオボタンのHTMLが読み込まれた後に実行してください。 取得した値は、条件分岐や表示内容の変更、フォームの送信処理などに利用できます。

ボタンの大きさと配置
ボタン全体の横幅は、style.cssの.hidden-radio-button_containerで設定しています。 width: 100%で設置先の横幅に合わせ、max-width: 680pxで最大横幅を制限しています。 最大横幅を大きくするとボタン全体が横に広がり、小さくするとコンパクトになります。

.hidden-radio-button_container {
  width: 100%; /* 設置先の横幅に合わせる */
  max-width: 680px; /* 全体の最大横幅 */
  margin: 40px auto; /* 上下の余白と左右中央配置 */
  font-family: sans-serif; /* 使用するフォント */
  box-sizing: border-box; /* 横幅に余白と枠線を含める */
}

4つの選択ボタンは、.hidden-radio-button_groupのgrid-template-columnsで均等な4列に配置しています。 repeat(4, minmax(0, 1fr))の4を変更すると列数を調整でき、gap: 12pxの数値を大きくするとボタン同士の間隔が広がります。

.hidden-radio-button_group {
  display: grid; /* 選択肢をグリッドで配置する */
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4列に均等配置する */
  gap: 12px; /* 選択肢同士の間隔 */
  margin: 0; /* 標準の外側余白をなくす */
  padding: 0; /* 標準の内側余白をなくす */
  border: none; /* fieldsetの標準枠線をなくす */
  min-width: 0; /* 狭い画面でのはみ出しを防ぐ */
}

各ボタンの大きさや形状は、.hidden-radio-button_textで設定しています。 min-height: 64pxはボタンの最小高さで、数値を大きくすると縦に広がります。 padding: 12pxは文字の周囲の余白、border-radius: 12pxは角の丸みを設定しています。 また、font-size: 15pxで文字サイズを変更できます。

.hidden-radio-button_text {
  display: flex; /* 文字を中央に配置するための設定 */
  align-items: center; /* 縦方向の中央に揃える */
  justify-content: center; /* 横方向の中央に揃える */
  min-height: 64px; /* ボタンの最小高さ */
  padding: 12px; /* ボタン内側の余白 */
  border: 2px solid #dbe3ee; /* 通常時の枠線 */
  border-radius: 12px; /* ボタンの角丸 */
  background: #ffffff; /* 通常時の背景色 */
  color: #334155; /* 通常時の文字色 */
  font-size: 15px; /* 文字サイズ */
  font-weight: 700; /* 文字の太さ */
  text-align: center; /* 文字を中央揃えにする */
  box-sizing: border-box; /* 高さに余白と枠線を含める */
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; /* 選択時の色変化を滑らかにする */
}

レスポンシブ対応
style.cssでは、画面幅が640px以下になると、4列の選択ボタンを2列に変更しています。 スマートフォンではボタンの最小高さを56px、文字サイズを14pxに調整し、狭い画面でも操作しやすい配置にしています。

@media (max-width: 640px) {

  .hidden-radio-button_container {
    margin: 24px auto; /* 上下の余白を小さくする */
  }

  .hidden-radio-button_group {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 選択肢を2列に変更する */
    gap: 12px; /* 選択肢同士の間隔 */
  }

  .hidden-radio-button_text {
    min-height: 56px; /* ボタンの最小高さを小さくする */
    padding: 10px; /* ボタン内側の余白を小さくする */
    font-size: 14px; /* 文字サイズを小さくする */
  }

}