いろんなサイトでよく見かけるグラデーションボタンですが、何も考えずに作ってしまうと背景色やグラデーションの向きに修正が発生した場合に、大変な思いをする事になるんです…サイト内にボタンの種類が多ければ尚更です。
今回は、以前からよく言われる「構造とスキンの分離」を意識して、メンテナンスしやすいグラデーションボタンの作り方を紹介します。
linear-gradient でグラデーションを作る
通常、グラデーションボタンを作る場合は下記のように background プロパティに linear-gradient を指定します。
1 | background: linear-gradient(#77a0bb, #58a); |
とりあえず、linear-gradient に任意の色を指定してグラデーションボタンを作ってみました。
See the Pen ボタンの背景色をグラデーションで指定 by Beginners-High (@dragonpa) on CodePen.
CSSで背景色やボーダー、テキストシャドウに任意の色を指定しています。
単純にグラデーションボタンを作る場合は上記のコードで問題ないと思いますが、ボタンのカラーバリエーションが必要になった場合や、ボタンの色を変更しなければならない場合などを考えると、あまり良い書き方とは言えません。
構造とスキンの分離を意識しない場合
上記のグラデーションボタンは「構造とスキンの分離」を意識していないので、非常にメンテナンスしづらいコードになっています。
例えば
クライアントから「ボタンの色を赤色に変更してほしい」という要望があった場合、変更しなければいけないプロパティは３箇所あります。
1 2 3 | background: linear-gradient(#77a0bb, #58a); border: solid 1px #446d88; text-shadow: 0 -.05em .05em #335166; |
background で背景のグラデーション、border でボタンの囲み罫の色、text-shadow で文字の影色を変更してようやく見た目の色が変わりますが、これってかなり面倒だと思いません？
「ここは赤色で、ここは緑色でここは…」と、何箇所も色変更する場合は特に面倒だと思います。
しかし！
こういった煩雑な作業も「構造とスキンの分離」を意識してCSSを書けば、かなりメンテナンスしやすいコードに変わるんです！
構造とスキンの分離を意識してグラデーションボタンを作る
それでは「構造とスキンの分離」を意識して、グラデーションボタンを作ってみましょう。
「構造とスキンの分離」を意識してCSSを書く場合、なるべく少ない変更で見た目を変更できないか考えることが重要なので、下記のように background-color 以外は共通の構造として利用できるようにCSSを書き換えました。
See the Pen 背景色を透過グラデーションで指定 by Beginners-High (@dragonpa) on CodePen.
背景色にグラデーションを指定するのではなく、背景色の上に白から透明に変わるグラデーションを指定している点と、グラデーションを構造、背景色をスキンと分けているのがポイントです。
こうしておくと、クラスを追加して background-color を変更すればカラーバリエーションが簡単に作れるし、色変更があった場合も background-color を修正するだけで終わります。
かなりメンテナンスしやすいグラデーションボタンになったんじゃないでしょうか。
あと、ボタンや背景色の変化に対応できるように、テキストシャドウや罫線の色も透明色で指定しているのもポイントですよ!
まとめ
最近では「構造とスキンの分離」も当たり前になっていると思いますが、まだまだ意識してないと無駄なCSSを書いているなんてことがありますが、メンテナンスのしやすさや、CSSの肥大化はWEBサイトを作る上で重要なポイントなので、しっかりと「構造とスキンの分離」を意識してスッキリしたCSSを目指したいですね！
「構造とスキンを分離して作るメンテナンスしやすいグラデーションボタン」でした。
