技術メモ
CSSで変数(カスタムプロパティ)を使って、配色・z-indexの使用例をご紹介!

今回サイトをリニューアルするにあたり、CSS変数(カスタムプロパティ)にチャレンジしました!配色を変数で管理することにしたんですが、ほんとにすごく便利です!

配色の修正が必要な場合、変数をいじるだけで他にも反映されるので保守性・メンテナンス性含め、かなり管理がしやすくコーディングも効率化できるのでぜひ導入してみてください。

CSS変数(カスタムプロパティ)とは?

CSS変数は、公式には「CSS Custom Properties for Cascading Variables」と呼ばれています。変数はよく文字列や数値を入れる箱といった表現がされ、変数を宣言・定義することで文字列・数値を何度も好きな時に呼び出すことができます。

CSSに限らず、変数という考え方はプログラム全般でよく聞きますよね。

ちなみに、IE11には未対応ですが、Polyfillが用意されていますので、IE対応が必要であればPolyfillを活用しましょう。

CSS変数(カスタムプロパティ)の使い方

変数を宣言・定義する場合

  • 変数の宣言・定義は:rootセレクタを使用する
  • 変数の銭湯は「-」半角ハイフンを2つつける
  • 変数は大文字と小文字の区別がなされるので注意

style.css

:root { 
 --text-color:#333333;
 --primary-color:#f5f5f3;
} 

上記コードでは、プライマリーカラー(ベースとなるよく使う色)とテキストカラーを宣言・定義しています。これで変数の宣言・定義は終わりです。必要に応じて、自分好きなように追加していくと良いです。

変数を呼び出す場合

:rootセレクタで宣言・定義したCSS変数は、どこでも呼び出すことができます。変数を呼び出す際は、var()関数を使用します。

style.css

body { 
 color:var(--text-color);
 background-color:var(--primary-color);
}

上記、コードで宣言・定義したCSS変数を呼び出すことができます。

CSS変数とSassの違い

Sassでも変数を使用することはできますが、CSS変数はJavaScriptから値にアクセスできるという点が大きく異なります。この辺り僕は詳しくは理解していないのですが、Sassはコンパイルされているからという認識です。

CSS変数を具体的にどう使ってる?

配色を管理する

実際に、サイトリニューアルの時にどうやって配色を管理したかをここで説明していきます。今回のリニューアル時には、テキストの色を省くと、赤3色、黄3色、グレー2色、オレンジ2色、グラデーションを4色使用しました。

こちらの配色は、以前に書いた配色ツールで選定した配色を使っています。気になる方はこちらの記事もご覧になってください。

style.css

:root { 
 --red-color-primary: #dc0714;
 --red-color-primary-rgb: 220, 7, 20;
 --red-color-second: #640000;
 --red-color-second-rgb: 100,0,0;
 --red-color-tertiary: #ebe4e4;
 --red-color-tertiary-rgb: 235, 228, 228;

 --yellow-color-primary: #d9a941;
 --yellow-color-primary-rgb: 217, 169, 65;
 --yellow-color-second: #FFF239;
 --yellow-color-second-rgb: 255, 242, 57;
 --yellow-color-tertiary: #efe8d6;
 --yellow-color-tertiary-rgb: 239, 232, 214;

 --gray-color-primary: #f5f5f3;
 --gray-color-primary-rgb: 245, 245, 243;
 --gray-color-second: #e2e2e2;
 --gray-color-second-rgb: 226, 226, 226;

 --orange-color-primary:#fb9200;
 --orange-color-primary-rgb:251, 146, 0;
 --orange-color-second:#ffce18;
 --orange-color-second-rgb:255, 206, 24;
 --orange-color-tertiary:#ffaa00;
 --orange-color-tertiary-rgb:255, 170, 0;
	
 --red-gradients: linear-gradient(45deg,#dc0714,#640000); 
 --vivid-gradients:linear-gradient(45deg, #fff239, #ffce0d, #ffaa00, #f98500, #ef5d00, #f0481a, #ef2f2a, #ec0037, #f6004f, #fc0068, #ff0081, #ff009b);
 --warm-gradients1: linear-gradient(45deg, #fff239, #ffe028, #ffce18, #ffbc08, #ffaa00, #fc9a00, #f98a00, #f57900, #f06501, #ea4f07, #e3350e, #dc0714);
 --warm-gradients2: linear-gradient(45deg, #fff239, #ffe028, #ffce18, #ffbc08, #ffaa00, #fc9a00, #f98a00, #f57900, #f06501, #ea4f07, 
 #e3350e,#dc0714,#e3350e,#ea4f07,#f06501,#f57900,#f98a00,#fc9a00,#ffaa00,#ffbc08,#ffce18,#ffe028,#fff239);
} 

なぜ、#ffffffなどの16進数カラーコードだけではなく、RGBも一緒に指定しているのかというと、CSS変数を呼び出す時にrgba指定にすることでその場で透明度を調整できるからです。

例えば、トップページの料金表をご覧ください。

LIVALESTサイトのトップページ料金表・テーブル
LIVALESTサイトのトップページ料金表・テーブル

ライトプラン、スタンダードプラン、サポートプランと3つのプランを用意しています。こちらのテーブルの縦軸ですが、各プランの配色を薄めて配色を指定しています。具体的には、下記のようなコードのように、background-colorのrgba指定でベースの色から透明度を調整して配色を選定しています。

style.css

.comparison-table td.lite {
 background-color: rgba(var(--yellow-color-second-rgb),.2);
}
.comparison-table td.standard {
 background-color: rgba(var(--orange-color-second-rgb),.2);
}
.comparison-table td.support {
 background-color: rgba(var(--orange-color-tertiary-rgb),.2);
}

ちなみに、透明度で指定していることで、横軸のグレーと白の段違いの配色も視認しやすくしています。

また、グラデーションに関しても、特に今回のようにコードが複雑になってくると使用するたびにコードが煩雑になります。あらかじめグラデーションも変数によって指定することで使い回すことができ、保守性・作業効率が高まります。

z-indexを管理する

当サイトでは、CSS変数を使ってz-indexを管理しています。まずは、z-indexはできるだけコンテキスト・セクション内で完結するようには指定しつつも、下記のようにCSS変数で役割ごとのz-indexの値を決めておくようにしています。

style.css

:root {	
 --z-index-modal: 500;
 --z-index-overlay: 400;
 --z-index-spmenu: 300;
 --z-index-spmenu-modal: 200;
 --z-index-header: 100;

z-index-modal:モーダルのメインコンテンツを表示するレイヤー
z-index-overlay:モーダル時のオーバーレイ
z-index-spmenu:スマホメニューのボタン
z-index-spmenu-modal:スマホメニューのモーダルレイヤー
z-index-header:固定ヘッダー
として、あらかじめ変数でz-indexの数値を管理しています。

CSSのz-indexについては理解しにくい部分がありますが、「CSS)z-indexのベストプラクティスを考える」という記事で丁寧に解説されてます。今回のCSS変数でのz-indexの管理も下記記事を参考にしています。

まとめ

CSS変数について書かれてる記事は増えてきている印象ですが、具体的に活用例が書かれているサイトはあまりなかったので今回はブログ記事にしてみました。配色やz-index以外にもこういう使い方があるよ!というのがあれば教えていただければ嬉しいです。

同じ技術メモカテゴリーのログ

tech

ホームページ制作ご対応エリア

LIVALESTは、個人のフリーランスとして活動しています。全国対応ではなく、大阪を中心とした関西圏の直接お会いできる距離を重要視しています。

直接、お話をお伺いすることで、広く深くクライアント様のビジネスを理解し、ホームページを通じて、要望を実現いたします。

  • 大阪府:
  • 池田
  • 泉大津
  • 泉佐野
  • 和泉
  • 茨木
  • 大阪狭山
  • 旭区
  • 阿倍野区
  • 生野区
  • 北区
  • 此花区
  • 城東区
  • 住之江区
  • 住吉区
  • 大正区
  • 中央区
  • 鶴見区
  • 天王寺区
  • 浪速区
  • 西区
  • 西成区
  • 西淀川区
  • 東住吉区
  • 東成区
  • 東淀川区
  • 平野区
  • 福島区
  • 港区
  • 都島区
  • 淀川区
  • 貝塚
  • 柏原
  • 交野
  • 門真
  • 河内長野
  • 岸和田
  • 四條畷
  • 吹田
  • 摂津
  • 泉南
  • 高石
  • 高槻
  • 大東
  • 豊中
  • 富田林
  • 寝屋川
  • 羽曳野
  • 阪南
  • 東大阪
  • 枚方
  • 藤井寺
  • 松原
  • 箕面
  • 守口
  • 八尾
  • 兵庫県:
  • 神戸
  • 姫路
  • 尼崎
  • 明石
  • 西宮
  • 洲本
  • 芦屋
  • 伊丹
  • 相生
  • 豊岡
  • 加古川
  • 赤穂
  • 西脇
  • 宝塚
  • 三木
  • 高砂
  • 川西
  • 小野
  • 三田
  • 加西
  • 丹波篠山
  • 養父
  • 丹波
  • 南あわじ
  • 朝来
  • 淡路
  • 宍粟
  • 加東
  • たつの
  • 京都府:
  • 京都
  • 福知山
  • 舞鶴
  • 綾部
  • 宇治
  • 宮津
  • 亀岡
  • 城陽
  • 向日
  • 長岡京
  • 八幡
  • 京田辺
  • 京丹後
  • 南丹
  • 木津川
  • 和歌山県:
  • 和歌山
  • 海南
  • 橋本
  • 有田
  • 御坊
  • 田辺
  • 新宮
  • 紀の川
  • 岩出
  • 奈良県:
  • 奈良
  • 大和高田
  • 大和郡山
  • 天理
  • 橿原
  • 桜井
  • 五條
  • 御所
  • 生駒
  • 香芝
  • 葛城
  • 宇陀
  • 滋賀県:
  • 大津
  • 彦根
  • 長浜
  • 近江八幡
  • 草津
  • 守山
  • 栗東
  • 甲賀
  • 野洲
  • 湖南
  • 高島
  • 東近江
  • 米原

ホームページ制作やWeb集客、
リニューアルやサイトの管理・運用・更新まで、
あなたのご相談・ご依頼をお待ちしております。

お電話でのお問い合わせ

050-5604-7128 平日12:00 ~ 18:00

24時間以内に必ず、ご連絡させていただきます。

ホームページ制作実績一覧