CSS Academy · レッスン

JavaScriptによる変数の更新

Q: 「JavaScriptによる変数の更新」で何を学びますか？

style.setProperty()を使い、JavaScriptからCSSカスタムプロパティを動的に更新します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

style.setProperty()を使い、JavaScriptからCSSカスタムプロパティを動的に更新します。

「JavaScriptによる変数の更新」はCoddyKit上の無料CSS Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

JavaScriptからCSS変数を更新する理由

CSSカスタムプロパティはブラウザー上で動的に反映されます。JavaScriptで変更すると、そのプロパティを使用しているすべての要素が直ちに更新されます。多数のクラスを切り替えなくても、動的なテーマ、リアルタイムのスライダー、状態に応じたスタイルを実現できます。

カスタムプロパティの値の取得

getComputedStyle()を使ってカスタムプロパティの値を読み取ります。

<div class="demo" style="background:#3b82f6;color:#fff;padding:16px;">Reading --primary-color</div>
<p>Value: <span id="output">(reading...)</span></p>
<script>
  const root = document.documentElement;
  const value = getComputedStyle(root)
    .getPropertyValue('--primary-color').trim();
  console.log(value); // '#3b82f6'
  document.getElementById('output').textContent = value;
</script>

カスタムプロパティの値の設定

任意の要素でstyle.setProperty()を使うと、カスタムプロパティを更新できます。

<div class="card">
  Card body
</div>
<script>
  // Set globally on :root
  document.documentElement.style.setProperty('--primary-color', '#ef4444');

  // Set on a specific element
  document.querySelector('.card').style.setProperty('--card-bg', 'pink');
</script>

カスタムプロパティの削除

style.removeProperty()を使うと、プロパティの上書きを削除し、CSSで宣言された値に戻せます。

<div class="badge">Removing an inline override restores the :root value</div>
<script>
  // Simulate an inline override was set, then removed
  document.documentElement.style.setProperty('--primary-color', 'crimson');
  document.documentElement.style.removeProperty('--primary-color');
  // Now the :root CSS value applies again
</script>

テーマ切り替えパターン

data-theme属性を切り替え、CSSでテーマごとに変数を定義する、典型的なテーマ切り替えの例です。

<div class="panel">Dark theme applied via data-theme</div>
<script>
  document.body.dataset.theme = 'dark';
</script>

CSS変数によるプログレスバー

JavaScriptから設定したCSS変数だけで、プログレスバーの値を制御します。

<div class="progress-bar"></div>
<script>
  function setProgress(pct) {
    document.querySelector('.progress-bar')
      .style.setProperty('--progress', pct + '%');
  }
  setProgress(70);
</script>

マウス位置の追跡

マウスの移動に応じて位置用のCSS変数を更新すると、視差効果やカーソル追従効果を作成できます。

<div class="cursor-dot"></div>
<script>
  document.addEventListener('mousemove', e => {
    document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px');
    document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px');
  });
</script>

スクロール駆動の変数

スクロール位置に基づいてCSS変数を更新し、スクロール連動アニメーションを実現します（モダンなAPIのほうが適していますが、JSと変数を組み合わせる方法も簡単です）。

<div style="height: 800px; background: linear-gradient(#f8fafc, #cbd5e1);">
  <div class="scroll-fill"></div>
</div>
<script>
  window.addEventListener('scroll', () => {
    const pct = window.scrollY / (document.body.scrollHeight - window.innerHeight);
    document.documentElement.style.setProperty('--scroll', pct);
  });
</script>

localStorageによるユーザー設定

選択したテーマをlocalStorageに保存し、ページの読み込み時に復元します。

<button class="theme-toggle" onclick="toggleTheme()">Toggle theme</button>
<div class="content">Themed content</div>
<script>
  // Restore
  const saved = localStorage.getItem('theme') || 'light';
  document.documentElement.dataset.theme = saved;

  // Toggle
  function toggleTheme() {
    const next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
    document.documentElement.dataset.theme = next;
    localStorage.setItem('theme', next);
  }
</script>

CSSアニメーションとJSアニメーション

滑らかなアニメーションには、JSのrequestAnimationFrameループよりも、カスタムプロパティの変更に反応するCSSトランジションを優先してください。補間処理はブラウザーがコンポジタースレッドで行います。

@propertyによる型付きプロパティ

変数を@propertyで登録すると、ブラウザーがトランジション中にその値を補間できるようになります。登録されていないカスタムプロパティでは、この処理は機能しません。

<div class="track">
  <div class="bar"></div>
</div>

簡単な確認

ルート要素のCSSカスタムプロパティを変更するJavaScriptメソッドはどれですか？

まとめ

JavaScriptからCSSカスタムプロパティを更新するには、style.setProperty()を使用します。変更は、そのプロパティを使用するすべての要素に即座に反映されます。このパターンにより、クラスリストを操作したり、複数のプロパティをインラインスタイル文字列で設定したりせずに、動的なテーマ、アニメーションするプログレスバー、カーソル効果、スクロール駆動アニメーションを実現できます。

よくある質問

「JavaScriptによる変数の更新」レッスンは無料ですか？

はい。「JavaScriptによる変数の更新」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「JavaScriptによる変数の更新」で何を学びますか？

style.setProperty()を使い、JavaScriptからCSSカスタムプロパティを動的に更新します。ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「JavaScriptによる変数の更新」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← CSS Academyに戻る