JavaScriptでCSSを動的に変更する方法を現役エンジニアが解説【初心者向け】

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

目次

• 動的とは
• CSSを動的に変更する方法
• styleプロパティを使う
• jQueryを使う
• 実際に書いてみよう
• まとめ
• 執筆してくれたメンター
• CSSを学習中の方へ

そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

 

動的とは

画面上でユーザー操作をきっかけに画面が変化することを「動的」と呼びます。

例えば、ユーザーがボタンをクリックしたときに背景色が変わるような場合です。

このように、JavaScriptを使うと、ユーザーの挙動に合わせてWebページのコンテンツを変化させることができます。

今回は「JavaScriptでCSSを動的に変更する方法」を2つご紹介します。

• styleプロパティを使う
• jQueryを使う

それぞれ2つの方法を解説します。

 

CSSを動的に変更する方法

JavaScriptでHTML要素にclass名を動的付与することで、画面表示に変化を起こすことができます。

HTML

<p id="id">Hello world!</p>

JavaScript書式

documents.getElementById("id").classList.add("CSSクラス名");

※「getElementById」でHTML要素をかんたんに取得できます。

詳しくはJavaScriptでgetElementByIdを使う方法の記事で解説しています。

結果

<p id="id" class="CSSクラス名">Hello world!</p>

 

[PR] コーディングで副業する方法とは

styleプロパティを使う

事前にCSSのclassを用意しなくても、以下のようにstyle属性だけ付与できます。

HTML

<p id="id">Hello world!</p>

JavaScript書式

documents.getElementById("id").style.fontSize = "20px" ;

結果

<p id="id" style="font-size: 20px">Hello world!</p>

 

jQueryを使う

jQueryを使うと、もっと簡単にCSSを適用できます。

class名を動的に付与する場合

jQuery書式

$("id").addclass("className");

styleを直接適用したい場合

jQuery書式

// 各設定値をシングルクォートで囲うことに注意

$("id").css({ 'color' : 'red' , 'font-size' : '20px' } );

 

jQueryについてもっと詳しく知りたい！という方は今さら聞けない！jQueryとは記事が参考になります。

 

実際に書いてみよう

ボタンを押すと、div領域の背景色が付与され、テキストボックスの文字に変化が起こるプログラムを書いてみましょう。

html

<div id="dispArea" class="guideArea">
  <p id="guide">後からデザインを変更可能です</p>
  <input type="text" id="textBox" value="こんにちは">
</div>
<button type="button" onclick="cssTest()">CSS変更</button>

javascript

function cssTest() {
  // javascriptでdiv領域にCSSを付与
  document.getElementById("dispArea").classList.add("addColor");
  // jQueryでテキストボックスにCSSを付与
  $("#textBox").css( { 'font-size' : '18px' , 'color' : 'red' });
}

css

/* 静的付与済み */
.guideArea {
  margin-bottom: 10px;
  padding: 5px;
  border: solid 2px;
  width: 300px;
}

/* 背景色を付与 */
.addColor {
  background-color: #d5ecce ;
}

ボタン押下前イメージ

ボタン押下後イメージ

CSS変更ボタンを押下すると、CSSが動的に変更され、背景色とテキストボックスのフォントサイズ、色が付与されています。

 

まとめ

JavaScriptを使うことで、ユーザー操作に合わせてCSSを変更することができました。

操作していて楽しいページ作りにぜひ活用してください。

 

執筆してくれたメンター

寺谷文宏 Webアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバサイドまで総合的な開発を得意としています。テックアカデミーではフロントエンド、Javaコースを担当。

 

 

CSSを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

CSSを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！