jquery css書き方

jQuery CSS書き方まとめ｜addClassやcss()を使った編集方法を解説

jQuery CSS書き方まとめ｜addClassやcss()を使った編集方法を解説

この記事では、jQueryを使って要素のCSSを操作する方法について、基本から応用まで解説します。addClassやcss()メソッドを使った書き方、複数のプロパティ変更、要素の取得方法、アニメーションとの組み合わせなど、実用的なサンプルコードを交えて詳しく説明します。

見出し1: jQueryでCSSを操作する方法

JavaScriptとjQueryの違い

JavaScriptは、Webページに動的な機能を追加するためのプログラミング言語です。一方、jQueryはJavaScriptを簡潔に記述できるようにしたライブラリです。jQueryを使うことで、少ないコード量で複雑な処理を実現できます。

  • JavaScript: ネイティブな言語、コード量が多くなる傾向がある
  • jQuery: JavaScriptライブラリ、簡潔なコードで記述できる

jQueryの導入方法

jQueryを使用するには、以下の2つの方法があります。

  1. CDN経由での読み込み
    2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  2. ダウンロードして読み込み
    3. <script src="jquery.min.js"></script>

見出し2: css()メソッドを使ったCSSの書き方

基本的な構文

css()メソッドを使うと、要素のCSSプロパティを変更できます。

<p id="target">テキスト</p>
<script>
  $(document).ready(function(){
    $("#target").css("color", "red"); 
  });
</script>

上記のコードでは、idが"target"の段落要素の文字色を赤に変更しています。

複数のプロパティの変更

複数のCSSプロパティをまとめて変更するには、オブジェクト形式で指定します。

<p id="target">テキスト</p>
<script>
  $(document).ready(function(){
    $("#target").css({
      "color": "blue", 
      "font-size": "20px"
    });
  });
</script>

CSSの値の取得

css()メソッドで引数を1つだけ指定すると、現在のCSS値を取得できます。

<p id="target" style="font-size:16px;">テキスト</p>
<script>
  $(document).ready(function(){
    var fontSize = $("#target").css("font-size");
    console.log(fontSize); // "16px"
  });
</script>

見出し3: addClass()メソッドを使ったCSSクラスの追加

addClass()メソッドの基本

addClass()メソッドを使うと、要素にCSSクラスを追加できます。

<p id="target">テキスト</p>
<style>
  .highlight {
    background-color: yellow;
  }
</style>
<script>
  $(document).ready(function(){
    $("#target").addClass("highlight");
  });
</script>

複数のクラスの追加

複数のCSSクラスを同時に追加するには、クラス名をスペース区切りで指定します。

$("#target").addClass("highlight important");

toggleClass()メソッド

toggleClass()メソッドを使うと、指定したクラスの有無に応じて、クラスの追加・削除を切り替えられます。

$("#target").toggleClass("highlight");

removeClass()メソッド

removeClass()メソッドを使うと、要素からCSSクラスを削除できます。

$("#target").removeClass("highlight");

見出し4: 要素の取得とCSS操作

idやclassを使った要素の取得

idやclassを指定して特定の要素を取得し、CSSを適用できます。

$("#target").css("color", "red"); // idが"target"の要素
$(".highlight").css("font-weight", "bold"); // classが"highlight"の要素

子要素や親要素へのアクセス

親子関係を利用して要素を取得し、CSSを操作できます。

$("#parent").children("p").css("color", "blue"); // idが"parent"の要素の子要素であるp要素
$("#child").parent().css("background-color", "#eee"); // idが"child"の要素の親要素

見出し5: アニメーションとCSS操作の組み合わせ

animate()メソッドとcss()メソッドの連携

animate()メソッドでアニメーションを実行中に、css()メソッドを使ってCSSプロパティを変化させることができます。

$("#target").animate({
  width: "200px"
}, 1000, function() {
  $(this).css("background-color", "red");
});

遅延処理とCSS操作

setTimeout()やdelay()を使ってCSS操作を遅らせることができます。

setTimeout(function() {
  $("#target").css("color", "blue");
}, 2000); // 2秒後に実行

$("#target").delay(1000).css("font-size", "24px"); // 1秒後に実行

見出し6: まとめ

この記事では、jQueryを使ったCSS操作の基本から、アニメーションとの組み合わせまで解説しました。css()メソッドやaddClass()メソッドを使いこなすことで、動的なWebページを効率的に開発できます。より複雑なCSS操作や実務で役立つテクニックについては、公式ドキュメントなどを参照してください。

参考資料

この記事に関するQA

質問 回答
css()メソッドとaddClass()メソッドの違いは何ですか？ css()メソッドはスタイル属性を直接操作するのに対し、addClass()メソッドはクラスの追加・削除を行います。スタイルを複数の要素で共有したい場合は、addClass()メソッドを使う方が効率的です。
アニメーションの実行中にCSSを変更するにはどうすればよいですか？ animate()メソッドのコールバック関数内でcss()メソッドを実行するか、delay()メソッドを使ってCSS操作を遅延させることができます。
jQueryを使ってレスポンシブなデザインを実装するにはどうすればよいですか？ ウィンドウサイズに合わせてCSSを変更する場合は、resize()メソッドを使用します。また、CSSメディアクエリとJavaScriptを組み合わせて、画面サイズに応じて異なるCSSを適用することもできます。

その他の参考記事:jquery css 取得