【CSS】カスタムプロパティ(CSS変数)を知っておく

プログラミング初心者の勉強ブログ #104

ドットインストールでCSS変数を勉強した内容をまとめます。プリプロセッサとは異なるCSS変数。Sassでできない動的な変数処理もできるようで、少しでも知っておくだけで幅が広がります。

 

目次

[toc]

 

CSS変数とは

公式では「カスケード変数のためのCSSカスタムプロパティ(CSS custom properties for cascading variables)」としていますが、単に「CSSカスタムプロパティ」や「CSS変数」などとも呼ばれています。

変数は文字列や数値などを入れる箱のようなものです。例えば数学では「y = 3x」のような式があり、この y や x の中には自由に数字を当てはめられます。これが変数というものです。数学では数値のみ使えましたが、プログラミングの世界では文字列も含められます。そしてその中身の入った箱は何度も繰り返し利用でき、箱の中身が変わると他の箇所も変更されるという仕組みです。

CSSで変数(カスタムプロパティ)を使ってみよう

SassではなくCSSで変数を使うことができます。Sassだとメディアクエリで変数が反映されなかったり、継承がうまいこと行かないことがあるのですが、CSS変数はそれらを可能にします。

参考: 僕がネイティブなCSS変数にわくわくする理由

上のリンクに詳細が書いてあります。今回はドットインストール「CSS変数入門」をもとに、実際のCSS変数を用いたコードを書いていきます。

 

ボタンクリックで色が変わるページの作成

sample

ボタンを押すたびに色が変わります。hslでcolorを定義し、色相を変数で変化させています。

 

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS変数</title>
  <style>
    /* root擬似クラス */
    :root {
      --my-hue: 50; // cssのカスタムプロパティ名は「--」から始まる
    }

    /* hslでcolorを定義 */
    body {
      background: hsl(var(--my-hue), 40%, 95%);
    }
    h1, p {
      color: hsl(var(--my-hue), 35%, 55%);
    }
    #btn {
      color: #fff;
      background: hsl(calc(var(--my-hue) + 60), 50%, 50%);
      width: 100px;
      padding: 8px;
      border-radius: 4px;
      text-align: center;
      cursor: pointer;
      user-select: none;
    }
  </style>
</head>
<body>
  <h1>My Site</h1>
  <p>Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello.
    Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. </p>

  <div id="btn">Button</div>
  <script>
    (() => {
      'use strict';

      // ボタンクリック時のイベントを追加
      document.getElementById('btn').addEventListener('click', () => {
        document.documentElement.style.setProperty('--my-hue',
        Math.floor(Math.random() * 360));
      });
    })();
  </script>
</body>
</html>

 

root擬似クラス

CSS変数はDOM要素に対してCSSを適用できます。「:root」は「html」要素の更に上の階層にあるノードです。変数をhtml全てで使えるグローバルスコープとしたい場合は、このroot擬似クラスに変数を定義します。

/* root擬似クラス */
:root {
  --my-hue: 50; // cssのカスタムプロパティ名は「--」から始まる
}

 

HSL(HLS)色空間

hls

Hue(色相)、Saturation(彩度)、Lightness(輝度)の頭文字です。色相は0〜360、彩度と輝度は0%〜100%で指定して色を定義します。彩度、輝度をそれぞれ単独で変化させることができるので、統一感のある色合いなどを、少し数値を変えるだけで表現できます。色相も単独で変化させられるので同系色だけでなく補色やトライアドなども数値(補色だったら180足す)で表すことができます。

今回の場合、

/* hslでcolorを定義 */
body {
  background: hsl(var(--my-hue), 40%, 95%);
}
h1, p {
  color: hsl(var(--my-hue), 35%, 55%);
}
#btn {
  color: #fff;
  background: hsl(calc(var(--my-hue) + 60), 50%, 50%); // 色相に60を足してボタンだけ違う色にしている
  width: 100px;
  padding: 8px;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

body、h1、p、#btnともにhueの部分を変数で定義してます。クリックイベントを見ると、

// ボタンクリック時のイベントを追加
document.getElementById('btn').addEventListener('click', () => {
  document.documentElement.style.setProperty('--my-hue',
  Math.floor(Math.random() * 360));
});

「Math.floor(Math.random() * 360」とありますが、これは0から359までの整数をランダムに生成する関数です。ここで出たランダムな整数がHueの値としてクリックする度に定義される仕組みです。

 

CSS変数の基本は、

  • プロパティ名は「–」から始まる
  • var( )で変数を囲んで使う
  • 全てで使いたい変数はroot擬似要素で定義する

です。他にも様々な使い方ができるみたいなので、勉強していきたいと思います。

 

まとめ

ここ最近の学習はインプット中心だ。インプットをすると自分の手持ちが増える。手持ちが増えるとできることが増え、考えが広がる。プログラミングにおいて様々な言語を学び、DBを学び、システム構造やネットワークの知識も相応に持ち、環境構築もこなし、フレームワークを駆使しライブラリも活用し、効率的で再利用性に長けたプログラム設計の考え方を落とし込み、各言語のメソッドやプロパティに至るまで、全てを上手に活用できるだけの包括的な「手持ち」を有したら、その頃には世間が「めちゃつよエンジニア」というラベルを貼ってくれるかもしれない。先を見ると途方もなく長く感じる。ヘキトラのカワグチジンが「自由には責任がある」と言っていたが、本当にその通りだと思う。そもそも「サラリーマンじゃない自由な働き方」ができたらなと思っている僕のその行為自体にあてはまる言葉だが、「プログラミングの勉強」という小さな枠組みで考えてもそれを感じる。プログラミングはめっちゃ自由だと思う。新しい知識を少しインプットしただけでも、「それで?これを使ってじゃあ、何を作ればいいんだ?」が隙を突いてくる。ここで迷ったら本末転倒であることを強く意識しなければならない。インプットが先行しすぎると迷いが生まれる。「手持ち」こそ増えたものの、自由で何もない空間に放り投げられる。自分の行動のベクトルの始点は自分にあるべきだ。「やってみたい、作ってみたい」が本来何よりも優先されるべきなのではと思う。マーケティングが、潜在的に眠っているまだ発掘されていない価値を探る作業だとするならば、この考え方は「全くの0から価値を新しく作る」に近い。いわゆる「カリスマ」と呼ばれる人がこういう力を持っているんだと思う、というより僕の中でのカリスマの定義だ。カリスマはそんなことで迷わない。大事なのは「自分が楽しんでる状態」だ。カリスマは人目を気にせず楽しんでる。「なんだかよくわからないけど楽しそうに何かやってるなー」は、それだけで人を惹きつける。

だが、それはあくまで自分がカリスマだったら、の話である。自分がカリスマでなくnullだったらelseで条件分岐しておかないと思わぬ挙動をしかねない。もしくはreturnでカリスマ関数から離脱するようにしなければならない。カリスマ関数を宣言するくらいならSWOT分析でもしてた方がいいかもしれない。PDCAの一つでも回せた方が有意義な時間になるかもしれない。プログラミングは自由である。

自分をCPUに例える。1秒間に何十億回と0と1をカタカタ演算することはできないが、Mac Bookというハードディスクにいろんなソースコードを保存しておくことはできる。ブラウザがメモリだ。ドトールのアイスコーヒーで冷却する。ブログのこのまとめ欄で訳分からないことを書き連ねクールダウンする。一度記憶したことを一生忘れないでいられる頭を持っていたら違ってたかもしれない。最近はインプットとアウトプットに続く第三のプットであるスループットが僕の中で話題だ。勉強とYouTubeからしか情報が入ってこない鎖国生活を送ると、世間の流行とは全く無関係なワードが流行る。

たらればをタラタラ話し、かもしれないを連発した先の今回の思考の到達点は「とりあえず楽しむ」かな。こんな感じで。

以上ありがとうございました。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA