はじめに

こんにちは。
今回は、CSS変数とレスポンシブウェブデザインのキャッチアップをしたので、それを使って、「おみくじ」を作ってみました。
見た目に関してはあまりこだわっていないので、そこはぜひ、アレンジを加えてみてください。

完成したものは次のURLからプレイできます！
https://michimichix521.github.io/css_variable_fortune/

ファイル等はGitHubにあげていますので、こちらからダウンロードすることもできます。

環境

Windows 10 home
Google Chrome

「おみくじ」の制作

1.構造（HTML）

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS変数を使ったおみくじ</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="button">おみくじを引く</div>
  <div class="result"></div>

  <script src="main.js"></script>
</body>
</html>

構造に関しては上記のようになります。
<div>を使って、ボタンと結果を表示するテキストのための領域を確保している感じです。

2.見た目（CSS）

styles.css

@charset "utf-8";
/* CSS Document */

:root{
  --result-color:black;
}

body{
  margin:0;
  background-color:var(--result-color);
}

.button{
  margin:100px auto 0;
  width:200px;
  padding:10px;
  background-color:red;
  text-align:center;
  color:white;
  border-radius:10px;
  cursor:pointer;
  user-select:none;
}

.button:hover{
  opacity:0.7;
}

.result{
  text-align:center;
  font-size:150px;
  font-weight:bold;
}

@media(min-width:650px){
  .result{
    font-size:300px;
  }
}

見た目に関しては上記のようになります。
:rootセレクタに--result-colorがありますが、こちらがCSS変数になります。
この変数を使って、bodyセレクタにあるbackground-colorプロパティの値をJavaScriptによって、変えています。

また、ちょっとしたレスポンシブウェブデザインなのですが、メディアクエリを使って、画面サイズが650px以上になったら、結果のテキストのfont-sizeプロパティが300pxになるようにしています。

2019/09/19 修正

ご指摘がありましたので、修正してみました。

styles.css

@charset "utf-8";
/* CSS Document */

:root{
  --result-color:black;
  --result-font-size:150px;
}

body{
  margin:0;
  background-color:var(--result-color);
}

.button{
  margin:100px auto 0;
  width:200px;
  padding:10px;
  background-color:red;
  text-align:center;
  color:white;
  border-radius:10px;
  cursor:pointer;
  user-select:none;
}

.button:hover{
  opacity:0.7;
}

.result{
  text-align:center;
  font-size:var(--result-font-size);
  font-weight:bold;
}

@media(min-width:650px){
  :root{
    --result-font-size:300px;
  }
}

修正点に関して、
修正前は、メディアクエリの中で、.resultセレクタのfont-sizeプロパティの値を300pxに変更していましたが、
修正後では、メディアクエリの中で:rootセレクタのCSS変数(カスタムプロパティ)である--result-font-sizeの値を300pxに変更するようにしました。

また、修正のためにCSSファイルの中身を一部変更したのですが、CSSファイルだけを入れ替えるだけでうまく動きます！

3.振る舞い（JavaScript）

main.js

"use strict";

{
  const ROOT = document.documentElement;
  const BUTTON = document.querySelector(".button");
  const RESULT = document.querySelector(".result");

  const FORTUNE_LIST = [["大吉", "yellow"],
                        ["吉", "orange"],
                        ["中吉", "pink"],
                        ["小吉", "green"],
                        ["末吉", "blue"],
                        ["凶", "white"],
                        ["大凶", "gray"]];

  BUTTON.addEventListener("click",()=>{
    let _randNum = Math.floor(Math.random()*FORTUNE_LIST.length);

    ROOT.style.setProperty("--result-color",FORTUNE_LIST[_randNum][1]);
    RESULT.textContent = FORTUNE_LIST[_randNum][0];

    // CSS変数の値の取得
    console.log(getComputedStyle(ROOT).getPropertyValue("--result-color"));
  });
}

振る舞いに関しては上記のようになります。
結果の文字と背景色の関係は、FORTUNE_LISTという配列のそれぞれ、各要素のペアになります。

そして、ROOT.style.setProperty("--result-color",FORTUNE_LIST[_randNum][1])を使って、--result-colorというCSS変数の値を変えています。

また、getComputedStyle(ROOT).getPropertyValue("--result-color")を使うことで、CSS変数である--result-colorの値を取得することができます。

おわりに

以上で、CSS変数を使った「おみくじ」の制作は終了になります。
CSS変数は非常に便利だということで、今後もぜひ使っていきたいです。

ここまで読んでいただき、ありがとうございました。