前の記事 ≪:新卒さん向け、速攻でプログラミングをマスターできるvimプラグイン...
次の記事 ≫:背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイ...

jQueryとCSSで実現する押しやすくオシャレなチェックボックス実装チュートリアル

2011年04月25日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
Better Check Boxes with jQuery and CSS | Tutorialzine

jQueryとCSSで実現する押しやすくオシャレなチェックボックス実装チュートリアル。
独自のチェックボックスを実装するチュートリアルとサンプルがダウンロード出来ます。

普通のチェックボックスは小さくて連続して押したりする場合は結構ストレスがたまったりしますね。
というわけで次のようなチェックボックスを作る例です。



大きくて押しやすく、画像ベースにデザインされており、なかなかカッコいいというのも特徴。
スクリプト部分にはjQueryプラグインが使われていますが、50行程のスクリプトなので改造も容易です。

標準のチェックボックスのストレスを取り払い、デザイン性も持ち合わせたチェックボックス導入の際に参考にできます。

関連エントリ
関連の記事検索:jQuery, CSS
スポンサード リンク

By.KJ : 2011年04月25日 10:06 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)