高橋 洋樹 
チェックボックスを装飾するのは地味に面倒
チェックボックスを画面に配置するとき、
ブラウザのデフォルトだと小さいし、ちょっと不格好なので、
よく私は以下のようにcssでなんとかしていました。
※どこかの技術ブログで見た手法だった気がします。
|
1 2 3 4 5 |
<label class="personal-check-label"> <input type="checkbox" id="personal" name="check" class="personal-check-box" /> 個人情報の取り扱いに同意する </label> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.personal-check-box:checked::after { position: absolute; content: ""; top: 2px; left: 10px; width: 16px; height: 28px; border-right: 8px solid #3ea5d9; border-bottom: 8px solid #3ea5d9; -webkit-transform: rotate(45deg); transform: rotate(45deg); } |
長方形を斜めにして、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
https://daneden.github.io/animate.css/
HTML要素に簡単にアニメーションを付与できるCSSフレームワークです。
クラスを付けるだけでOK！！というお手軽ぶり。js要らないのがすばらしい…。
（js使うともっと素敵になります）
せっかくなのでさっき私が描いた弊社の非公式キャラクターをアニメーションさせてみます。
|
1 2 3 4 |
<img src="/wp-content/uploads/2017/12/glodia_kun.png" class="animated bounce"> <img src="/wp-content/uploads/2017/12/glodia_kun.png" class="animated bounceInRight"> <img src="/wp-content/uploads/2017/12/glodia_kun.png" class="animated jello"> |
cssはたったこれだけ！
あとはjsでクラスを付け外しすればOK！
jsでコールバックもつけられるので、アニメーションの終了をキックにアクションを呼ぶことも可能。
非常に便利で色々使えます。
そしてとてもありがたいMIT License.
milligram
チェックボックス、ではないですが超軽量のCSSフレームワーク。
minifize後のサイズが8.5KBと非常に軽い！！
※bootstrapは147KBなので、10分の1以下…。すごいです。
Bootstrapって便利で高機能ですけど、全機能使いこなせてるかというとうーん…。
そしてありがたいMIT License.
おしまい
cssやjsのライブラリ、フレームワークはワクワクするものが多いですね。
来年はもっとたくさん触っていきたいです。