特定の要素だけスタイルを変える!jQueryでCSSを追加・変更する方法【初心者向け】

プログラミング初心者向けに、jQueryでCSSを追加や変更する方法を解説しています。jQueryを使えば、何か動きをした時に特定の要素のスタイルを変えることが可能です。Webサイトの表現の幅が広がるので知っておくと良いでしょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのライブラリであるjQueryでCSSを変更する書き方を解説しています。

jQueryを使えば、何か動作をした時に色を変えたり、サイズを変えるなどCSSの変更をすることができます。CSS以外での変更方法も覚えておくと良いでしょう。

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

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

CSSメソッドとは

jQueryでCSSを操作するためのメソッドがCSSメソッドです。

CSSメソッドを利用することでボタンを押すなどの、特定の動作をした時に動的にCSSを変更することができます。

そのため、よりユーザビリティの高いページを作成することができます。

またCSSを操作するので、CSSがわかっていれば簡単に書くことができるので、jQuery初心者の方でも簡単に実行することができます。

 

大石ゆかり

jQueryで特定の要素にCSSを追加したり、変更したりすることは出来ますか?

田島悠介

もちろん。cssメソッドを使うんだよ!動作のサンプルとして良く使われてるね。

大石ゆかり

セレクターをドット(.)でつなげて、メソッドを書くんですよね。

田島悠介

そうそう。サンプルでは、1つずつCSSを変更するけど、まとめて指定することも出来るよ。さっそく書いてみよう!

 

CSSメソッドの書き方

CSSメソッドの書き方を紹介します。

$(‘セレクタ’).css('プロパティ','値');

セレクタはクラスやIDを指定するものです。

プロパティは’color’や’font-size’などのCSSのプロパティと同じもの入ります。

値はプロパティに対応する値を入れます。例えば’color’なら’red’や’green’など。’font-size’なら’20px’などです。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

それでは実際にCSSメソッドを書いてみましょう。今回は特定の要素のfont-sizeを大きく変更してみたいと思います。

HTML部分からコードを書いていきましょう。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script>
      $(function() {
        $(".big").css("font-size", "50px");
      });
    </script>
  </head>
  <body>
    <ul>
      <li class="big">big</li>
      <li>small</li>
      <li class="big">big</li>
      <li>small</li>
    </ul>
  </body>
</html>

以下のように表示されていれば完了です。

 

まとめ

今回はCSSメソッドについて解説していきました。

jQueryでCSSを簡単に変更できるということが分かっていただけたでしょうか。このメソッドは実際のWebデザインの現場でも頻繁に使用されています。是非身につけるようにしましょう。

 

大石ゆかり

CSSを変更することが出来ました!ただ、1個ずつじゃなくて、ある程度まとめて指定したい場合とかは、どうしたらいいでしょうか?

田島悠介

ちゃんと、まとめて指定する書き方も用意されてるんだよ。

大石ゆかり

同じCSSメソッドの中に書けますか?

田島悠介

もちろん。css({‘color’ : ‘red’ , ‘font-weight’ : ‘bold’});こういう感じなんだ。オブジェクトになってるよね。

 

[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。