CSS だけで作る角丸ボタンの基本

CSS だけで角丸ボタンを作る作り方

こんにちは！
我々は弊社の製品ジーンコードを使って日々PCサイトのスマホ最適化に向けて変換を行っています。
実際に仕事の中で使ったマルチデバイス対応におけるちょっとした技術を、このブログに書き留めておきます。
今回はCSSだけで角丸ボタンを作る作り方です。

スマホサイトを見ていると以下のようなボタンをよく見ると思います。

このボタンを見て画像だと思った人はいませんか？立体的なので画像に見えてもおかしくありませんが、このボタンをCSSだけで作ることができます！

HTMLのコード

まず以下のようなHTMLがあったとします。

<a href="hoge">Next</a>

このただのNextという文字を先ほどのようなボタンに変えます！

CSSのコード

aタグに以下のスタイルをあてます。

a {
   display: block;/*解説1*/
   padding: 25px 0;
   color: #fff;
   font-weight: bold;
   width: 100%;/*解説2*/
   background: linear-gradient(#ed0202, #cc0000);/*解説3*/
   border-radius: 5px;/*解説4*/
   text-align: center;
   box-shadow: 0 4px 0 rgba(0,0,0,0.3);/*解説5*/

}

そうすると先程の画像のような立体的な角丸ボタンが完成します！

解説

では解説していきます。

解説1：display: block;

aタグはインライン要素なのでdisplayプロパティでblock要素にします。
するとpaddingプロパティが効くので、heightを指定しなくてもボタンに高さを出すことができます。

解説2：width: 100%;

widthをあえてピクセル指定にしていません。
widthを100%にすることで親要素の領域分100%幅を持ちます。
よって、デバイスの幅が変わってもボタンの横幅は全体の割合と比べて変わらないデザインにすることができます。
レスポンシブ化の際にwidthを固定すると、iPhone 5を縦にした時のボタンと、iPhone 6 Plusを横にしたときのボタンでは、画面に対するボタンの大きさがかなり変わってしまいます。
このケースを防ぎたい場合はwidthを100%にすることをお勧めします。

heightやwidthの数値をしっかり指定しないことが多いですが、
マルチデバイス対応においてcssでガチガチにサイズを固めてしまうのはあまりお勧めしません。
なぜなら様々なデバイスサイズに合わせなければいけないなか、それぞれ数値を指定していたらきりがないからです。
そこをうまくCSSで補えると楽にそして見やすい実装ができ、スマホ最適化につながります。

解説3：background: linear-gradient(#ed0202,#cc0000);

backgroundプロパティで背景色をグラデーションにすることでボタンが立体的に見えています。

( )の中身は以下の内容を意味しています。

linear-gradient(開始色, 終了色);

しかしこの書き方だとAndroid 4系で見ると真っ白なボタンになってしまいます。
背景色とグラデーションの動きがぶつかってしまいうまく反映しません。

その場合は以下の二つを書くとAndroid 4系でもうまく表示されます。

background: linear-gradient(to bottom, #ed0202, #cc0000 72%);
background: -webkit-gradient(linear, left top, left bottom, from(#ed0202), to(#cc0000));

上記の( )の中身の意味は下記の通りです。

linear-gradient(開始位置と角度, 開始色, 途中色, 終了色);
-webkit-gradient(linear, 開始位置, 終了位置, from(開始色), color-stop(位置, 途中色), to(終了色));

参考資料
https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient

解説4：border-radius: 5px;

角丸にするミソはborder-radiusというプロパティです。
borderプロパティだけだと角がとんがった囲いができますが、そこにborder-radiusプロパティも付け加えると角が丸い囲いになります。
水平方向と垂直方向の２つの半径の組み合わせで角の丸みをつけることができます。
数値が大きくなるほど円に近付いていきます。

参考資料
https://developer.mozilla.org/ja/docs/Web/CSS/border-radius

解説5：box-shadow: 0 4px 0 rgba(0,0,0,0.3);

box-shadowプロパティは影を付けることができます。そのためボタンを立体的に見せることができます。
１番目の値で、水平方向の影をつけます。正の値を指定すると右へ、負の値を指定すると左へ影が移動します。
２番目の値で、垂直方向の影をつけます。正の値を指定すると下へ、負の値を指定すると上へ影が移動します。
３番目の値は、ぼかし距離です。 値が大きいほど影の端のぼかしが強くなり、値が0の場合には端がくっきりとした影となります。負の値を指定することはできません。
４番目の値は、広がり距離です。正の値を指定すると影の形状を全方向に拡大、負の値を指定すると縮小します。
最後に色の値を指定すると、影がその色になります。

参考資料
https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow

以上の様なCSSを記述することで、マルチデバイス対応の際に役立つ立体的な角丸ボタンを作ることができます。
是非試してみてください。