今回の学習では Webサイトには必ず存在するであろう ボタン をデザインしながら、CSSの基本的なスタイルと 擬似クラス を理解しましょう。

この学習を行うことで CSS を使った基本的なコンポーネント(部品)のデザインの仕方は理解できるのではないかと思います。

また、今回は記事の最後におまけとして、Ripple(波紋)アニメーションのコードを解説しています。

今回はこのデザインのボタンの作成を目指したいと思います。

このデザインは Google が提唱している Material Design を参考にしています。

ボタンのデフォルトスタイルをリセット

Reset(リセット)

単純なボタンを HTML で表示しましょう。


<div>
    <button>contained</button>
</div>
<div>
    <button>ボタン</button>
</div>
                

めちゃくちゃ単純ですね。

各ブラウザ の デフォルトスタイル が ボタン に適用されているため、表示するとボタンっぽく見えていると思います。

ただ、この デフォルトスタイル は 新しくデザイン を行う場合に邪魔になる事があるため 無効にするようにリセットCSS を適用します。


/* Reset CSS */
button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    /* 要素に標準スタイルを適用させない */
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}
                

これで デフォルトのスタイル が リセットされて 画面には以下のように 文字列 だけが表示されていると思います。

結果

  • ブラウザごとに設定されているデフォルトのスタイルは異なります。
  • buttonだけでなく他の要素にもデフォルトスタイルは当たっています。

ボタンの全体的なスタイル

文字のスタイル

ボタンのフォントスタイルを指定します。どのフォントを使用するかは font-family属性 を使用し、フォントのサイズは font-size属性 を使用します。また、フォントの太さは font-weight属性、英字を大文字にする場合は text-transform属性 を使用します。文字色は お決まりの color属性 ですね。

ボタンのサイズ

ボタンの大きさを指定します。高さは height属性 を使用して 36px とします。横幅は、ボタン内にテキストが何文字設定されても良いように、padding属性 で設定します。また、横幅の下限値を min-width属性 で設定します。

ボタンの見た目

ボタンの 背景色枠線の角 のスタイルを指定します。

ボタンの背景色は background-color属性、 枠線の角は border-radius属性 を使用します。また、ボタンに影をつける場合は box-shadow属性 を使用します。

コーディング

今回は、demo-buttonと contained-button クラスに スタイルを適用します。


.demo-button {
    font-family: sans-serif;
    font-size: .875rem;
    font-weight: bold;
    text-transform: uppercase;
    height: 36px;
    min-width: 64px;
    padding: 0 16px;
    margin: 4px;
    border-radius: 4px;
}

.demo-button.contained-button {
    color: #fff;
    background-color: #6200ee;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
                0 1px 5px 0 rgba(0, 0, 0, 0.12),
                0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
                

<div>
    <button class="demo-button contained-button">contained</button>
</div>
<div>
    <button class="demo-button contained-button">ボタン</button>
</div>
                

結果

擬似クラスを使用する

:hover

マウスでボタンの上にカーソルを合わせたときに「ここはボタンですよ?押せますよ?」とアピールする方法の一つとして、:hover という擬似クラス を使用できます。

使い方は単純で、この :hover を使用して カーソルを合わせたときのスタイルを定義するだけです。

:focus

:focus はボタンにフォーカスが当たっている場合に適用するスタイルを指定できる 擬似クラス です。

フォーカス というのは、マウスでクリックした後 や タブキーで選択した場合に要素を選択している(ような)状態のことをいいます。

コーディング

今回は、マウスでカーソルを当てた場合 と フォーカスされた場合に 背景色を少し変化 させて ボタンの影を強調 させるように指定します。


.demo-button.contained-button:hover,
.demo-button.contained-button:focus {
    background-color: #651fff;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
                0 1px 10px 0 rgba(0, 0, 0, 0.12),
                0 2px 4px -1px rgba(0, 0, 0, 0.4);
}
                

結果

Material Design(マテリアルデザイン)

今回参考にしたボタンのデザインは Google が提唱している Material Design です。

他にも様々なコンポーネントのデザインが定義されているので、参考にしてみてください。

また、各コンポーネントの 正しい使い方誤った使い方 を 比較して分かりやすく説明してくれています。

Buttons – Material Design

おまけ

Rippleアニメーション

マテリアルデザインのボタンでは、クリックした時に波紋(Ripple)が広がるようなアニメーションを JavaScript を使って表現しています。

この波紋アニメーションに近しいものはCSSでも表現することが可能です。

少しトリッキーで理解しにくいため今回の学習内容には含まれていませんが、こんな使い方もできるんだ程度に知っておいてください。

コーディング


.ripple {
    /* 放射グラデーションイメージの位置を中央に設定 */
    background-position: center;
    /* background属性にアニメーションを0.4秒で設定 */
    transition: background 0.4s;
}

.ripple:hover {
    /* 放射グラデーションイメージのサイズを拡大し要素を覆うように設定 */
    background-size: 15000%;
}

.ripple:active {
    /* 放射グラデーションイメージのサイズを元のサイズに戻すように設定 */
    background-size: 100%;
    /* ここではアニメーションを無効にするように設定 */
    transition: background 0s;
}

/* Contained Button */
.demo-button.contained-button.ripple:hover {
    /* 1%の大きさで作成された放射グラデーションイメージを背景画像に設定 */
    background-image: radial-gradient(circle, transparent 1%, #7e57c2 1%);
    /* ホバーしたときの背景色を設定 */
    background-color: #651fff;
}

.demo-button.contained-button.ripple:focus {
    /* フォーカスされている時の背景色を設定 */
    background-color: #7e57c2;
}

.demo-button.contained-button.ripple:active {
    /* クリックまたはタップされている間の背景色を設定 */
    background-color: #b39ddb;
}

/* Text and Outline Buttons */
/*
.demo-button.text-button.ripple:hover,
.demo-button.outline-button.ripple:hover {
    background-image: radial-gradient(circle, transparent 1%, rgba(98, 0, 238, 0.18) 1%);
    background-color: rgba(98, 0, 238, 0.08);
}

.demo-button.text-button.ripple:focus,
.demo-button.outline-button.ripple:focus {
    background-color: rgba(98, 0, 238, 0.12);
}

.demo-button.text-button.ripple:active,
.demo-button.outline-button.ripple:active {
    background-color: rgba(98, 0, 238, 0.12);
}
*/
                

<div>
    <button class="demo-button contained-button ripple">contained</button>
</div>
<div>
    <button class="demo-button contained-button ripple">ボタン</button>
</div>
                

説明

まず、button要素のクラスにrippleを追加します。
.rippleのコードは共通で適用されるもので、それぞれのボタンごとのコードはその下に定義しています。

擬似クラス:active はマウスでクリックしている場合かスマートフォンでタップしている場合に有効になります。 この:active が解除された時にアニメーションを発生させるために、有効な時は background-size: 100%;として小さくしています。同時に小さくするアニメーションは不要なので、transition: background 0s; を設定しています。

また、:hover – CSS で記述されている通り、CSSでは :hover より後に :active を定義する必要があります。

課題

残りの「TEXT」と「OUTLINE」のボタンも作成してください。


OUTLINEボタンの枠線は CSS の border属性 で指定することができます。TEXT、OUTLINE の擬似クラスの background-color属性 に指定する 背景色 は rgba もしくは hsla を使用して 透過率0.08 を指定します。