デフォルトのチェックボックスは機能的ではありますが、その見た目は非常にシンプルで、ウェブサイトのデザインにおいては地味になりがちです。
特に、個性的で魅力的なデザインを求める現代のウェブデザインでは、チェックボックスもスタイリッシュにカスタマイズすることが求められます。

そこで今回は、CSSを使ってオリジナルのデザインを持ったカスタムチェックボックスを作成する方法を、ステップごとに詳しく解説します。さあ、あなたのウェブサイトに個性を加えてみましょう！

HTMLの準備

まずは、カスタムチェックボックスを作成するための基本的なHTMLを準備します。
以下のコードを使用して、チェックボックスの構造を作りましょう。

<label class="custom-checkbox">
  <input type="checkbox" id="checkbox1">
  <span class="checkmark"></span>
  チェックボックスのラベル
</label>

このコードでは、<label>タグ内にチェックボックスの入力要素（<input>）と、カスタムスタイルを適用するための<span>タグを含めています。<span>は、後でCSSでスタイルを施す部分になります。

CSSの基本スタイル

次に、カスタムチェックボックスの見た目を定義するためのCSSを追加します。
以下のスタイルを用意してください。

.custom-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.custom-checkbox input {
    position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  width: 20px; /* チェックマークの幅 */
  height: 20px; /* チェックマークの高さ */
  border: 2px solid #007BFF; /* 枠の色 */
  border-radius: 4px; /* 角を丸くする */
  position: relative;
  margin-right: 10px; /* ラベルとのスペース */
  transition: background-color 0.3s; /* 背景色のアニメーション */
}

このスタイルでは、チェックボックスを隠し、その代わりにカスタムチェックマークを表示するための基本的な設定を行っています。

チェックマークのスタイル

チェックボックスが選択されたときに表示されるチェックマークをデザインします。以下のCSSを追加します。

.custom-checkbox input:checked + .checkmark {
  background-color: #007BFF; /* 選択時の背景色 */
}

.checkmark:after {
  content: ""; /* コンテンツを生成 */
  position: absolute;
  left: 5px; /* チェックマークの位置調整 */
  top: 0px; /* チェックマークの位置調整 */
  width: 7px; /* チェックマークの幅 */
  height: 12px; /* チェックマークの高さ */
  border: solid white; /* チェックマークの色 */
  border-width: 0 2px 2px 0; /* チェックマークの形状 */
  transform: rotate(45deg); /* チェックマークの回転 */
  opacity: 0; /* 初期状態では透明 */
  transition: opacity 0.3s; /* チェックマークのフェードイン */
}

.custom-checkbox input:checked + .checkmark:after {
  opacity: 1; /* 選択時に表示 */
}
チェックボックス

このコードでは、チェックボックスが選択されたときに表示されるチェックマークの形状とアニメーションを定義しています。

レスポンシブデザインの考慮

ウェブサイトはさまざまなデバイスで表示されるため、レスポンシブデザインを考慮することが重要です。以下のようにメディアクエリを追加して、チェックボックスのサイズを調整しましょう。

@media (max-width: 600px) {
  .checkmark {
    width: 16px; /* 小さい画面での幅 */
    height: 16px; /* 小さい画面での高さ */
  }

  .checkmark:after {
    width: 5px; /* 小さい画面でのチェックマークの幅 */
    height: 10px; /* 小さい画面でのチェックマークの高さ */
  }
}

このメディアクエリを使うことで、小さい画面でもカスタムチェックボックスが適切に表示されるように調整できます。

ノーコードでフォームを作成

チェックボックス、ラジオボタン、名前入力欄などなど、フォームの見た目をHTMLとCSSでカスタマイズするのは手間がかかります。
コーディングに時間をかけたくない時には、無料フォーム作成ツール「フォームメーラー」がおすすめです。
簡単クリック操作でフォームを作成でき、チェックボックスや入力欄の見た目もイケてる、使いやすいデザインでフォームを公開できます。

リアルタイムでの入力漏れチェックや誤操作でのフォーム離脱時アラート表示など、 訪問者がストレスなく申し込み、問い合わせできるような機能もノーコードで実現するので、イチからフォーム作成を検討している方は、ぜひ一度フォームメーラーをご利用ください。

ノーコードでフォームを作成
フォームメーラー

▼フォームメーラー
https://www.form-mailer.jp/

まとめ

以上が、CSSを使ってカスタムチェックボックスを作成するためのステップバイステップガイドです。
デフォルトのチェックボックスをスタイリッシュで魅力的なものにカスタマイズすることで、あなたのウェブサイトに個性を加えることができます。

デザインに合わせて色やサイズを調整し、ぜひ自分だけのオリジナルなチェックボックスを作ってみてください。

あなたのウェブサイトがさらに魅力的になることを願っています！

▼フォームの用途別活用法を紹介
https://www.form-mailer.jp/usage/usage_list/

フォームメーラー