CSSを動的に変更！5つの手法で驚くほど簡単

はじめに
●手法1：JavaScriptでCSSを変更
●手法2：CSSクラスの切り替え
●手法3：CSS変数を使って変更
●手法4：インラインスタイルの動的変更
●手法5：メディアクエリを使った動的変更
まとめ

はじめに

Webデザインにおいて、CSSを動的に変更する方法は、あなたのクリエイティブな力を飛躍的に高める力となります。

この記事では、初心者向けに、CSSを動的に変更する方法を5つの手法で詳しく解説します。

使い方、サンプルコード、応用例をふんだんに取り入れ、あなたが見過ごしていた可能性を解き放ちます。

●手法1：JavaScriptでCSSを変更

まずは、JavaScriptを使ってCSSを動的に変更する方法を見ていきましょう。

JavaScriptは、Webページの要素にアクセスし、CSSのプロパティを変更することができます。

例えば、下記のサンプルコードでは、ボタンをクリックすることで、要素の背景色が変更されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptでCSSを変更</title>
</head>
<body>
<div id="myElement" style="width: 100px; height: 100px; background-color: red;"></div>
<button onclick="changeBackgroundColor()">背景色を変更</button>

<script>
function changeBackgroundColor() {
  const element = document.getElementById("myElement");
  element.style.backgroundColor = "blue";
}
</script>
</body>
</html>

●手法2：CSSクラスの切り替え

次に、CSSクラスを切り替えることでスタイルを動的に変更する方法です。

例えば、下記のサンプルコードでは、ボタンをクリックすることで、要素のCSSクラスが切り替わります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSクラスの切り替え</title>
<style>
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}
</style>
</head>
<body>
<div id="myElement" class="red" style="width: 100px; height: 100px;"></div>
<button onclick="toggleClass()">クラスを切り替え</button>

<script>
function toggleClass() {
  const element = document.getElementById("myElement");
  if (element.classList.contains("red")) {
    element.classList.remove("red");
    element.classList.add("blue");
  } else {
    element.classList.remove("blue");
    element.classList.add("red");
  }
}
</script>
</body>
</html>

この方法では、CSSファイルにあらかじめスタイルを定義しておき、JavaScriptでクラス名を切り替えるだけでスタイルを変更できます。

コードがシンプルで保守性が高く、より複雑なデザインにも対応できます。

●手法3：CSS変数を使って変更

CSS変数を使ってスタイルを動的に変更する方法もあります。

CSS変数は、カスタムプロパティとして定義され、JavaScriptで値を変更することができます。

下記のサンプルコードでは、ボタンをクリックすることで、要素の背景色が変更されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS変数を使って変更</title>
<style>
:root {
  --bg-color: red;
}
#myElement {
  width: 100px;
  height: 100px;
  background-color: var(--bg-color);
}
</style>
</head>
<body>
<div id="myElement"></div>
<button onclick="changeVariable()">背景色を変更</button>

<script>
function changeVariable() {
  const root = document.documentElement;
  root.style.setProperty("--bg-color", "blue");
}
</script>
</body>
</html>

この方法では、複数の要素に適用されるスタイルを一括で変更できるため、効率的にデザインを調整できます。

●手法4：インラインスタイルの動的変更

インラインスタイルを直接変更する方法もあります。

下記のサンプルコードでは、ボタンをクリックすることで、要素の文字色が変更されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>インラインスタイルの動的変更</title>
</head>
<body>
<p id="myText" style="color: red;">このテキストの色を変更します。</p>
<button onclick="changeTextColor()">文字色を変更</button>

<script>
function changeTextColor() {
  const text = document.getElementById("myText");
  text.style.color = "blue";
}
</script>
</body>
</html>

この方法は、JavaScriptで直接スタイルを変更するため、CSSファイルやクラス名を変更する必要がありません。

ただし、インラインスタイルは、CSSファイルとは異なり、ページ内でスタイルが分散してしまうため、保守性が低くなります。

●手法5：メディアクエリを使った動的変更

最後に、メディアクエリを使ってスタイルを動的に変更する方法です。

メディアクエリは、デバイスのスクリーンサイズや解像度に応じて、異なるスタイルを適用することができます。

下記のサンプルコードでは、ウィンドウサイズに応じて、要素の背景色が変更されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メディアクエリを使った動的変更</title>
<style>
#myElement {
  width: 100px;
  height: 100px;
  background-color: red;
}
@media screen and (max-width: 500px) {
  #myElement {
    background-color: blue;
  }
}
</style>
</head>
<body>
<div id="myElement"></div>
</body>
</html>

この方法では、JavaScriptを使わずにCSSだけでスタイルの変更ができます。

特に、レスポンシブデザインの実装において、メディアクエリは重要な役割を果たします。