Tooltip Pure CSS codepen
|
デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。特にチェックボックスはデフォルトのデザインが地味で押しにくいことも多いですので、装飾することで改善できます。 Show
本記事ではフォームの中でも「チェックボックス」に焦点を当て、おしゃれなCSSスニペットをまとめました。
通常のチェックボックスだけでなくトグルボタンやスイッチ形式のデザインもあります。
実用性重視。シンプルなチェックボックスでユーザビリティを向上できるCSSデザイン例。クリックしやすいシンプルなデザインのチェックボックス。Xem Hộp kiểm CSS đơn giản dành cho bút với phông chữ tuyệt vời của James Barnett (@jamesbarnett) trên CodePen CSSのソースコード量が非常に少ないですが、シンプルでとても見やすいデザインのチェックボックスです。 フラットな感じですし、チェックボックスクリック時の枠も出ませんので、どんなサイトデザインにも合いそうです。
マウスオーバーやクリック時に簡単な動きを付けたシンプルなチェックボックス。Xem các hộp kiểm Tùy chỉnh bút chỉ bằng CSS của Geoffrey Crofte (@CreativeJuiz) trên CodePen CSSで装飾していないチェックボックスは小さくてクリックしにくいことが多いです（環境によるかと思いますが）。 本スニペットではチェックボックスの大きさを少し大きくするだけでなく、マウスオーバーやクリック時に動きを加えています。シンプルさを保ちつつ使いやすいチェックボックスデザインになっています。 また、読み取り専用時のデザインも合わせて用意してあるのが良いです。
クルっと回転しながらＯＮになるアニメーションのチェックボックス。Xem hộp kiểm kiểu vật liệu Pen Google (chỉ dành cho css) của Sam (@Sambego) trên CodePen チェック時にチェックマークがクルっと45度回転しながらＯＮになるチェックボックスです。ＯＦＦにする際にはチェックボックスの枠が点滅します。非常に楽しいアニメーションのチェックボックスです。 ＯＦＦのときに少しチェック枠が見えにくいのがデメリットでしょうか。
十字マークがクルっと回転するアニメーションのチェックボックス。Xem Hộp kiểm theo kiểu bút của Chris Ota (@chrisota) trên CodePen 十字マークがクルっと回転してON/OFFされるチェックボックスです。 見やすいデザインですが、ON/OFFの状態が少しわかりにくいところがデメリットです。
チェックするとボックスの枠線が消えるデザイン。Xem hộp kiểm Tùy chỉnh bút của Valery (@valerypatorius) trên CodePen クリックしてＯＮになるとチェックボックスの枠線が消えてチェックマークのみになります。非常にスタイリッシュ。
チェックすると波動を出しながら、ボックスの枠線が消える。Xem Pen Google Material Paper-Checkbox của Jason Mayes (@jasonmayes) trên CodePen こちらも、クリックしてＯＮになるとチェックボックスの枠線が消えてチェックマークのみになります。クリック時に波動が出ますし、こちらも非常にスタイリッシュ。
シンプルなチェックボックス・ラジオボタン・ドロップダウン一式のセット。Xem Bút hoàn toàn CSS. Hộp kiểm tùy chỉnh, nút radio và hộp chọn của Kenan Yusuf (@KenanYusuf) trên CodePen クリック時に青色に変化するだけのシンプルなチェックボックスですが、チェックボックス・ラジオボタン・ドロップダウン一式がセットになっています。コントロールのイメージをそろえたいときには最適だと思います。
大きくて押しやすいチェックボックス・ラジオボタンのセット。Xem các hộp kiểm và nút radio Bootstrap thân thiện với bút cảm ứng của Brian Sassaman (@BrianSassaman) trên CodePen 大きくて淡い色合いで使いやすそうなチェックボックス・ラジオボタンのセットです。 CSSソースコードも少なく見やすいですので、色を替えたりカスタマイズしやすいです。
カラー・マークのバリエーションが豊かなデザインサンプル。Xem Hộp kiểm lắc bút của Tamino Martinius (@Zaku) trên CodePen 様々なカラー・大きさ・マーク形式のチェックボックスデザインがまとまっているサンプルです。クリック時に少しプルっと動くのが素敵なデザインだと思います。
トグルボタン・スイッチ形式のチェックボックス。押しやすくスマホに最適なＵＩ。シンプルなトグルボタン・スイッチ形式のチェックボックス。Xem trình chuyển đổi hộp kiểm đơn giản Pen của Artyom (@artyom-ivanov) trên CodePen シンプルなトグルボタン・スイッチ形式のチェックボックスです。クリック時の動きもスムーズですし、CSSソースコード量も少なく良いです。
ON/OFFが分かりやすいスイッチタイプのデザイン。Xem plugin Pen Accessible & Skeuomorphic Checkbox/Radio jQuery của Simon Goellner (@simeydotme) trên CodePen ON/OFFがとても分かりやすいスイッチタイプのデザインです。状態がとても把握しやすいですので、オススメできます。
クリックで点滅するトグルタイプのデザイン。Xem thủ thuật hộp kiểm bút. Chuyển đổi đơn giản của Will Boyd (@lonekorean) trên CodePen クリックするとチェックと色が変わります。簡単なCSSソースコードで実現していますけど、デザイン性が高いですね。
Pure CSSのトグルボタン・スイッチ形式のチェックボックス。Xem Hộp kiểm Pen Flat của Juanjo Fernandez (@juanjofr) trên CodePen Pure CSSで作られているトグルボタン・スイッチ形式のチェックボックスです。簡単なソースコードでトグルをどのように作ればいいのかがわかりやすいです。
クルっと回りながらスライドするスイッチ形式チェックボックス。Xem hộp kiểm Pen Full CSS của Timothee Guignard (@TimGuignard) trên CodePen 非常にデザイン性が高いスイッチ形式チェックボックスです。見てて楽しいですし、ON/OFFのチェック状態もわかりやすいという優れもの。
ON/OFFのチェック状態がわかりやすいスイッチボタン。Xem Cá nhân hóa hộp kiểm Pen với các biểu tượng SVG của Gaëtan Bonnot (@GaetanBt) trên CodePen SVGアイコンを使ったON/OFFのチェック状態がわかりやすいスイッチボタン。
多様なトグルボタン・スイッチチェックボックスまとめ。Xem hộp kiểm kiểu chuyển đổi có thể truy cập bằng bút của Chris Hart (@personable) trên CodePen 様々なトグルボタン・スイッチのデザインサンプル。
これは本当にチェックボックス！？訪問者の心に刺さる独創的なデザイン。物凄く大きい上に、チェック時に大げさなアニメーションをするチェックボックス。Xem Hộp kiểm CSS3 hoạt hình bằng bút của Jimmy Gillam (@theigmo87) trên CodePen 非常に大きくインパクトのあるチェックボックスです。クリック時もチェックマークがダイナミックにアニメーションしつつ、緑色のチェックボックスに変化します。 規約確認など目立たせたい部分のチェックボックスに良いかと思います。
クリック時にラベルを覆い囲むチェックボックス・ラジオボタン。Xem Hộp kiểm/Radio ưa thích CSS thuần túy của Rau (@raubaca) trên CodePen 通常のチェックボックス・ラジオボタンのように見えますが、クリックするとチェックが拡大して項目ラベルを覆い囲みます。非常に面白い動きをするコントロールデザインです。 ただし、チェックONであることが少しわかりにくいかもしれませんね。
自己主張が強いチェックボックス。Xem Hộp kiểm hoạt hình Pen Pure CSS của Paweł Durczok (@north-of-rapture) trên CodePen チェック時に大きくなり、チェックされていることがわかりやすいですね。また、マウスオーバーでもチェックマークが出てくるので、クリックしたくなります。自己主張が強いチェックボックスです。
自己主張が強いチェックボックス②。Xem hộp kiểm Bút có mo. js 💵 của Mike Quinn (@mprquinn) trên CodePen クリック時にピカっと光ってＯＮになります。操作感の楽しいチェックボックスです。
プルっとしながら動くスライムボタン。Xem Hộp kiểm Chất lỏng Bút của Bjorn (@BjornRombaut) trên CodePen プルっとしながら動くスライムのようなチェックボックスです。
チェックボックスが取り消し線に変化する。Xem Pen ☑️ Hoạt hình hộp kiểm danh sách việc cần làm chỉ dành cho CSS của Shaw (@shshaw) trên CodePen クリック時にチェックボックスが取り消し線に変化します。ただし、ONになってるのに消されちゃうのはちょっと違和感…。むしろOFFのときに取り消しにした方が良いような気もしますが…。
3Dボールが動くようなトグルボタン。Xem chuyển đổi Pen 3D – nhấp vào nó. bởi Ana Tudor (@thebabydino) trên CodePen 溝の上をボールが転がっているようなデザインです。非常に面白いです。
バラバラに分解⇒再構築される派手なアニメーション。Xem hộp kiểm Pen Reconstructed #CodePenChallenge cpc-checkboxes của Stephen Lee (@abcretrograde) trên CodePen クリックするとバラバラに分解されて再構築されながらON/OFFされます。ド派手です！。
完全にレバースイッチ。Xem Hộp kiểm đòn bẩy Skeuomorphic của Jon Kantner (@jkantner) trên CodePen もう完全にレバーですね。
ライトセイバーのようなチェックボックス。Xem các hộp kiểm của Pen Pure CSS3 Star Wars Lightaber của Nicholas Cerminara (@ncerminara) trên CodePen |
