0ユーザーの方の操作に応じて、Webページ内の表示や動きを制御するホームページは、今ではよく見受けられます。それらを実現している要素は「jQuery&CSS」です!今回は、jQueryでCSSのスタイル定義を追加・変更・削除する方法をご紹介したいと思います。この記事の目次[基本]jQueryでCSSを操作する(主な)2つの方法[方法1]特定の要素のCSSのスタイル定義を追加・更新・削除する方法CSSのスタイル定義を「1種類だけ」追加するならプロパティと値をカンマ区切りにするCSSのスタイル定義を「複数」追加するならプロパティ&値の組をカンマ区切りにするCSSのスタイル定義を削除するなら、そのプロパティの値の欄は「空」にする[方法2]クラス名編集用の各メソッドを使って、特定の要素のCSSのスタイル定義を追加・更新・削除する方法addClassメソッド〜特定の要素にクラス名を追加する〜removeClassメソッド〜特定の要素のクラス名を削除する〜toggleClassメソッド〜特定の要素のクラス名を追加したり削除したりする〜[基本]jQueryでCSSを操作する(主な)2つの方法jQueryでCSSのスタイル定義を追加・更新・削除する方法は、主に2つあります。「このクラス名の要素だけ、font-weightの定義を削除する」など、個々のスタイル定義を追加・更新・削除することができます。スタイル定義の追加・更新・削除の種類がごくわずかな場合、例えば「このページの数カ所だけ!」のような場合は楽な場合も多くあります。一方で、スタイル定義の追加・更新・削除のエリアが複数ページや広い範囲に及ぶ場合ほど、メンテナンス性に欠ける場合があるのが難点です。2つ目が「jQueryの記述内でCSSのスタイル定義に関係するクラス名を追加する」という方法です(^^)1つ目の例では「CSSのスタイル定義」を追加する例を紹介しましたが、2つ目の例で追加するのは「CSSのクラス名」です。表現したいCSS定義をもったクラス名を、あらかじめCSSファイルで定義しておく方法です。そのようにすることで「スタイル定義はCSSでやる!」という風に、ファイルの種類によって役割を分業させることができます。スタイル定義の追加・更新・削除のエリアが多岐に及ぶ場合にも、この方法が適していると考えられます。一方で「わざわざCSSにクラス名を書くほどじゃない」のように該当箇所が少ない場合は、1つ目の「CSSのスタイル定義を追加する方法」が向いていると言えるでしょう。このあと、2つの方法それぞれの具体的なjQueryの記述方法をご紹介します。̄)ページの先頭へ戻る[方法1]cssメソッドを使って、特定の要素のCSSのスタイル定義を追加・更新・削除する方法CSSのスタイル定義を「1種類だけ」追加するならプロパティと値をカンマ区切りにするまずは、cssメソッドを用いて「CSSのスタイル定義を追加する方法」からご紹介します。スタイル定義を1種類だけ追加したい場合は、そのプロパティを値の組をカンマ区切りで表現します。{$('.className').css('property01','value01');});例えば、文字の色を赤くしたい場合は、コレでいけるハズです。{$('.className').css('color','red');});CSSのスタイル定義を「複数」追加するならプロパティ&値の組をカンマ区切りにするスタイル定義を複数の種類追加する場合は、これが基本となります。{$('.className').css({'property01':'value01','property02':'value02'});});例えば、文字を青にして、文字の太さをboldにするなら、コレでいかがでしょうか。{$('.className').css({'color':'blue','font-weight':'bold'});});CSSのスタイル定義を削除するなら、そのプロパティの値の欄は「空」にするスタイル定義を追加も更新もせず、ただ「いろいろ追加や更新されたスタイル定義を削除したい」という場合も、時々あるかと思います。その場合は、削除して初期状態に戻したいスタイル定義のプロパティに対応する値を「空(カラ)」にしてみましょう。{$('.className').css('property01','');});文字の色を初期状態に戻す場合は、コレでいけるハズです。{$('.className').css('color','');});ページの先頭へ戻る[方法2]クラス名編集用の各メソッドを使って、特定の要素のCSSのスタイル定義を追加・更新・削除する方法addClassメソッド〜特定の要素にクラス名を追加する〜次に、「CSSのスタイル定義に関係するクラス名を追加する方法」のご紹介です。addClassメソッドから。こちらのコードで、特定の要素に[cnAdd]というクラス名を追加できます。「色はコレで、幅は@@pxで......」と記述しておけば、jQueryファイル内でスタイル定義を書かなくても済みます。removeClassメソッド〜特定の要素のクラス名を削除する〜一方で、クラス名を削除することでCSSのスタイル定義を操作したい場合はremoveClassメソッドです。これによって、特定の要素から[cnRemove]というクラス名が削除されるので、そちらで定義したぶんのスタイル定義が失われます。{$('.className').removeClass("cnRemove");});このremoveClassメソッドですが、対象となる要素が[cnRemove]というクラス名を持っていない場合、このイベント実行時には特に変化が起こらないことになります。「クラス名が付いている要素と、付いていない要素とがあるから、一度それらをリセットする必要がある」という場合は、removeClassメソッドの処理を行っておく意味はあるかもしれません。toggleClassメソッド〜特定の要素のクラス名を追加したり削除したりする〜最後はtoggleClassメソッドです。こちらは、処理が実行されるたびに、クラス名が付いたり、取れたりする処理を行う場合に有効です。記述としては、こんな感じです。{$('.className').toggleClass('cnToggle');});これにより、ボタン的な要素をクリックorタップするたびに[cnToggle]のクラスが付いたり取れたりします。スマートフォンのメニューボタン(ハンバーガーメニューに限らず)に使用するなどの応用ができそうです。妙高Web屋こちらの記事に感想をお寄せくださいこちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。0Web制作CSS3jQuery[jQuery]addClassメソッド[jQuery]cssメソッド[jQuery]removeClassメソッド[jQuery]toggleClassメソッドLINE@始めました!妙高Web屋ではこのたび、LINE@(ラインアット)を始めることとなりました。企業やお店のWeb担当者さまへ向けて、ホームページの運営・管理・更新に関する情報を発信していきます。情報を購読できる「友だち」へのご登録は、下記のボタンよりお願いいたします。新潟県妙高市を拠点にホームページ制作・広告制作に励んでいます。新潟県妙高市を拠点に、ホームページや紙の広告を制作しております。詳しいご紹介やお仕事に関することは、下記のリンクからご覧いただけます。関連する記事2017/12/23[Web制作]スマートフォン用サイトのデザインの必要性【ホントは公表したくないホームページ制作】2019/3/28[Web制作]見出しデザインにストライプ(斜め線)を使う方法【CSS3】2018/2/4[Web制作]【CSS】Safariの表示が他のブラウザと違う場合のCSSハック2018/2/3[Web制作]【CSS】Edgeの表示が他のブラウザと違う場合のCSSハック目的のページは見つかりましたか?お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。