チェックボックス&ラジオボタンにおすすめのコードスニペット8選

radio-checkbox-snippets-thumb

チェックボックスやラジオボタンなどのHTMLフォーム要素は、Webデザイナーに軽視されがちな存在でした。しかし、最近になってその価値が見直され、いまではデザイナーのクリエイティビティが発揮されるポイントになっています。

今回は、実用的なものからユニークなものまで、さまざまなチェックボックスとラジオボタンのスニペットを紹介します。

1. “ラジオ”のようなラジオボタン

昔懐かしいラジオのボタンをイメージした、文字通りの「ラジオボタン」を作成できるスニペット。実際のラジオのボタンのように、ボタンを押すとへこむ様子が再現されています。

See the Pen
Literal Radio Buttons
by Jon Kantner (@jkantner)
on CodePen.0

2. タイル型のチェックボックス

チェックボックスをクリック可能なタイル形式にすることで、スタイリッシュで現代的なUIを実現しています。見た目だけでなく、使い勝手も抜群です。

See the Pen
Checkbox group styled as tiles
by Håvard Brynjulfsen (@havardob)
on CodePen.0

3. エフェクトが特徴的なトグルボタン

チェックボックスの一般的な活用例であるトグルボタンに、ユニークなエフェクトがついたスニペット。スイッチをオンにするまでは普通のデザインに見えますが、アニメーションによるカラフルな衝突エフェクトが特徴的です。

See the Pen
Codepen Challenges: Bump – Agressive Toggle
by Yeshua Emanuel Braz (@yexx)
on CodePen.0

4. マインスイーパ型のチェックボックス

フォームを個性的で斬新なデザインにしたいなら、このスニペットが参考になるはずです。チェックボックスがブラウザ版のマインスイーパに変身しています。開発に使われているのは、HTMLとCSSのみと非常にシンプルです。

See the Pen
Pure CSS minesweeper
by Bali Balo (@bali_balo)
on CodePen.0

5. ダークモード対応のラジオボタン&チェックボックス

CSSのみで作られた美しいデザインのラジオボタンとチェックボックスを、セットで提供しているスニペット。ライトモードだけでなくダークモードにも対応しており、汎用性の高いスニペットです。

See the Pen
Checkboxes and radios (dark/light) – pure css – #06
by Ivan Grozdic (@ig_design)
on CodePen.0

6. マイクロアニメーションつきのラジオボタン&チェックボックス

クラシックなデザインを保ちつつ、細かなアニメーションで個性を出したラジオボタンとチェックボックスのスニペット。使いやすさを確保しつつ、ちょっとした遊び心を盛り込めます。

See the Pen
Ripple animation on input type radio and Checkbox
by WILDER TAYPE (@wtaype)
on CodePen.0

7. タスク管理用のチェックボックス

チェックボックスに近未来的なデザインとJavaScriptをプラスすることで、インタラクティブなToDoリストに生まれ変わっています。

リストの各タスクにチェックを入れることで、プロジェクトの進捗を管理できる仕組み。また、チェックボックスをオフにすれば最初からやり直せます。

カスタムUIをゼロから作らなくても、ネイティブのHTML要素を活用するだけで個性的なチェックボックスを作成できます。

See the Pen
Task Progress Meter
by Clint Brown (@clintabrown)
on CodePen.0

8. アイコンがかわいいラジオボタン

CSSのみで作られた、直感的な操作にぴったりのラジオボタン。ユニークな顔のアイコンからは、普通のフォームにはない遊び心を感じられますね。

See the Pen
Pure CSS – SVG Radio Selector Buttons
by Nikki Pantony (@nikkipantony)
on CodePen.0

おわりに

ラジオボタンやチェックボックスは没個性なデザインになることも多いですが、アイデア次第でさまざまなデザインに変身させられます。

奇抜なデザインまでは必要ない場合も、マイクロアニメーションやタイル型のデザインなど、細かな工夫はデザイン差別化の参考になるはずです。

(執筆:Eric Karkovack 翻訳:Asuka Nakajima 編集:齊藤颯人 提供元:speckyboy

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
週1〜3 リモートワーク 土日のみでも案件が見つかる!
Workship