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

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

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

 

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

 

 

動的とは？静的との違い

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

 

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

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

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

[PR] Webデザインで副業する方法とは

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では初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

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