コニファ・ロゴ

ツール集:CSSの変数を試してみる(2)(まとめてスタイル変更)

「CSSの変数を試してみる」のその(2)です。その(1)はこちらです。

webページを作成時に、繰り返し処理のスタイルを替えるケースでは、子要素はまったく同じにしておき親要素や祖先要素のclass名だけを変更して対応することがよくあります。しかし、要素やスタイルの数が多くなると、メンテナンスのときに全体の把握に手間取ります。そこで変数を使って、値に分かりやすい名称を付けておきます。

サンプルは、背景色と文字色を変数宣言しておき、「div class="box"」内のすべてのspan要素に適用しています。そして子要素のdiv全体を複製し、一方にclass名"type2"を追加して変数の値を書き換えています。

サンプル

  1. サンプルテキスト・ここの背景に色を付ける・サンプルテキスト
  2. サンプルテキスト・サンプルテキスト・ここの背景に色を付ける・サンプルテキスト
  3. サンプルテキスト・サンプルテキスト・サンプルテキスト・ここの背景に色を付ける・サンプルテキスト
  1. サンプルテキスト・ここの背景に色を付ける・サンプルテキスト
  2. サンプルテキスト・サンプルテキスト・ここの背景に色を付ける・サンプルテキスト
  3. サンプルテキスト・サンプルテキスト・サンプルテキスト・ここの背景に色を付ける・サンプルテキスト

htmlソース

<div class="box">
  <div>
    <ol>
      <li>サンプルテキスト・<span>ここの背景</span>に色を付ける・サンプルテキスト</li>
      <li>サンプルテキスト・サンプルテキスト・<span>ここの背景</span>に色を付ける・サンプルテキスト</li>	
      <li>サンプルテキスト・サンプルテキスト・サンプルテキスト・<span>ここの背景</span>に色を付ける・サンプルテキスト</li>
    </ol>
  </div>
  <div class="type2">
    <ol>
      <li>サンプルテキスト・<span>ここの背景</span>に色を付ける・サンプルテキスト</li>
      <li>サンプルテキスト・サンプルテキスト・<span>ここの背景</span>に色を付ける・サンプルテキスト</li>	
      <li>サンプルテキスト・サンプルテキスト・サンプルテキスト・<span>ここの背景</span>に色を付ける・サンプルテキスト</li>
    </ol>
  </div>
</div>

 

CSSソース

:root {
	--bg-color: #cfc;
	--txt-color: blue;
	}
.box span {
	background: var(--bg-color);
	color: var(--txt-color);
	}
.type2 span {
	--bg-color: #ccf;
	--txt-color: red;
	}

 

 

 

 

戻るボタン