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

CSSを動的に変更する方法のイメージ図CSS
この記事は約7分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

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だけでスタイルの変更ができます。

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

まとめ

これで、CSSを動的に変更する5つの手法を学びました。

それぞれの手法にはメリットとデメリットがありますが、適切な方法を選ぶことで、あなたのWebデザインが劇的に向上します。

是非、今回学んだ手法を活用して、クリエイティブなデザインに挑戦してください。

この記事を読んで、あなたがCSSを動的に変更する方法を理解し、問題解決できたことを願っています。