HTMLとCSSでチェックボックスのデザインを自由自在にカスタマイズ！

2024-04-05

CSS でチェックボックスのサイズを変更する方法

方法 1: width と height プロパティを使う

最も簡単な方法は、width と height プロパティを使って、チェックボックスの幅と高さを直接指定することです。例えば、以下のコードは、チェックボックスのサイズを 20px 四方にします。

.checkbox {
  width: 20px;
  height: 20px;
}

transform: scale() プロパティを使って、チェックボックスのサイズを拡大縮小することもできます。例えば、以下のコードは、チェックボックスを元のサイズの 2 倍にします。

.checkbox {
  transform: scale(2);
}

方法 3: border プロパティを使う

border プロパティを使って、チェックボックスの周りに枠線を表示し、その幅を調整することで、サイズを間接的に変更することもできます。例えば、以下のコードは、チェックボックスの周りに 5px 幅の枠線を表示し、その結果、チェックボックスのサイズを 5px ずつ増加させます。

.checkbox {
  border: 5px solid #ccc;
}

方法 4: background-size プロパティを使う

チェックボックスの背景画像を設定している場合は、background-size プロパティを使って、画像のサイズを変更することで、チェックボックスのサイズを間接的に変更することもできます。例えば、以下のコードは、チェックボックスの背景画像を 20px 四方に設定します。

.checkbox {
  background-size: 20px 20px;
}

注意点

上記の方法を組み合わせることで、より複雑なデザインを実現することもできます。
transform: scale() プロパティは、古いブラウザでは対応していない場合があります。
チェックボックスのデザインを変更する場合は、ユーザービリティに配慮する必要があります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>チェックボックスのサイズ変更</title>
  <style>
    /* 方法 1 */
    .checkbox1 {
      width: 20px;
      height: 20px;
    }

    /* 方法 2 */
    .checkbox2 {
      transform: scale(2);
    }

    /* 方法 3 */
    .checkbox3 {
      border: 5px solid #ccc;
    }

    /* 方法 4 */
    .checkbox4 {
      background-image: url(./checkbox.png);
      background-size: 20px 20px;
    }
  </style>
</head>
<body>
  <input type="checkbox" class="checkbox1" />
  <input type="checkbox" class="checkbox2" />
  <input type="checkbox" class="checkbox3" />
  <input type="checkbox" class="checkbox4" />
</body>
</html>

上記のコードをHTMLファイルに保存し、ブラウザで開くと、4つの異なるサイズのチェックボックスが表示されます。

方法 1

<input type="checkbox" class="checkbox1" />

.checkbox1 {
  width: 20px;
  height: 20px;
}

<input type="checkbox" class="checkbox2" />

.checkbox2 {
  transform: scale(2);
}

<input type="checkbox" class="checkbox3" />

.checkbox3 {
  border: 5px solid #ccc;
}

<input type="checkbox" class="checkbox4" />

.checkbox4 {
  background-image: url(./checkbox.png);
  background-size: 20px 20px;
}

上記はあくまでもサンプルコードです。実際のデザインに合わせて、コードを自由に編集してください。

チェックボックスのサイズを変更するその他の方法

.checkbox {
  padding: 5px 0;
}

.checkbox {
  margin: 0 10px;
}

方法 7: position プロパティと left / top プロパティを使う

position プロパティを absolute に設定し、left と top プロパティを使って、チェックボックスの位置を調整することで、サイズを変更することができます。この方法は、他の方法と比べて自由度が高く、複雑なデザインを実現することができます。

.checkbox {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
}

方法 8: @media クエリを使う

@media クエリを使って、デバイスや画面サイズに応じて、チェックボックスのサイズを変更することができます。例えば、以下のコードは、スマートフォンではチェックボックスを小さく、パソコンでは大きく表示します。

@media screen and (max-width: 768px) {
  .checkbox {
    width: 16px;
    height: 16px;
  }
}

@media screen and (min-width: 769px) {
  .checkbox {
    width: 20px;
    height: 20px;
  }
}