CSSを動的に変更する方法を現役デザイナーが解説【初心者向け】

初心者向けにCSSを動的に変更する方法について解説しています。JavaScriptを使った動的な変更の方法をサンプルコードで説明します。書き方と画面上での見え方、実行した場合の処理を実際に見ていきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

CSSを動的に変更する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

CSSを動的に変更する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

動的とは?静的との違い

HTMLやCSSにおける「静的」とは、サーバーから画面を読み込んで初期表示される情報のことです。「動的」とは、静的表示の後にユーザーによる画面部品操作により、画面表示が変化することです。

 

JavaScriptでcssを動的に変更する方法

JavaScriptを使って、あらかじめ定義しておいたcssクラス名をHTMLのclass属性に付与することで、cssを動的に変更することができます。cssクラスを付与するには、document.getElementById()で取得したDOMオブジェクトからclassList.add()メソッドを実行します。

(DOMオブジェクト).classList.add(クラス名);


[PR] HTML/CSSで挫折しない学習方法を動画で公開中

CSSを動的に変更してみよう

まず、サンプルとなるHTMLとCSSコードを用意します

HTMLコード

<div id="dynamicDiv" class="divArea">div領域です。</div>
<br>
<button type="button" onclick="addCss()">CSS適用</button>

CSSコード

/* 静的表示に使うCSS */
.divArea {
  width : 300px ;
  height : 100px ;
  border: solid ;
  padding : 10px;
}

/* 動的に付与予定のCSS */
.color-green {
  background-color : #a9edcb;
}

静的表示画面は、以下のようになります

 

ここで、ボタンを押すとCSSを動的にDiv領域に付与する

Javascriptコードを用意します。

Javascriptコード

function addCss() {
  document.getElementById("dynamicDiv").classList.add("color-green");
}

 

「CSS適用」ボタンを押してaddCss()を実行すると、HTMLのdiv領域のClass属性に「color-green」が動的に付与され、画面が以下のように変化します。

元に戻したい場合は、以下のコードを実行すると付与されたCSSが削除されます。

classList.remove("color-green");

 

まとめ

JavascriptでCSS属性を動的にHTMLに付与したり、除去することにより、デザインに動きのある楽しいWebサイトを作ることができます。

 

監修してくれたメンター

寺谷文宏

WEBアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。

TechAchademyではフロントエンド、Javaコースを担当。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。