立体的なくぼみがあるチェックボックスを作る方法【HTML/CSS・サンプルコード付き】

立体的なくぼみがあるチェックボックスを作る方法

立体的なくぼみがあるチェックボックスを作る方法を紹介します。このサンプルではHTMLとCSSだけを使用し、通常の四角いチェックボックスとは異なる、円形で厚みのある立体的なチェックボックスを表示します。外周は盛り上がったような形にし、中央には一段へこんだように見える円形のくぼみを配置することで、押し込めるボタンのような見た目にしています。

チェックボックスをクリックすると、中央のくぼみ部分だけが青色へ変化します。一般的なチェックマークは表示せず、中央部分の色の変化だけで選択状態を確認できるデザインです。「HTML」「CSS」「JavaScript」の3項目を横並びで配置しており、それぞれ個別にチェックを入れたり外したりできます。また、マウスを乗せたときには少し浮き上がり、押している間は沈み込むような動きも確認できます。

CSSではボタンの大きさ、外周と中央部分の色、くぼみの深さを表現する影、ボタン全体の厚み、項目同士の間隔などを変更できます。チェック状態の切り替えにはHTMLのチェックボックスとCSSの:checkedを使用しているため、JavaScriptは必要ありません。画面幅に合わせて項目の幅や間隔を調整するレスポンシブ対応も行っており、スマートフォン・タブレット・PCで利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

立体的なチェックボックス

立体的なボタンをクリックすると、中央のくぼみ部分の色が変わります。

HTML

CSS

JavaScript

各ボタンをクリックすると、チェックマークを表示せず中央の色だけで選択状態を確認できます。

コードをコピーして使おう！

<!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-checkbox_wrap">

    <!-- タイトル -->
    <div class="three-dimensional-checkbox_title">
      立体的なチェックボックス
    </div>

    <!-- 説明文 -->
    <p class="three-dimensional-checkbox_text">
      立体的なボタンをクリックすると、中央のくぼみ部分の色が変わります。
    </p>

    <!-- チェックボックス一覧 -->
    <div class="three-dimensional-checkbox_list">

      <!-- HTML -->
      <div class="three-dimensional-checkbox_item">

        <input
          class="three-dimensional-checkbox_input"
          type="checkbox"
          id="three-dimensional-checkbox-html">

        <label
          class="three-dimensional-checkbox_label"
          for="three-dimensional-checkbox-html">

          <span
            class="three-dimensional-checkbox_button"
            aria-hidden="true">
          </span>

          <span class="three-dimensional-checkbox_name">
            HTML
          </span>

        </label>

      </div>

      <!-- CSS -->
      <div class="three-dimensional-checkbox_item">

        <input
          class="three-dimensional-checkbox_input"
          type="checkbox"
          id="three-dimensional-checkbox-css">

        <label
          class="three-dimensional-checkbox_label"
          for="three-dimensional-checkbox-css">

          <span
            class="three-dimensional-checkbox_button"
            aria-hidden="true">
          </span>

          <span class="three-dimensional-checkbox_name">
            CSS
          </span>

        </label>

      </div>

      <!-- JavaScript -->
      <div class="three-dimensional-checkbox_item">

        <input
          class="three-dimensional-checkbox_input"
          type="checkbox"
          id="three-dimensional-checkbox-javascript">

        <label
          class="three-dimensional-checkbox_label"
          for="three-dimensional-checkbox-javascript">

          <span
            class="three-dimensional-checkbox_button"
            aria-hidden="true">
          </span>

          <span class="three-dimensional-checkbox_name">
            JavaScript
          </span>

        </label>

      </div>

    </div>

  </div>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20pxの余白 */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* 基本文字色 */
  font-family:sans-serif; /* 使用するフォント */
}

/* チェックボックス全体 */
.three-dimensional-checkbox_wrap{
  width:100%; /* 画面幅に合わせて縮小 */
  max-width:700px; /* 最大横幅 */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:36px 32px 42px; /* 上36px・左右32px・下42pxの内側余白 */
  border:1px solid #dbe3ef; /* 外枠 */
  border-radius:20px; /* 全体の角丸 */
  background:#f8fafc; /* 全体の背景色 */
  color:#111827; /* 基本文字色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* 内部要素 */
.three-dimensional-checkbox_wrap *{
  box-sizing:border-box; /* paddingとborderを要素サイズへ含める */
}

/* タイトル */
.three-dimensional-checkbox_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
  text-align:center; /* 中央揃え */
}

/* 説明文 */
.three-dimensional-checkbox_text{
  margin:0 0 34px; /* 下側34pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
  text-align:center; /* 中央揃え */
}

/* チェックボックス一覧 */
.three-dimensional-checkbox_list{
  display:grid; /* グリッドレイアウトを使用 */
  grid-template-columns:repeat(3,120px); /* 120px幅を3列作成 */
  justify-content:center; /* 一覧全体を中央へ配置 */
  gap:24px; /* 各項目の間隔 */
  margin:0; /* 外側余白を削除 */
  padding:0; /* 内側余白を削除 */
}

/* 各項目 */
.three-dimensional-checkbox_item{
  position:relative; /* inputを配置する基準 */
  width:120px; /* 各項目の横幅 */
}

/* 実際のチェックボックス */
.three-dimensional-checkbox_input{
  position:absolute; /* 見た目から外して配置 */
  width:1px; /* 視覚上非表示にする横幅 */
  height:1px; /* 視覚上非表示にする高さ */
  margin:-1px; /* 表示領域から外す */
  overflow:hidden; /* はみ出した内容を非表示 */
  clip:rect(0 0 0 0); /* 視覚上非表示 */
  white-space:nowrap; /* 折り返しを防ぐ */
  border:0; /* 枠線を削除 */
}

/* ラベル */
.three-dimensional-checkbox_label{
  display:flex; /* ボタンと文字をflexで配置 */
  flex-direction:column; /* 縦並びにする */
  align-items:center; /* 横方向中央へ配置 */
  width:100%; /* 項目幅いっぱいに表示 */
  gap:10px; /* ボタンと文字の間隔 */
  cursor:pointer; /* クリック可能であることを示す */
}

/* 立体ボタン */
.three-dimensional-checkbox_button{
  position:relative; /* 中央のくぼみを配置する基準 */
  display:block; /* ブロック要素として表示 */
  width:44px; /* ボタンの横幅 */
  height:44px; /* ボタンの高さ */
  flex-shrink:0; /* ボタンが縮まないようにする */
  border:1px solid #93c5fd; /* 外周の枠線 */
  border-radius:50%; /* 円形にする */
  background:radial-gradient(circle at 50% 38%,#ffffff 0%,#dbeafe 58%,#93c5fd 100%); /* 外周の立体感 */
  box-shadow:0 4px 0 #60a5fa,0 8px 12px rgba(37,99,235,.2); /* 厚みと影 */
  transition:transform .18s ease,box-shadow .18s ease; /* 0.18秒で動きを変化 */
}

/* 中央のくぼみ */
.three-dimensional-checkbox_button::before{
  content:""; /* 疑似要素を表示 */
  position:absolute; /* ボタン内に配置 */
  top:6px; /* 上から6px */
  right:6px; /* 右から6px */
  bottom:6px; /* 下から6px */
  left:6px; /* 左から6px */
  border-radius:50%; /* 円形にする */
  background:radial-gradient(circle at 50% 65%,#f8fafc 0%,#e5e7eb 70%,#cbd5e1 100%); /* くぼみの背景 */
  box-shadow:inset 0 5px 6px rgba(15,23,42,.24),inset 0 -2px 3px rgba(255,255,255,.9); /* 内側へへこんだように見せる */
  transition:background .22s ease,box-shadow .22s ease; /* 0.22秒で色と影を変化 */
}

/* マウスを乗せた状態 */
.three-dimensional-checkbox_label:hover
.three-dimensional-checkbox_button{
  transform:translateY(-2px); /* 2px上へ移動 */
  box-shadow:0 6px 0 #3b82f6,0 11px 15px rgba(37,99,235,.22); /* 厚みと影を強くする */
}

/* 押している状態 */
.three-dimensional-checkbox_input:active
+ .three-dimensional-checkbox_label
.three-dimensional-checkbox_button{
  transform:translateY(3px); /* 3px下へ移動 */
  box-shadow:0 1px 0 #2563eb,0 4px 6px rgba(37,99,235,.16); /* 押し込まれたように厚みを小さくする */
}

/* チェック状態の中央部分 */
.three-dimensional-checkbox_input:checked
+ .three-dimensional-checkbox_label
.three-dimensional-checkbox_button::before{
  background:radial-gradient(circle at 50% 65%,#60a5fa 0%,#2563eb 72%,#1e40af 100%); /* 中央を青色へ変更 */
  box-shadow:inset 0 5px 7px rgba(30,64,175,.55),inset 0 -2px 3px rgba(147,197,253,.5); /* 青色のくぼみを強調 */
}

/* キーボード操作時のフォーカス */
.three-dimensional-checkbox_input:focus-visible
+ .three-dimensional-checkbox_label
.three-dimensional-checkbox_button{
  outline:3px solid #93c5fd; /* フォーカス枠 */
  outline-offset:4px; /* ボタンとフォーカス枠の間隔 */
}

/* 項目名 */
.three-dimensional-checkbox_name{
  display:block; /* ブロック要素として表示 */
  width:100%; /* 項目幅いっぱいに表示 */
  min-height:23px; /* 各項目の高さを揃える */
  color:#1f2937; /* 文字色 */
  font-size:15px; /* 文字サイズ */
  font-weight:700; /* 太字 */
  line-height:1.5; /* 行間 */
  text-align:center; /* 中央揃え */
  white-space:nowrap; /* JavaScriptを1行で表示 */
}

/* 画面幅640px以下 */
@media(max-width:640px){

  /* チェックボックス全体 */
  .three-dimensional-checkbox_wrap{
    padding:28px 18px 34px; /* 内側余白を小さくする */
  }

  /* チェックボックス一覧 */
  .three-dimensional-checkbox_list{
    grid-template-columns:repeat(3,90px); /* 各項目を90px幅にする */
    gap:12px; /* 項目同士の間隔を小さくする */
  }

  /* 各項目 */
  .three-dimensional-checkbox_item{
    width:90px; /* 各項目の横幅 */
  }

  /* 項目名 */
  .three-dimensional-checkbox_name{
    font-size:13px; /* 文字サイズを小さくする */
  }

}

/* 画面幅360px以下 */
@media(max-width:360px){

  /* チェックボックス一覧 */
  .three-dimensional-checkbox_list{
    grid-template-columns:1fr; /* 1列表示に変更 */
    gap:24px; /* 縦方向の間隔 */
  }

  /* 各項目 */
  .three-dimensional-checkbox_item{
    width:100%; /* 横幅いっぱいに表示 */
  }

}

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは「HTML」「CSS」「JavaScript」の3つのチェック項目を配置し、CSSでは円形ボタンの外周に厚みを付け、中央部分を内側へくぼんだように表示します。チェック状態の切り替えにはJavaScriptを使用せず、HTMLのチェックボックスとCSSの:checkedを利用しています。

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

各ファイルの役割
index.htmlはチェックボックス全体を構成するファイルです。「HTML」「CSS」「JavaScript」の3つの項目を配置し、それぞれにinput type="checkbox"とlabel要素を使用しています。項目名を変更したい場合は、three-dimensional-checkbox_name内の文字を編集します。項目を追加する場合は、three-dimensional-checkbox_itemのまとまりを追加し、input要素のidとlabel要素のforを同じ値に設定します。

style.cssはチェックボックス全体のレイアウトと立体的なデザインを設定するファイルです。円形ボタン本体にはグラデーションと影を付け、::beforeで中央のくぼみ部分を作っています。チェックされた項目は:checkedによって中央のくぼみだけが青色へ変化します。ホバー時にはボタンが少し上へ移動し、押している間は下へ移動します。

設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを同じ階層で配置します。2つのファイルを保存したあと、sample/index.htmlをブラウザで開いてください。「HTML」「CSS」「JavaScript」の各円形ボタンまたは項目名をクリックすると、それぞれ個別にチェック状態を切り替えられます。チェックすると中央のくぼみ部分が青色になり、もう一度クリックすると元の色へ戻ります。

カスタマイズできる内容
index.htmlでは「HTML」「CSS」「JavaScript」の項目名を変更できます。また、three-dimensional-checkbox_itemを追加・削除・並び替えることで、チェック項目の件数や表示順を変更できます。

style.cssではチェックボックス全体の最大横幅、背景色、余白、角丸のほか、円形ボタンの大きさ、外周の色、中央のくぼみ部分の大きさや色、影、項目同士の間隔、文字サイズを変更できます。チェック時の中央部分の色は、.three-dimensional-checkbox_input:checked + .three-dimensional-checkbox_label .three-dimensional-checkbox_button::beforeのbackgroundから変更できます。

数値調整
style.css

max-width:700px;
チェックボックス全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。

padding:36px 32px 42px;
チェックボックス全体の内側余白です。上36px、左右32px、下42pxを設定しています。値を大きくすると内容と外枠の間隔が広がります。

grid-template-columns:repeat(3,120px);
PC表示時のチェック項目の横幅です。120px幅の列を3つ作り、「HTML」「CSS」「JavaScript」を同じ幅で配置しています。120pxを変更すると各項目が使用する横幅が変わります。

gap:24px;
PC表示時の各チェック項目の間隔です。値を大きくすると項目同士が離れ、小さくすると近づきます。

width:44px;
height:44px;
円形ボタンの大きさです。値を大きくするとボタンが大きくなり、小さくすると小さくなります。縦横を同じ値にすると円形を維持できます。

top:6px;
right:6px;
bottom:6px;
left:6px;
円形ボタンの外周から中央のくぼみまでの距離です。現在は上下左右を6px空けています。値を大きくすると中央のくぼみが小さくなって外周部分が太くなり、小さくすると中央のくぼみが大きくなります。

box-shadow:0 4px 0 #60a5fa,0 8px 12px rgba(37,99,235,.2);
通常状態の円形ボタンに付ける厚みと影です。最初の4pxは下方向へ見せる厚みです。値を大きくするとボタンの立体感が強くなります。

box-shadow:inset 0 5px 6px rgba(15,23,42,.24),inset 0 -2px 3px rgba(255,255,255,.9);
中央部分を内側へくぼんだように見せる影です。insetによって影を内側へ表示しています。数値を変更するとくぼみの深さや影の広がりが変わります。

transition:transform .18s ease,box-shadow .18s ease;
ボタンが浮き上がったり沈み込んだりするときの変化時間です。0.18秒で変化します。値を大きくするとゆっくり、小さくすると速く変化します。

transition:background .22s ease,box-shadow .22s ease;
チェック状態が切り替わったときに、中央部分の色と影が変化する時間です。0.22秒で変化します。

transform:translateY(-2px);
マウスを乗せたときに円形ボタンを2px上へ移動します。数値を大きくすると浮き上がる距離が大きくなります。

transform:translateY(3px);
ボタンを押している間に3px下へ移動します。数値を大きくすると、より深く押し込まれたように見えます。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでは全体にwidth:100%とmax-width:700pxを設定し、画面幅に合わせて縮小できるようにしています。640px以下では全体のpaddingを28px 18px 34pxへ変更し、各項目を90px幅、項目同士の間隔を12px、項目名の文字サイズを13pxへ調整します。さらに360px以下ではgrid-template-columns:1frへ切り替え、3つの項目を縦1列で表示します。スマートフォン・タブレット・PCで利用できます。