構造とスキンを分離して作るメンテナンスしやすいグラデーションボタン

構造とスキンを分離してグラデーションボタンを作る






いろんなサイトでよく見かけるグラデーションボタンですが、何も考えずに作ってしまうと背景色やグラデーションの向きに修正が発生した場合に、大変な思いをする事になるんです…サイト内にボタンの種類が多ければ尚更です。

今回は、以前からよく言われる「構造とスキンの分離」を意識して、メンテナンスしやすいグラデーションボタンの作り方を紹介します。

linear-gradient でグラデーションを作る

通常、グラデーションボタンを作る場合は下記のように background プロパティに linear-gradient を指定します。

とりあえず、linear-gradient に任意の色を指定してグラデーションボタンを作ってみました。

See the Pen ボタンの背景色をグラデーションで指定 by Beginners-High (@dragonpa) on CodePen.

CSSで背景色やボーダー、テキストシャドウに任意の色を指定しています。

単純にグラデーションボタンを作る場合は上記のコードで問題ないと思いますが、ボタンのカラーバリエーションが必要になった場合や、ボタンの色を変更しなければならない場合などを考えると、あまり良い書き方とは言えません。

構造とスキンの分離を意識しない場合

上記のグラデーションボタンは「構造とスキンの分離」を意識していないので、非常にメンテナンスしづらいコードになっています。

例えば

クライアントから「ボタンの色を赤色に変更してほしい」という要望があった場合、変更しなければいけないプロパティは3箇所あります。

background で背景のグラデーション、border でボタンの囲み罫の色、text-shadow で文字の影色を変更してようやく見た目の色が変わりますが、これってかなり面倒だと思いません?

「ここは赤色で、ここは緑色でここは…」と、何箇所も色変更する場合は特に面倒だと思います。

しかし!

こういった煩雑な作業も「構造とスキンの分離」を意識してCSSを書けば、かなりメンテナンスしやすいコードに変わるんです!







構造とスキンの分離を意識してグラデーションボタンを作る

それでは「構造とスキンの分離」を意識して、グラデーションボタンを作ってみましょう。

構造とスキンの分離」を意識してCSSを書く場合、なるべく少ない変更で見た目を変更できないか考えることが重要なので、下記のように background-color 以外は共通の構造として利用できるようにCSSを書き換えました。

See the Pen 背景色を透過グラデーションで指定 by Beginners-High (@dragonpa) on CodePen.

背景色にグラデーションを指定するのではなく、背景色の上に白から透明に変わるグラデーションを指定している点と、グラデーションを構造、背景色をスキンと分けているのがポイントです。
こうしておくと、クラスを追加して background-color を変更すればカラーバリエーションが簡単に作れるし、色変更があった場合も background-color を修正するだけで終わります。

かなりメンテナンスしやすいグラデーションボタンになったんじゃないでしょうか。

あと、ボタンや背景色の変化に対応できるように、テキストシャドウや罫線の色も透明色で指定しているのもポイントですよ!

CSSの「構造とスキンの分離」は、囲み罫線を太くしたり、角丸を大きくしたりなど、ボタン共通の構造部分に変更があった場合でも一括で修正できるというメリットもあるので、初心者のうちから意識してCSSを書くことを強くオススメします。

class(クラス)を複数指定して上手にCSSを書く方法【初心者向け】

2017.09.04

まとめ

最近では「構造とスキンの分離」も当たり前になっていると思いますが、まだまだ意識してないと無駄なCSSを書いているなんてことがありますが、メンテナンスのしやすさや、CSSの肥大化はWEBサイトを作る上で重要なポイントなので、しっかりと「構造とスキンの分離」を意識してスッキリしたCSSを目指したいですね!

「構造とスキンを分離して作るメンテナンスしやすいグラデーションボタン」でした。


6ステップでマスターする 「最新標準」HTML+CSSデザイン ~フレキシブルボックスレイアウトを使った、レスポンシブWebデザインの本格的レイアウトテクニック~

フレキシブルボックスレイアウトを使ったレスポンシブWebデザインをきっちり習得!
マルチデバイスに対応したWebサイトをステップ・バイ・ステップで作成し、最新標準のHTML+CSSをマスターすることを目的とした書籍です。 実際に手を動かしながら学習ができるので、しっかりと知識を習得することができます。







構造とスキンを分離してグラデーションボタンを作る