「CSSの変数を試してみる」のその（５）です。
その（１）はこちら、その（２）はこちら、その（３）はこちら、その（４）はこちらです。

CSSの変数をfont-sizeの変更に使ってみました。次のサンプルは、font-size用の変数「--font-size」に対して「input[type="range"]」を使い、12から24の間の値に変更します。rangeのスライダーをドラッグして動かすと、ブルーのボーダー内のテキストのサイズが変わります。同時にピンク色のテキストで変化したfontのサイズを表示します。fontのサイズの初期値は18pxです。なお、rangeの値を変数に渡すためJavaScriptを使用しています。

サンプル

サンプルのhtmlソース

最小12px　<input type="range" value="18" min="12" max="24" class="range">　最大24px
<div class="box">
	<p>
  		ダミーテキスト　親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）。
	</p>
	<span id="size"></span>
</div>

サンプルのCSSソース

.box p {
	line-height: 1.6;
  margin-bottom: 10px;
  color: #333;
  font-size: var(--font-size);
	}
.box span {
	color: deeppink;
  font-size: 16px;
	}
input[type="range"] {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  width: 200px;
  height: 8px;
  margin: 0;
  border: none;
  padding: 1px 2px;
  border-radius: 4px;
  background: #444;
  outline: none;
	}

JavaScriptソース

var range = document.querySelector('.range');
var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
range.addEventListener('input', function () {
	root.style.setProperty('--font-size', this.value + 'px');
	target = document.getElementById("size");
	target.innerHTML = this.value + 'px';
});