【JavaScript】チェックボックスとラジオボタンのデザインをカスタマイズする『iCheck』

checkboxes-and-radio-buttons-customization-icheck

フォームなどで使われるチェックボックスとラジオボタンのデザイン。「jQuery」と「Zepto」を使いチェックボックスとラジオボタンのデザインをカスタマイズするライブラリ『iCheck』をご紹介します。

実装イメージ

『iCheck』はいくつかのスキンデータも用意されてあります。ライブラリはデモページからダウンロードできます。

checkboxes-and-radio-buttons-customization-icheck-skin

構成ファイル

『iCheck』を構成ファイルは以下のようになります。CSSフォルダには6種類のスキンデータがフォルダ別に用意されています。

iCheck
├── css/
│   ├── flat/
│   ├── futurico/
│   ├── line/
│   ├── minimal/
│   ├── polaris/
│   ├── square/
│   └── all.css
└── js/
    ├── zepto.js
    ├── icheck.js
    └── jquery.js

利用方法

最初にライブラリの読み込みです。スキンデータのスタイルシート、「jquery.js(またはzepto.js)」、「icheck.js」の3つを設置します。

続けてオプションを設定します。下記の例では、Skinスタイルが「minimal」カラーセット「red」の設定になりま。

/* ライブラリの読み込み・オプション設定 */
<link href="./css/minimal/red.css" rel="stylesheet">
<script src="./js/jquery.js"></script>
<script src="./js/icheck.js"></script>

<script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_minimal-red',
    radioClass: 'iradio_minimal-red',
    increaseArea: '20%' // optional
  });
});
</script>

チェックボックスとラジオボタンは下記の記述で実装ができます。

/* HTML記述例 */
<input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>

関連記事

【HTML】Adobe Dreamweaverを使いSass・SCSSをコンパイルする方法

前回、ブログにて「Sass・SCSSを使うことでWEBサイトの制作を効率化すること」をとりあげました。そこでSass・SCSSは、どちらもCSSを効率よく記述することができること。そして、Sass・SCSSを変換(コンパイル)してCSSとして書き出してWEBサイトに組み込むことを...続きを読む

2019.05.16HTMLコーディング

はぴねす歯科様WEBサイトのデザイン提案

大阪にある歯科クリニックのはぴねす歯科様のWEBサイトのリニューアルにおけるデザイン提案をいたしました。かわいらしいキャラクターのロゴにデザインを合わせて、親しみやすいかわいらしいデザインになるように心がけました。虫歯治療をはじめ、歯周病、予防歯科、矯正などイラストやイメージ...続きを読む

2019.04.17WEBデザイン歯科医院

【デザイン】エレベーターに仕掛けられたクリエイティブな広告

エレベーターでは多くの人がじっとしていることが多く広告を見てもらうには良い空間かもしれません。そのようなエレベーターに仕掛けられたアイディアがあるクリエイティブな広告をまとめてみました。 Be born again. / Dr.Kim plastic surgery ...続きを読む

2015.03.12インスピレーション

【CSS】スタイルシートだけで縦方向と横方向でセンタリングする方法

WEBデザインで画像やレイアウトした要素を中央に揃えるレイアウトを作ることがよくあります。実際にHTMLにコーディングをするときに、横位置をセンターにする場合や、縦位置をセンターにする場合などCSSだけで実現する方法をまとめてみました。 { margin: 0 auto...続きを読む

2015.02.07HTMLコーディング

【フォト】冒険と遊びの喫茶店 らみぃ

藤枝駅の近くにある冒険と遊びの喫茶店「らみぃ」に行ってきました。ボードゲームが遊べるプレイスペースで、並んでいるボードゲームをみるとワクワクします。 アナログゲームをじっくりと遊ぶことができるお店、はじめていきましたが、楽しい時間を過ごせてとても充実した時間を過ごせました!...続きを読む

2018.02.22フォトギャラリー藤枝