このページの本文へ

Web制作がめっちゃ捗る!CSS変数の基礎と実践テクニック

2017年07月13日 16時00分更新

記事提供:WPJ

  • この記事をはてなブックマークに追加
本文印刷

進化し続けるCSSの仕様の中でも使い勝手がいいのが、CSS変数。キーカラーやサイズなど、あとから修正するのが面倒な要素はCSS変数を使って工数を減らし、ストレスを軽減しましょう。

SassやLessなどのプリプロセッサーは、CSSのコードベースを、メンテナンスしやすい整った状態にするのに役立ちます。変数、mixin(ミックスイン)、loop(ループ)などCSSコーディングに動的な機能を追加すると、繰り返し処理を最小限にし、開発時間を短縮できます。

CSSの一部として動的な機能がいくつか登場しています。CSS変数(CSS variables:カスタムプロパティ)はブラウザーの対応状況もとてもよく、すでに利用可能です。「CSS版mixin」は準備段階です

この記事では、CSS開発ワークフローにCSS変数を組み入れる方法を紹介します。スタイルシートのメンテナンス性が向上し、DRYの原則(繰り返しを避けること)に沿ったスタイルシートを実現します。

この記事をWPJのサイトで読む

Web Professionalトップへ

Web Professionalトップページバナー

WebProfessional 新着記事

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング