コピペOK！Webサイトのチェックボックスをおしゃれにカスタマイズする方法2つ
今回の記事の難易度★★★★☆【上級者向け】
■今回の記事はこんな人のために書いています
⇒Webサイトのチェックリストを少しおしゃれにカスタマイズしたい人
■今回の記事を読むと以下のことが分かります
⇒おしゃれに心地よく操作できるチェックリストの作り方（HTMLとCSSの書き方）がわかる
デザインが美しい、操作が心地よいとそのWebサイトのことを好きになるっていうことはありますよね！
そこで、今回はめちゃくちゃ細かい部分なんですが、Webサイトの中でも特にユーザーさんに操作してもらう部分である「チェックボックス」をカスタマイズする方法をお伝えしたいと思います。
通常のチェックボックスはこんな感じ
↓↓
これをもう少しおしゃれにカッコよく表示させるカスタマイズ例を2つだけご紹介します。HTMLとCSSをコピペするだけで実装できるので、めっちゃ簡単だと思います。
デフォルトの書き方
↓こんな感じでHTMLに記述してあげると、シンプルなチェックボックスになります。
See the Pen チェックボックスデフォルト by JUNICHI (@junichi-manga) on CodePen.
はじめに）カスタマイズをするための方法
以下のようにコードを埋め込んでおきます。
- 「HTML」をWordPressならテキストモードやHTMLモードに記述
- 「CSS」をスタイルシートに記述します（WordPressであれば、外観⇒カスタマイズ⇒追加CSSに記述が簡単でおすすめ）
- 「Result」がこんな感じにカスタマイズできますよ、っていう見本だと思ってください。
See the Pen Vwepgmm by JUNICHI (@junichi-manga) on CodePen.
では、早速カスタマイズの事例をいくつかご紹介します。
１．チェックするとボックスが消え、チェックマークだけに切り替わるスタイル
See the Pen Vwepgmm by JUNICHI (@junichi-manga) on CodePen.
それほど難しいコードもなく、記述方法も比較的簡単でおすすめ！
２）スイッチの色が変わるタイプ
See the Pen rNxyPdN by JUNICHI (@junichi-manga) on CodePen.
よくスマホとかで機能のON/OFFを切り替えるのに使ったりしますね！こういう形もかわいいです。
番外編）チェックを必須にするための書き方
例えば、この規約に同意しないと次のページに進めないよ、フォームを送れないよっていうように、チェックを必須にするためには、以下のようにHTMLを記述しましょう。
↓ こうすると、チェックボックスにチェックすることを「必須」にすることができます。メルマガの登録に同意してもらわないといけない場合などに使えますね。
See the Pen チェックボックス同意する by JUNICHI (@junichi-manga) on CodePen.
まとめ
HTMLとCSSをコピペで、簡単にチェックボックスをおしゃれに心地よくつかえるようなカスタマイズ方法を自分のために、備忘録として記事にしました。
どこかの誰かのお役に立てたらいいなと！
デジタルマーケティングで重要な
「データ分析」を今すぐ始めよう！
＼ Kindleで売れ筋トップ獲得本 ／
GA4超入門ガイドブック
プレゼント！
