かわいらしいチェックボックスライブラリ「pretty-checkbox」がとても良い。その他おすすめcssフレームワーク。

チェックボックスを装飾するのは地味に面倒

チェックボックスを画面に配置するとき、
ブラウザのデフォルトだと小さいし、ちょっと不格好なので、
よく私は以下のようにcssでなんとかしていました。
※どこかの技術ブログで見た手法だった気がします。

長方形を斜めにして、2辺だけborderを表示する手法ですね。

pretty-checkbox.css が便利

毎回毎回チェックボックスを作るたびに↑のcssを描いてるので
「なんとかならんのかコレは」と思っていましたが良いライブラリに出会いましたのでご紹介します。

https://github.com/lokesh-coder/pretty-checkbox

「pretty-checkbox.css」を使うことで簡単にカラフルでアニメーション付きのいい感じのチェックボックスを配置できます。

せっかくなので弊社のロゴでチェックボックスを作ってみました








チェックボックスなのかなんなのかよくわからなくなってしまいましたが、面白いですね。
imgタグを使うときは、外側のdivに「p-image」クラスを付ける必要があるのでご注意を。



css付けるだけで簡単に装飾できるので、今後どんどん使っていきたいです。

また、SVGにも対応し、スケーラブルなのでサイズ変更にも強いです。

IEは10以上に対応、なので業務システムなどに使う際は注意ですね。

そしてありがたいありがたいMIT License.

ほかにも便利なUIライブラリ

他にもいくつかおすすめを紹介させてください。
一から自分で組むのは大変なので、どんどん利用していきたいですね。

Animate.css

http://daneden.github.io/animate.css/

HTML要素に簡単にアニメーションを付与できるCSSフレームワークです。
クラスを付けるだけでOK!!というお手軽ぶり。js要らないのがすばらしい…。
(js使うともっと素敵になります)

せっかくなのでさっき私が描いた弊社の非公式キャラクターをアニメーションさせてみます。








cssはたったこれだけ!
あとはjsでクラスを付け外しすればOK!

jsでコールバックもつけられるので、アニメーションの終了をキックにアクションを呼ぶことも可能。
非常に便利で色々使えます。

そしてとてもありがたいMIT License.

icheck

http://icheck.fronteed.com/

チェックボックスのjQueryプラグイン。
こちらのほうが有名かもしれません。 見た目はこちらのほうがスタンダード、ですがjQuery拡張なのでスクリプトでイニシャライズが必要。

そしてありがたいMIT License.

milligram

https://milligram.io/

チェックボックス、ではないですが超軽量のCSSフレームワーク。
minifize後のサイズが8.5KBと非常に軽い!! ※bootstrapは147KBなので、10分の1以下…。すごいです。

Bootstrapって便利で高機能ですけど、全機能使いこなせてるかというとうーん…。

そしてありがたいMIT License.

おしまい

cssやjsのライブラリ、フレームワークはワクワクするものが多いですね。
来年はもっとたくさん触っていきたいです。

高橋 洋樹
WEBアプリケーション、スマートフォンアプリケーションエンジニア。 フロントエンドに関心大。 趣味でゲーム作ったり、つくらなかったり。