MaterialデザインのRadioボタン

2018年2月5日

はじめに

こんにちは、よっしーです。

Webアプリを作るときに、よくRadioボタンを使用すことがありますが、HTMLの標準のRadioボタンはかなり古臭い感じがします。

どうせならかっこいいRadioボタン使いたいですよね。
最近流行りの、MaterialデザインのRadioボタンはとてもかっこいいです。

Material Design for Bootstrapを使うと、いろんな部品がMaterialデザインに早変わりするので便利なんですが、RadioとCheckボタンは有料なんですよね。

できれば、気軽にCSSでできないものかと作って見ました。といっても、生のCSSはきついので、LESSで作成します。

まずはLESSでMaterialデザインのRadioボタン

LESSで作ったMaterialデザインのボタンです。

HTMLとLESSのサンプルコードを記載します。

<div class="md-radio">
  <input id="md-radio1"  name="hogehoge1"  type="radio" value="Test1" checked>
  <label for="md-radio1" >
    Test1
  </label>
</div>
// Material Radio Button
@md-radio-checked-color: rgb(51, 122, 183);
@md-radio-checked-disabled-color: rgb(122, 122, 122);
@md-radio-border-color: rgba(0, 0, 0, 0.54);
@md-radio-size: 20px;
@md-radio-checked-size: 10px;

@md-ripple-size: 15px;
@keyframes ripple {
  0% {
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0);
  }
  50% {
    box-shadow: 0px 0px 0px @md-ripple-size rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 0px 0px 0px @md-ripple-size rgba(0, 0, 0, 0);
  }
}

.md-radio {
  margin: 5px 0;

  &.md-radio-inline {
    display: inline-block;
  }

  input[type="radio"] {
    display: none;
    &:checked + label:before {
      border-color: @md-radio-checked-color;
      animation: ripple 0.2s linear forwards;
    }
    &:checked:disabled + label:before {
      border-color: @md-radio-checked-disabled-color;
      animation: ripple 0.2s linear forwards;
    }
    &:checked:disabled + label:after {
      background: @md-radio-checked-disabled-color;
    }
    &:disabled + label {
      cursor: not-allowed;
    }
    &:checked + label:after {
      transform: scale(1);
    }
  }

  label {
    display: inline-block;
    position: relative;
    padding: 0 0 0 (@md-radio-size + 10px);
    margin-bottom: 0;
    cursor: pointer;
    vertical-align: bottom;
    &:before,
    &:after {
      position: absolute;
      content: "";
      border-radius: 50%;
      transition: all 0.3s ease;
      transition-property: transform, border-color;
    }
    &:before {
      left: 0;
      top: 0;
      width: @md-radio-size;
      height: @md-radio-size;
      border: 2px solid @md-radio-border-color;
      box-sizing: border-box;
    }
    &:after {
      top: @md-radio-size / 2 - @md-radio-checked-size / 2;
      left: @md-radio-size / 2 - @md-radio-checked-size / 2;
      width: @md-radio-checked-size;
      height: @md-radio-checked-size;
      transform: scale(0);
      background: @md-radio-checked-color;
    }
  }
}

実行すると、こんな感じになります。

See the Pen Material Radio by Yoshiaki Haramoto (@haramoto) on CodePen.0

使い方(解説)

HTMLのタグ

サンプルで示したように、divタグでinputタグとlabelタグを囲みます。divタグのclassにはmd-radioを指定します。

inputタグにidを振ります。labelタグのforにinputタグのidを割り当てます。

LESS

まずは使い方、LESSのサンプルコードの上の方に記載されていたコードを書き換えます。

@md-radio-checked-color: rgb(51, 122, 183);
@md-radio-checked-disabled-color: rgb(122, 122, 122);
@md-radio-border-color: rgba(0, 0, 0, 0.54);
@md-radio-size: 20px;
@md-radio-checked-size: 10px;
@md-ripple-size: 15px;

この部分ですね。

変数 値の説明
@md-radio-checked-color Radioボタンにチェックが入ったときの色 サンプルは青
@md-radio-checked-disabled-color Radioボタンがdisabledのときの色
@md-radio-border-color: Radioボタンの外側の○の色 基本的に変えない
@md-radio-size Radioボタンのサイズ
@md-radio-checked-size Radioボタンにチェックが入ったときの中の丸のサイズ
@md-ripple-size クリックしたときの波紋のサイズ

まとめ

MaterialデザインのRadioボタンをcss(less)で作成しました。

かっこいいので、ぜひ使ってみてください。

今度はチェックボックスを作成します。