wp-adminマネーフォワードでフロントエンドの開発をしています頼本です。今回は、初級編として、マネーフォワードがどのようにHaml、Sassを使っているのか、実戦で使える内容を例にご紹介いたします。SassやCSSでチェックボックスやラジオボタンをカスタマイズする方法デフォルトのチェックボックス・ラジオボタンは小さい・・・デザイン的にイケてないので見た目を変更したい・・・そんな要望は多くあると思います。そこで、今回はinput+labelとSassやCSSで簡単にチェックボックス・ラジオボタンをカスタマイズする方法をご紹介します。for="radio-id-no">いいえ</label>ここでのポイントは、必ずidとforを一致させる事、input・labelの順番で記述する事です。idとforの一致は言わずもがなですが、labelクリック時にforに対応するidを持つinput要素が連動するので、input要素を非表示にしていても、クリックが反映されます。input・labelを順番に記述する理由は、隣接セレクタを使い、inputの次にあるlabelに見た目を設定するからです。次にSass(SCSS)の書き方です。それぞれのコードが何を意味しているかはSass(SCSS)内にコメントで記載します。【任意】カスタマイズした要素と文字間隔を空ける。:checkedの擬似クラスでinput要素のチェック状態を取得。not-allowed;}たったこれだけで、文頭に記載したカスタマイズが行えます!なお、IE8以前の古いブラウザには対応していないので、その点ご注意ください。ちなみに今回ご紹介した実装方法・デザインは、マネーフォワードで今春リリースする新サービスで実際に使われる予定の物です。マネーフォワードはこれからも既存サービスをより良い物にしていき、更に新サービスもリリースして参ります。最後にマネーフォワードでは、フロントエンドの開発や、サービスの企画・画面設計に携わるフロントエンドエンジニアを募集しています。