角丸ボタンを作る作り方こんにちは!我々は弊社の製品ジーンコードを使って日々PCサイトのスマホ最適化に向けて変換を行っています。実際に仕事の中で使ったマルチデバイス対応におけるちょっとした技術を、このブログに書き留めておきます。今回はCSSだけで角丸ボタンを作る作り方です。スマホサイトを見ていると以下のようなボタンをよく見ると思います。このボタンを見て画像だと思った人はいませんか?立体的なので画像に見えてもおかしくありませんが、このボタンをCSSだけで作ることができます!HTMLのコードまず以下のようなHTMLがあったとします。href="hoge">Next</a>このただのNextという文字を先ほどのようなボタンに変えます!CSSのコードaタグに以下のスタイルをあてます。rgba(0,0,0,0.3);/*解説5*/}そうすると先程の画像のような立体的な角丸ボタンが完成します!解説では解説していきます。block;aタグはインライン要素なのでdisplayプロパティでblock要素にします。するとpaddingプロパティが効くので、heightを指定しなくてもボタンに高さを出すことができます。100%;widthをあえてピクセル指定にしていません。widthを100%にすることで親要素の領域分100%幅を持ちます。よって、デバイスの幅が変わってもボタンの横幅は全体の割合と比べて変わらないデザインにすることができます。Plusを横にしたときのボタンでは、画面に対するボタンの大きさがかなり変わってしまいます。このケースを防ぎたい場合はwidthを100%にすることをお勧めします。heightやwidthの数値をしっかり指定しないことが多いですが、マルチデバイス対応においてcssでガチガチにサイズを固めてしまうのはあまりお勧めしません。様々なデバイスサイズに合わせなければいけないなか、それぞれ数値を指定していたらきりがないからです。そこをうまくCSSで補えると楽にそして見やすい実装ができ、スマホ最適化につながります。linear-gradient(#ed0202,#cc0000);backgroundプロパティで背景色をグラデーションにすることでボタンが立体的に見えています。)の中身は以下の内容を意味しています。4系で見ると真っ白なボタンになってしまいます。背景色とグラデーションの動きがぶつかってしまいうまく反映しません。4系でもうまく表示されます。)の中身の意味は下記の通りです。5px;角丸にするミソはborder-radiusというプロパティです。borderプロパティだけだと角がとんがった囲いができますが、そこにborder-radiusプロパティも付け加えると角が丸い囲いになります。水平方向と垂直方向の2つの半径の組み合わせで角の丸みをつけることができます。数値が大きくなるほど円に近付いていきます。rgba(0,0,0,0.3);box-shadowプロパティは影を付けることができます。そのためボタンを立体的に見せることができます。1番目の値で、水平方向の影をつけます。正の値を指定すると右へ、負の値を指定すると左へ影が移動します。2番目の値で、垂直方向の影をつけます。正の値を指定すると下へ、負の値を指定すると上へ影が移動します。3番目の値は、ぼかし距離です。値が大きいほど影の端のぼかしが強くなり、値が0の場合には端がくっきりとした影となります。負の値を指定することはできません。4番目の値は、広がり距離です。正の値を指定すると影の形状を全方向に拡大、負の値を指定すると縮小します。最後に色の値を指定すると、影がその色になります。参考資料https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow以上の様なCSSを記述することで、マルチデバイス対応の際に役立つ立体的な角丸ボタンを作ることができます。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)検索:最近の投稿レスポンシブデザインのレイアウトパターンと実装方法レスポンシブ対応するためのCSSの書き方レスポンシブサイト用ブレイクポイント考察!時代に適するサイズとは?レスポンシブデザインがSEOに有利な理由レスポンシブデザインの確認が簡単に出来るChromeのデベロッパーツールの使い方レスポンシブ対応ページの簡単な作り方!導入部分を解説します。modernthemes.net。