チェックボックス&ラジオボタンにおすすめのコードスニペット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

40,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 累計40,000人以上のフリーランス・副業ワーカーが登録
  • 東証プライム上場企業からスタートアップまで多数参加
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 公開中の募集のうち66%がリモートOKのお仕事
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

利用料は一切かかりません。一度詳細をのぞいてみませんか?

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。また、本メディア内に掲載されているリンクには、アフィリエイトURLが含まれる可能性があります。

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
エンジニア副業案件
Workship