マネーフォワードでフロントエンドの開発をしています頼本です。
前回の「Haml、Sassを使って効率よくコーディングする方法（基礎編）」に引き続き、 今回は、初級編として、マネーフォワードがどのようにHaml、Sassを使っているのか、実戦で使える内容を例にご紹介いたします。
SassやCSSでチェックボックスやラジオボタンをカスタマイズする方法
デフォルトのチェックボックス・ラジオボタンは小さい・・・デザイン的にイケてないので見た目を変更したい・・・そんな要望は多くあると思います。 そこで、今回はinput+labelとSassやCSSで簡単にチェックボックス・ラジオボタンをカスタマイズする方法をご紹介します。
チェックボックス・ラジオボタンのデザインをカスタマイズした時の見た目
チェックボックスのカスタマイズ
ラジオボタンのカスタマイズ
Haml/HTMLの書き方
まずはHamlの書き方から
[su_tabs] [su_tab title="Haml"]
// チェックボックス %input#checkbox-id.custom-checkbox{ type: 'checkbox' } %label{ for: 'checkbox-id' } チェックボックスのテキスト // ラジオボタン %input#radio-id-yes.custom-radio{ name: 'custom-radio', type: 'radio', checked: 'checked' } %label{ for: 'radio-id-yes' } はい %input#radio-id-no.custom-radio{ name: 'custom-radio', type: 'radio' } %label{ for: 'radio-id-no' } いいえ[/su_tab]
[su_tab title="HTML"]
// チェックボックス <input id="checkbox-id" class="custom-checkbox" type="checkbox"> <label for="checkbox-id">チェックボックスのテキスト</label> // ラジオボタン <input id="radio-id-yes" class="custom-radio" name="custom-radio" type="radio" checked="checked"> <label for="radio-id-yes">はい</label> <input id="radio-id-no" class="custom-radio" name="custom-radio" type="radio"> <label for="radio-id-no">いいえ</label>[/su_tab] [/su_tabs]
ここでのポイントは、必ずidとforを一致させる事、input・labelの順番で記述する事です。
idとforの一致は言わずもがなですが、labelクリック時にforに対応するidを持つinput要素が連動するので、input要素を非表示にしていても、クリックが反映されます。 input・labelを順番に記述する理由は、隣接セレクタを使い、inputの次にあるlabelに見た目を設定するからです。
Sass（SCSS）/CSSの書き方
次にSass（SCSS）の書き方です。 それぞれのコードが何を意味しているかはSass（SCSS）内にコメントで記載します。
[su_tabs] [su_tab title="Sass（SCSS）"]
@mixin custom-input($size, $type) {
// 見た目は画像を表示するので、input要素は非表示にする
display: none;
// 隣接セレクタを使い、inputの次にあるlabelに見た目を設定する
+ label {
position: relative;
display: inline-block;
// 【任意】カスタマイズした要素と文字間隔を空ける。
padding-left: $size + 5px;
min-height: $size;
line-height: $size;
cursor: pointer;
&::before {
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: $size;
height: $size;
// contentに表示したい画像を指定
content: url("#{$type}off.png");
}
}
// :checkedの擬似クラスでinput要素のチェック状態を取得。labelは接続セレクタを使い、チェック状態用の画像を指定する
&:checked + label::before {
content: url("#{$type}on.png");
}
// 【任意】input要素をdisabledにする事がある場合は、disabled用のスタイルを指定
&:disabled + label {
opacity: .3;
cursor: not-allowed;
}
}
// チェックボックスのカスタマイズ
// 第1引数に画像サイズ、第2引数に画像名を指定
.custom-checkbox {
@include custom-input(20px, checkbox);
}
// ラジオボタンのカスタマイズ
.custom-radio {
@include custom-input(18px, radio);
}
[/su_tab]
[su_tab title="CSS"]
// チェックボックスのカスタマイズ .custom-checkbox { display: none; } .custom-checkbox + label { position: relative; display: inline-block; margin-right: 5px; padding-left: 25px; min-height: 20px; line-height: 20px; cursor: pointer; } .custom-checkbox + label::before { position: absolute; left: 0; top: 0; display: inline-block; width: 20px; height: 20px; content: url("checkbox_off.png"); } .custom-checkbox:checked + label::before { content: url("checkbox_on.png"); } .custom-checkbox:disabled + label { opacity: .3; cursor: not-allowed; } // ラジオボタンのカスタマイズ .custom-radio { display: none; } .custom-radio + label { position: relative; display: inline-block; margin-right: 5px; padding-left: 23px; min-height: 18px; line-height: 18px; cursor: pointer; } .custom-radio + label::before { position: absolute; display: inline-block; left: 0; top: 0; width: 18px; height: 18px; content: url("radio_off.png"); } .custom-radio:checked + label::before { content: url("radio_on.png"); } .custom-radio:disabled + label { opacity: .3; cursor: not-allowed; }[/su_tab] [/su_tabs]
たったこれだけで、文頭に記載したカスタマイズが行えます！ なお、IE8以前の古いブラウザには対応していないので、その点ご注意ください。
ちなみに
今回ご紹介した実装方法・デザインは、マネーフォワードで今春リリースする新サービスで実際に使われる予定の物です。 マネーフォワードはこれからも既存サービスをより良い物にしていき、更に新サービスもリリースして参ります。
最後に
マネーフォワードでは、フロントエンドの開発や、サービスの企画・画面設計に携わるフロントエンドエンジニアを募集しています。 みなさまのご応募お待ちしております！
