様々なおしゃれチェックボックスが実装できるスタイルシート「CSS Checkbox Library」

2017/09/09

こんにちは。
今回は様々なおしゃれチェックボックスが実装できるスタイルシート「CSS Checkbox Library」です。

CSSを読み込んで、デモのHTMLをコピペするだけで、シンプルなチェックボックスが実装できるライブラリを紹介します。

様々なおしゃれチェックボックスが実装できるスタイルシート「CSS Checkbox Library」!

CSS Checkbox Library

css-checkbox-library

 

「CSS Checkbox Library」をダウンロードしてみよう!

https://github.com/hunzaboy/CSS-Checkbox-Libraryにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。

 

「CSS Checkbox Library」を設置してみよう!

checkboxes.min.cssをhead内に読み込みます。

 

html部分を記述します。
デモにアクセスして実装したいチェックボックスの右上の「HTML」のボタンをクリックすると必要なhtmlをコピーできますよ。

 

インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン
インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン

 

いかがでしたか。簡単にかっこいいチェックボックスが実装できるのでいいですね。
以上で様々なおしゃれチェックボックスが実装できるスタイルシート「CSS Checkbox Library」でした。

この記事を読んだ人はこんな記事も読んでいますよ