【初心者向け】HTMLラジオボタンのデザインをカスタマイズする方法を簡単ステップで解説！

※本ページはプロモーションが含まれています。

本記事は、「ラジオボタンの見た目を改良したいけど、どうしたらいいのか…」と思いつつ

UIHACK 編集長

・HTMLでラジオボタンを作成したいが、人には言わないけど基本的なことから理解したい人
・ラジオボタンをボタン風にカスタマイズしたい人
・他のサイトとは、差別化したいデザインが希望の人

上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向けに現役エンジニアが解説します。

この記事では、「前半」では「ラジオボタン属性の使い方とカスタマイズのポイント」を「後半」では「ラジオボタンのCSSデザインアイデア」を詳しく解説します。

プログラミング未経験の方でも、読みやすい内容なので、本記事を読んで未来に向けて、一歩を踏み出しましょう。

それでは、ご一読ください！

HTML ラジオボタン属性の使い方とカスタマイズのポイント
コピペOK！使いやすくてお洒落なCSSで作成するラジオボタンのデザインアイデア集
ラジオボタン属性の使い方の結論とまとめ

HTML ラジオボタン属性の使い方とカスタマイズのポイント

ラジオボタンは、ウェブページのフォーム部分で使われるものです。複数の選択肢から1つだけを選ぶ場合に使います。

例えば、「男性」「女性」という性別の選択肢があり、その中から1つだけを選ぶ場合にラジオボタンを使います。

基本的なHTMLラジオボタンの作成方法

<form>
  <input type="radio" name="gender" value="male" id="male">
  <label for="male">男性</label>

  <input type="radio" name="gender" value="female" id="female">
  <label for="female">女性</label>
</form>

HTML

【実行結果】基本的なHTMLラジオボタン

プチ解説

・それぞれのラジオボタンはinput要素のtype属性にradioを指定し、同じname属性を持つことでグループ化されます。

・name属性には「gender」という名前を指定しています。これにより、男性と女性のラジオボタンが同じグループに属し、1つだけが選択できるようになります。
・value属性には、選択されたラジオボタンが送信されたときにサーバーに送る値を指定します。

UIHACK 編集長

以下に詳しくラジオボタンに使える属性を解説しています。

HTML ラジオボタンの基本的な属性

基本的な属性

type=”radio
ラジオボタンを作るためには、type=”radio”という属性を設定します。
name
ラジオボタンをグループ化するための属性です。同じname属性を持つラジオボタンは1つのグループとして扱われ、グループ内で1つだけが選択できます。例えば、性別を選択する場合、男性と女性のラジオボタンは同じname属性を持たなければなりません。
value
ラジオボタンが選択された際にサーバーに送信される値を指定します。例えば、男性を選択した場合にサーバーに送る値を「male」と設定します。
checked
ページが読み込まれた際にあらかじめ選択状態にするラジオボタンを指定します。複数のラジオボタンがある場合、checked属性を1つだけ指定することで初期選択状態を設定できます。

コピペOK！使いやすくてお洒落なCSSで作成するラジオボタンのデザインアイデア集

ラジオボタンは、ウェブサイトのフォーム部分でよく使われるもので、複数の選択肢から1つだけを選ぶためのボタンのようなものです。

ラジオボタンはデフォルトではシンプルな見た目ですが、CSSを使って自分好みのデザインにカスタマイズできます。

例えば、以下のようなデザインアイデアがあります。

ボタン風に変身！CSSでラジオボタンをボタン化する手順とデザインアイデア

普通のラジオボタンをボタンのようにデザインすることで、選択しやすくなります。たとえば、ラジオボタンが選択されているときは青色に変わるようにしたり、ボーダーのデザインを変えたりすることができます。

【完成デモ】ラジオボタンをボタン風にカスタマイズ

HTMLの解説

<form>
    <label for="option1">選択肢1</label>
    <input type="radio" name="options" value="option1" id="option1">
        
    <label for="option2">選択肢2</label>
    <input type="radio" name="options" value="option2" id="option2">
</form>

HTML

プチ解説

・<label for=”option1″>: ラジオボタンをラベルとして使うための要素です。for属性には対応するラジオボタンのidを指定します。

・type=”radio”:でラジオボタンを指定し、name属性にはグループ化するラジオボタンの名前を指定します。id属性とfor属性の値を一致させることで、ラジオボタンとラベルを関連付けています。

CSSの解説

/* ラジオボタンをボタン風に変更 */
input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #ccc;
}

/* ラジオボタンの選択状態をカスタマイズ */
input[type="radio"]:checked {
  border-color: #007bff;
  background-color: #007bff;
}

CSS

プチ解説

・-webkit-appearance: none; -moz-appearance: none; appearance: none;: ラジオボタンのデフォルトスタイルを無効化しています。これにより、後述のスタイルが適用されるようになります。
・width: 20px; height: 20px;:ラジオボタンのサイズを指定しています。
・border-radius: 50%;:ラジオボタンの形状を丸くするために、border-radiusを50%に指定しています。
・border-color: #007bff; background-color: #007bff;:選択された状態のラジオボタンの枠線と背景色を青色 (#007bff)に指定しています。

UIHACK 編集長

これらのCSSスタイルにより、ラジオボタンがボタン風に変身し、選択された状態では青色のボーダーと背景色が表示されるようになります。

HTMLとCSSのコードを合わせて、ボタン風のラジオボタンを実現してみてください。

一歩進んだデザインを極める！タイル型チェックボックスの実装方法を解説します。

タイル型チェックボックスは、美しく洗練されたデザインを提供し、ユーザーに親しみやすいインターフェースを作成するのに役立ちます。このコードを使って、魅力的なチェックボックスグループを実装してみてください。

【完成デモ】タイル型チェックボックス

HTMLの解説

<fieldset class="checkbox-group">
  <legend class="checkbox-group-legend">お気に入りを選択してください</legend>
  <!--SVGアイコン_１-->
  <div class="checkbox">
    <label class="checkbox-wrapper">
      <input type="checkbox" class="checkbox-input" />
      <span class="checkbox-tile">
        <span class="checkbox-icon">
          <svg width="80px" height="80px" viewBox="-22.5 0 301 301" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
            <g>
              <path d="M78.3890161,0.858476242 C76.9846593,0.871877584 75.5269206,1.21067383 74.1988355,1.94683705 C69.9813154,4.28464966 68.4344792,9.70448752 70.7705059,13.9187887 L80.2936432,31.1148585 C57.3501835,45.3109605 42.146676,69.5583356 42.146676,97.23264 C42.146676,97.3488107 42.1463538,97.5233203 42.146676,97.6951925 C42.1467894,97.7558421 42.1461099,97.7904107 42.146676,97.8584397 C42.1467112,97.9488816 42.146676,98.0809536 42.146676,98.1033235 L42.146676,102.37513 C37.7401995,97.3051619 31.2627337,94.103607 24.0255064,94.103607 C10.766574,94.103607 0,104.870185 0,118.129121 L0,192.137501 C0,205.396437 10.766574,216.163015 24.0255064,216.163015 C31.2627337,216.163015 37.7401995,212.96146 42.146676,207.891492 L42.146676,218.258109 C42.146676,232.234601 53.5833566,243.671281 67.5598484,243.671281 L74.0083724,243.671281 L74.0083724,276.594135 C74.0083724,289.853131 84.774955,300.619649 98.0338856,300.619649 C111.292821,300.619649 122.0594,289.853131 122.0594,276.594135 L122.0594,243.671281 L133.215081,243.671281 L133.215081,276.594135 C133.215081,289.853131 143.981659,300.619649 157.240595,300.619649 C170.499522,300.619649 181.266118,289.853131 181.266118,276.594135 L181.266118,243.671281 L187.714637,243.671281 C201.691129,243.671281 213.127809,232.234601 213.127809,218.258109 L213.127809,207.891492 C217.534299,212.96146 224.011752,216.163015 231.248984,216.163015 C244.507919,216.163015 255.274498,205.396437 255.274498,192.137501 L255.274498,118.129121 C255.274498,104.870185 244.507919,94.103607 231.248984,94.103607 C224.011752,94.103607 217.534299,97.3051619 213.127809,102.37513 L213.127809,98.1849514 L213.127809,98.1033407 C213.128367,97.9723769 213.127955,97.8421262 213.127809,97.8584655 C213.129527,97.5976548 213.127809,97.3898395 213.127809,97.2326572 C213.127809,69.5631979 197.890397,45.339215 174.95363,31.1420821 L184.503985,13.918763 C186.840011,9.70446174 185.293178,4.28462389 181.075655,1.94681128 C179.747565,1.21064805 178.289834,0.871868993 176.885477,0.85845047 C173.770979,0.828641074 170.714038,2.4700306 169.103704,5.37514094 L159.118011,23.4146964 C149.353914,19.811505 138.730068,17.8368515 127.637245,17.8368515 C116.555726,17.8368515 105.912363,19.7912913 96.1564693,23.3874813 L86.1707769,5.37514094 C84.5604527,2.47002201 81.503506,0.828709799 78.3890161,0.85845047 L78.3890161,0.858476242 Z" fill="#FFFFFF">

              </path>
              <path d="M24.0260725,100.361664 C14.1317,100.361664 6.25861893,108.234747 6.25861893,118.129121 L6.25861893,192.137501 C6.25861893,202.031875 14.1317,209.904958 24.0260725,209.904958 C33.9204441,209.904958 41.7935257,202.031875 41.7935257,192.137501 L41.7935257,118.129121 C41.7935257,108.234747 33.9204441,100.361664 24.0260725,100.361664 L24.0260725,100.361664 Z M231.249551,100.361664 C221.355176,100.361664 213.482094,108.234747 213.482094,118.129121 L213.482094,192.137501 C213.482094,202.031875 221.355176,209.904958 231.249551,209.904958 C241.143925,209.904958 249.016999,202.031875 249.016999,192.137501 L249.016999,118.129121 C249.016999,108.234747 241.143925,100.361664 231.249551,100.361664 L231.249551,100.361664 Z" fill="#A4C639">

              </path>
              <path d="M98.0338856,184.818075 C88.1395114,184.818075 80.2664341,192.691157 80.2664341,202.585531 L80.2664341,276.593963 C80.2664341,286.488363 88.1395114,294.361308 98.0338856,294.361308 C107.92826,294.361308 115.801342,286.488363 115.801342,276.593963 L115.801342,202.585531 C115.801342,192.691157 107.92826,184.818075 98.0338856,184.818075 L98.0338856,184.818075 Z M157.240595,184.818075 C147.346221,184.818075 139.473138,192.691157 139.473138,202.585531 L139.473138,276.593963 C139.473138,286.488363 147.346221,294.361308 157.240595,294.361308 C167.134969,294.361308 175.008043,286.488363 175.008043,276.593963 L175.008043,202.585531 C175.008043,192.691157 167.134969,184.818075 157.240595,184.818075 L157.240595,184.818075 Z" fill="#A4C639">

              </path>
              <path d="M78.4434341,7.11654228 C78.0234231,7.12083758 77.6320498,7.22919946 77.2462398,7.44304537 C75.9792855,8.14533584 75.5626532,9.60121987 76.2667168,10.8713836 L88.782836,33.4820338 C64.7023936,46.0117562 48.4373365,69.8232526 48.4047377,97.1510121 L206.869751,97.1510121 C206.837193,69.8232526 190.572096,46.0117562 166.491645,33.4820338 L179.007777,10.8713836 C179.711837,9.60121987 179.295201,8.14533584 178.02825,7.44304537 C177.642438,7.22919946 177.251067,7.1205455 176.831055,7.11654228 C175.931919,7.10786577 175.079646,7.55712 174.599912,8.42257181 L161.920533,31.2781058 C151.548297,26.6773219 139.914231,24.0949434 127.637245,24.0949434 C115.360249,24.0949434 103.726174,26.6773219 93.3539479,31.2781058 L80.6745686,8.42257181 C80.1948375,7.55712 79.3425576,7.10791732 78.4434341,7.11654228 L78.4434341,7.11654228 Z M48.4047377,103.40907 L48.4047377,218.258109 C48.4047377,228.870039 56.9479173,237.413214 67.5598484,237.413214 L187.714637,237.413214 C198.326576,237.413214 206.869751,228.870039 206.869751,218.258109 L206.869751,103.40907 L48.4047377,103.40907 L48.4047377,103.40907 Z" fill="#A4C639">

              </path>
              <path d="M91.0681772,54.9226953 C87.4507168,54.9226953 84.4563973,57.9170105 84.4563973,61.5344795 C84.4563973,65.1519399 87.4507168,68.146255 91.0681772,68.146255 C94.6856376,68.146255 97.6799528,65.1519399 97.6799528,61.5344795 C97.6799528,57.9170105 94.6856376,54.9226953 91.0681772,54.9226953 L91.0681772,54.9226953 Z M164.205874,54.9226953 C160.588413,54.9226953 157.59409,57.9170105 157.59409,61.5344795 C157.59409,65.1519399 160.588413,68.146255 164.205874,68.146255 C167.823326,68.146255 170.817649,65.1519399 170.817649,61.5344795 C170.817649,57.9170105 167.823326,54.9226953 164.205874,54.9226953 L164.205874,54.9226953 Z" fill="#FFFFFF">

              </path>
            </g>
          </svg>
        </span>
        <span class="checkbox-label">ノーマルなAndroid</span>
      </span>
    </label>
  </div>
  <!--SVGアイコン_2-->
  <div class="checkbox">
    <label class="checkbox-wrapper">
      <input type="checkbox" class="checkbox-input" />
      <span class="checkbox-tile">
        <span class="checkbox-icon">
          <svg height="80px" width="80px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.001 512.001" xml:space="preserve">
            <path style="fill:#2D527C;" d="M353.4,414.598h-7.846c-8.041,0-14.562-6.519-14.562-14.562s6.521-14.562,14.562-14.562h7.846
	c5.43,0,7.853-2.422,7.853-7.853V247.507c0-8.042,6.521-14.562,14.562-14.562s14.562,6.519,14.562,14.562V377.62
	C390.376,399.046,374.825,414.598,353.4,414.598z" />
            <path style="fill:#CEE8FA;" d="M375.814,182.717V156.86c0-66.172-53.643-119.813-119.813-119.813l0,0
	c-66.172,0-119.813,53.643-119.813,119.813v25.859h239.627V182.717z" />
            <path style="fill:#2D527C;" d="M342.055,53.739l28.879-28.879c5.686-5.686,5.686-14.907,0-20.595
	c-5.688-5.686-14.906-5.686-20.595,0l-33.036,33.036c-18.39-9.468-39.234-14.818-61.302-14.818s-42.912,5.35-61.302,14.818
	L161.662,4.265c-5.688-5.686-14.905-5.686-20.595,0c-5.686,5.686-5.686,14.907,0,20.595l28.879,28.879
	c-29.512,24.669-48.322,61.738-48.322,103.121v25.859c0,0.02,0.003,0.041,0.003,0.061s-0.003,0.041-0.003,0.061v194.784
	c0,19.115,12.378,33.553,30.261,36.447v49.799c0,26.09,22.042,48.131,48.133,48.131c26.088,0,48.128-22.042,48.128-48.131v-49.267
	h15.708v49.267c-0.001,12.38,5.22,24.701,14.324,33.807c9.104,9.104,21.426,14.324,33.807,14.324
	c26.089,0,48.131-22.042,48.131-48.133c0-8.043-6.521-14.562-14.562-14.562s-14.562,6.519-14.562,14.562
	c0,9.949-9.06,19.009-19.008,19.009c-4.714,0-9.529-2.113-13.212-5.796c-3.683-3.683-5.794-8.497-5.794-13.21v-63.829
	c0-8.043-6.521-14.562-14.562-14.562h-44.832c-8.041,0-14.562,6.519-14.562,14.562v63.829c0,9.949-9.059,19.008-19.005,19.008
	c-9.949,0-19.009-9.06-19.009-19.008v-63.829c0-8.043-6.521-14.562-14.562-14.562h-7.847c-5.43,0-7.853-2.422-7.853-7.853V197.279
	h225.066c8.041,0,14.562-6.519,14.562-14.562v-25.859C390.376,115.476,371.568,78.408,342.055,53.739z M361.252,168.155H150.749
	v-11.297c0-58.036,47.217-105.251,105.251-105.251s105.251,47.215,105.251,105.251V168.155z" />
            <path style="fill:#CEE8FA;" d="M73.249,358.937L73.249,358.937c-13.953,0-25.266-11.312-25.266-25.266V206.752
	c0-13.953,11.312-25.266,25.266-25.266l0,0c13.953,0,25.266,11.312,25.266,25.266v126.919
	C98.514,347.626,87.203,358.937,73.249,358.937z" />
            <path style="fill:#2D527C;" d="M73.249,373.499c-21.961,0-39.828-17.867-39.828-39.828V206.752
	c0-21.961,17.867-39.828,39.828-39.828s39.828,17.867,39.828,39.828v126.919C113.076,355.633,95.21,373.499,73.249,373.499z
	 M73.249,196.05c-5.902,0-10.704,4.801-10.704,10.704v126.92c0,5.902,4.802,10.704,10.704,10.704s10.704-4.801,10.704-10.704
	v-126.92C83.952,200.851,79.151,196.05,73.249,196.05z" />
            <path style="fill:#CEE8FA;" d="M438.752,358.937L438.752,358.937c-13.953,0-25.266-11.312-25.266-25.266V206.752
	c0-13.953,11.312-25.266,25.266-25.266l0,0c13.953,0,25.266,11.312,25.266,25.266v126.919
	C464.016,347.626,452.705,358.937,438.752,358.937z" />
            <g>
              <path style="fill:#2D527C;" d="M438.752,373.499c-21.961,0-39.828-17.867-39.828-39.828V206.752
		c0-21.961,17.867-39.828,39.828-39.828c21.961,0,39.828,17.867,39.828,39.828v126.919
		C478.578,355.633,460.712,373.499,438.752,373.499z M438.752,196.05c-5.902,0-10.704,4.801-10.704,10.704v126.92
		c0,5.902,4.802,10.704,10.704,10.704c5.902,0,10.704-4.801,10.704-10.704v-126.92C449.455,200.851,444.654,196.05,438.752,196.05z" />
              <circle style="fill:#2D527C;" cx="215.225" cy="112.796" r="12.378" />
              <circle style="fill:#2D527C;" cx="296.771" cy="112.796" r="12.378" />
            </g>
          </svg>
          <symbol id="icon-home" viewBox="0 0 32 32">
            <path d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path>
          </symbol>
        </span>
        <span class="checkbox-label">可愛いAndroid</span>
      </span>
    </label>
  </div>
  <!--SVGアイコン_3-->
  <div class="checkbox">
    <label class="checkbox-wrapper">
      <input type="checkbox" class="checkbox-input" />
      <span class="checkbox-tile">
        <span class="checkbox-icon">
          <svg height="80px" width="80px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.001 512.001" xml:space="preserve">
            <path style="fill:#B3404A;" d="M353.4,414.598h-7.846c-8.041,0-14.562-6.519-14.562-14.562s6.521-14.562,14.562-14.562h7.846
	c5.43,0,7.853-2.422,7.853-7.853V247.507c0-8.042,6.521-14.562,14.562-14.562s14.562,6.519,14.562,14.562V377.62
	C390.376,399.046,374.825,414.598,353.4,414.598z" />
            <path style="fill:#F4B2B0;" d="M375.814,182.717V156.86c0-66.172-53.643-119.813-119.813-119.813l0,0
	c-66.172,0-119.813,53.643-119.813,119.813v25.859h239.627V182.717z" />
            <path style="fill:#B3404A;" d="M342.055,53.739l28.879-28.879c5.686-5.686,5.686-14.907,0-20.595
	c-5.688-5.686-14.906-5.686-20.595,0l-33.036,33.036c-18.39-9.468-39.234-14.818-61.302-14.818s-42.912,5.35-61.302,14.818
	L161.662,4.265c-5.688-5.686-14.905-5.686-20.595,0c-5.686,5.686-5.686,14.907,0,20.595l28.879,28.879
	c-29.512,24.669-48.322,61.738-48.322,103.121v25.859c0,0.02,0.003,0.041,0.003,0.061s-0.003,0.041-0.003,0.061v194.784
	c0,19.115,12.378,33.553,30.261,36.447v49.799c0,26.09,22.042,48.131,48.133,48.131c26.088,0,48.128-22.042,48.128-48.131v-49.267
	h15.708v49.267c-0.001,12.38,5.22,24.701,14.324,33.807c9.104,9.104,21.426,14.324,33.807,14.324
	c26.089,0,48.131-22.042,48.131-48.133c0-8.043-6.521-14.562-14.562-14.562s-14.562,6.519-14.562,14.562
	c0,9.949-9.06,19.009-19.008,19.009c-4.714,0-9.529-2.113-13.212-5.796c-3.683-3.683-5.794-8.497-5.794-13.21v-63.829
	c0-8.043-6.521-14.562-14.562-14.562h-44.832c-8.041,0-14.562,6.519-14.562,14.562v63.829c0,9.949-9.059,19.008-19.005,19.008
	c-9.949,0-19.009-9.06-19.009-19.008v-63.829c0-8.043-6.521-14.562-14.562-14.562h-7.847c-5.43,0-7.853-2.422-7.853-7.853V197.279
	h225.066c8.041,0,14.562-6.519,14.562-14.562v-25.859C390.376,115.476,371.568,78.408,342.055,53.739z M361.252,168.155H150.749
	v-11.297c0-58.036,47.217-105.251,105.251-105.251s105.251,47.215,105.251,105.251V168.155z" />
            <path style="fill:#F4B2B0;" d="M73.249,358.937L73.249,358.937c-13.953,0-25.266-11.312-25.266-25.266V206.752
	c0-13.953,11.312-25.266,25.266-25.266l0,0c13.953,0,25.266,11.312,25.266,25.266v126.919
	C98.514,347.626,87.203,358.937,73.249,358.937z" />
            <path style="fill:#B3404A;" d="M73.249,373.499c-21.961,0-39.828-17.867-39.828-39.828V206.752
	c0-21.961,17.867-39.828,39.828-39.828s39.828,17.867,39.828,39.828v126.919C113.076,355.633,95.21,373.499,73.249,373.499z
	 M73.249,196.05c-5.902,0-10.704,4.801-10.704,10.704v126.92c0,5.902,4.802,10.704,10.704,10.704s10.704-4.801,10.704-10.704
	v-126.92C83.952,200.851,79.151,196.05,73.249,196.05z" />
            <path style="fill:#F4B2B0;" d="M438.752,358.937L438.752,358.937c-13.953,0-25.266-11.312-25.266-25.266V206.752
	c0-13.953,11.312-25.266,25.266-25.266l0,0c13.953,0,25.266,11.312,25.266,25.266v126.919
	C464.016,347.626,452.705,358.937,438.752,358.937z" />
            <g>
              <path style="fill:#B3404A;" d="M438.752,373.499c-21.961,0-39.828-17.867-39.828-39.828V206.752
		c0-21.961,17.867-39.828,39.828-39.828c21.961,0,39.828,17.867,39.828,39.828v126.919
		C478.578,355.633,460.712,373.499,438.752,373.499z M438.752,196.05c-5.902,0-10.704,4.801-10.704,10.704v126.92
		c0,5.902,4.802,10.704,10.704,10.704c5.902,0,10.704-4.801,10.704-10.704v-126.92C449.455,200.851,444.654,196.05,438.752,196.05z" />
              <circle style="fill:#B3404A;" cx="215.225" cy="112.796" r="12.378" />
              <circle style="fill:#B3404A;" cx="296.771" cy="112.796" r="12.378" />
            </g>
          </svg>
          <symbol id="icon-home" viewBox="0 0 32 32">
            <path d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path>
          </symbol>
        </span>
        <span class="checkbox-label">儚い<br>Android</span>
      </span>
    </label>
  </div>
</fieldset>

HTML

プチ解説

・<fieldset>: タグで囲まれたフィールドセットを表しています。フィールドセットは、関連する要素をグループ化するためのコンテナです。この場合、お気に入りのAndroidアイコンを選択するためのグループとして使われています。

・<legend>:フィールドセットの見出しを表します。ここでは、「お気に入りを選択してください」という文言が見出しとして使われています。

・SVG（Scalable Vector Graphics）：XMLベースのベクター形式の画像フォーマットであり、Webページやアプリケーションで静止画やアニメーションを描画するのに適しています。

・cx 属性と cy 属性で、円の中心座標を指定します（ここでは(x, y)=(50, 50)）。
・r 属性で、円の半径を指定します。
・fill 属性で、円の塗りつぶしの色を指定します（ここでは赤色）。

SVGでは他にも多くの要素や属性があります。長くなるの別の記事で解説します。

CSSの解説

*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f9;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
  user-select: none;
  & > * {
    margin: 0.5rem 0.5rem;
  }
}

.checkbox-group-legend {
  font-size: 1.5rem;
  font-weight: 700;
  color: #9c9c9c;
  text-align: center;
  line-height: 1.125;
  margin-bottom: 1.25rem;
}

.checkbox-input {
  // Code to hide the input
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;

  &:checked + .checkbox-tile {
    border-color: #2260ff;
    box-shadow: 0 5px 10px rgba(#000, 0.1);
    color: #2260ff;
    &:before {
      transform: scale(1);
      opacity: 1;
      background-color: #2260ff;
      border-color: #2260ff;
    }

    .checkbox-icon,
    .checkbox-label {
      color: #2260ff;
    }
  }

  &:focus + .checkbox-tile {
    border-color: #2260ff;
    box-shadow: 0 5px 10px rgba(#000, 0.1), 0 0 0 4px #b5c9fc;
    &:before {
      transform: scale(1);
      opacity: 1;
    }
  }
}

.checkbox-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 7rem;
  min-height: 7rem;
  border-radius: 0.5rem;
  border: 2px solid #b5bfd9;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(#000, 0.1);
  transition: 0.15s ease;
  cursor: pointer;
  position: relative;

  &:before {
    content: "";
    position: absolute;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #b5bfd9;
    background-color: #fff;
    border-radius: 50%;
    top: 0.25rem;
    left: 0.25rem;
    opacity: 0;
    transform: scale(0);
    transition: 0.25s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }

  &:hover {
    border-color: #2260ff;
    &:before {
      transform: scale(1);
      opacity: 1;
    }
  }
}

.checkbox-icon {
  transition: 0.375s ease;
  color: #494949;
  svg {
    width: 3rem;
    height: 3rem;
  }
}

.checkbox-label {
  color: #707070;
  transition: 0.375s ease;
  text-align: center;
}

CSS

プチ解説

・checkbox-group: トグルボタンのグループを示すクラスです。
・checkbox-group-legend:トグルボタンのグループの見出しを示すクラスです。

CSSで簡単に作る！トグルボタンの実装方法を解説します

トグルボタンは、ウェブページやアプリケーションなどで頻繁に使用される、オンとオフの状態を切り替えるためのボタンです。これは、ユーザーが設定やオプションを簡単に切り替えたり、コンテンツを表示・非表示にしたりするのに便利なUI要素として利用されます。

【完成デモ】CSSで簡単に作る！トグルボタン

HTMLの解説

<label class="toggle-button">
  <input type="checkbox">
  <span class="slider"></span>
</label>

HTML

プチ解説

・<label class=”toggle-button”>: トグルボタンのコンテナを示すラベル要素です。
・<span class=”slider”></span>:トグルボタンのスライダー部分を示すスパン要素です。

CSSの解説

body {
  font-family: "Inter", sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f9;
}

/* トグルボタンのコンテナ */
.toggle-button {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}

/* チェックボックスを隠す */
.toggle-button input {
  display: none;
}

/* トグルボタンのスライダー部分 */
.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  background-color: #ccc; /* 初期の背景色 */
  border-radius: 30px; /* 丸い形状にする */
  transition: background-color 0.3s ease; /* 背景色の変化をアニメーション化 */
}

/* チェックされた状態のトグルボタン */
.toggle-button input:checked + .slider {
  background-color: #2196f3; /* チェックされた時の背景色 */
}

/* スライダーの円形部分（ノブ） */
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%; /* 円形にする */
  transition: transform 0.3s ease; /* ノブの移動をアニメーション化 */
}

/* チェックされた状態のノブ */
.toggle-button input:checked + .slider:before {
  transform: translateX(30px); /* チェックされた時のノブの位置 */
}

CSS

プチ解説

・.slider: トグルボタンのスライダー部分に対するスタイルを指定します。
・.toggle-button input:checked + .slider : チェックされた状態のトグルボタンに対するスタイルを指定します。
・.slider:before：スライダーの円形部分（ノブ）に対するスタイルを指定します。
・.toggle-button input:checked + .slider:before:チェックされた状態のノブに対するスタイルを指定します。

あなたにオススメの本

【4年連続、売上第1位！】
【全国の書店員がオススメする本(2019年度 CPU大賞)第1位!】