Web制作のコーディングでは、class属性でスタイルを管理します。class属性は基本的にHTMLに記述しますが、「初めはclassを措定せず、特定の条件下でclassを追加する」という実装を行うこともよくあります。
そのようなときは、jQueryのaddClass()メソッドを活用すると、簡単にclassの追加を行えます。
この記事では、addClass()メソッドの使い方を解説します。基本的な使い方や応用、実装例が理解できる内容となっているので、ぜひ学習にお役立てください。
- addClass()とは
- addClass()の使い方
- addClass()の応用
- addClass()を用いた実装例
- addClass()に関連するメソッド
プログラミング学習でこのような経験はありませんか？ これらの悩みは、学習環境を整えることで全て解決することができます。 ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。 条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。 少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
ただし、無料サービスの提供には参加者の数に制限があります。
目次
addClass()とは
addClass()は、任意の要素にclassを追加するjQueryメソッドです。
addClass()を使用すれば、特定の条件下でclassを追加する実装が可能です。classの指定は基本的にHTMLで行いますが、HTML単体ではclassを後から追加したり削除したりすることはできません。初めはclassを指定せず、あとでclassを追加したいときにaddClass()を使用します。
具体的な使い方は次の項目で詳しく解説します。
addClass()の使い方
基本的な構文
addClass()を使用するときの構文は以下のとおりです。
$(function () {
$('任意の要素').addClass('追加するクラス名');
});jQueryで処理を記述するときは、$(function(){})という記述を忘れないようにしましょう。この記述を忘れると、処理が正常に動作しない場合があります。
addClass()の記述で気をつけるポイントは以下の3つです。
- かっこ内の要素、クラス名はシングルクォーテーション(‘’)で囲む
- $()の中にclassを記述するときはドット(.)をつける
- addClass()にclassを記述するときはドットをつけない
これらの記述ルールを守らないと、addClass()が効かない原因にもなるので気をつけましょう。
クラスを追加する
実際にクラスを追加した例を見てみましょう。
See the Pen addClass() 基本的な使い方 by ZeroPlus (@zeroplus-programming) on CodePen.
HTMLの記述ではp要素にclassを指定していませんが、出力結果では文字の色が赤くなっています。
addClass()の応用
addClass()はただclassを追加するだけでなく、以下のこともできます。
- 複数のclassを追加する
- 関数を指定する
複数のclassを追加する
addClass()では、複数のclassを追加することも可能です。
かっこの中に複数のclassを記述すれば、複数のclassを追加できます。class名は半角スペースで区切って記述しましょう。
See the Pen addClass() class追加 by ZeroPlus (@zeroplus-programming) on CodePen.
関数を指定する
addClass()は、classだけでなく関数を指定することもできます。
関数を指定すれば、条件分岐のような処理を行うときにもclassを追加できます。
関数を指定するときの記述は以下のとおりです。
$(function () {
$('任意の要素').addClass(function(引数名 引数名));
});以下の例は、「同じ要素の中から、classを持っていない要素にだけclassを追加する」処理です。
See the Pen addClass() 関数 by ZeroPlus (@zeroplus-programming) on CodePen.
この実装でポイントとなる記述は、以下の2つです。
- index…HTML要素のインデックス番号を取得する
- myclass…その要素がすでに持っているclass名
しかし、3つ目の要素にはclassを指定していません。
そこで、if文を使って「p要素がclassを持っていなければ、color-greenというclassを追加する」という処理を行います。!myclassの記述が「classを持っていないとき」の意味となります。
これにより、3番目のp要素である「緑の文字」テキストにclassが追加され、文字色が緑色になります。
addClass()を用いた実装例
addClass()を用いた実装例として、以下の動きを解説します。
- テキストをクリックしたときに文字色を変える
- テキストをワイプインで表示する
- スクロールイベント
テキストをクリックしたときに文字色を変える
テキストをクリックしたときに文字色を変える動きは、よく目にするのではないでしょうか。
クリックによって文字色を変更する実装を行うときの記述は、以下のとおりです。
See the Pen addClass() クリックでclassを追加 by ZeroPlus (@zeroplus-programming) on CodePen.
テキストをワイプインで表示する
テキストをワイプインで表示させる実装は、キービジュアルをより目立たせる方法として採用されることが多い実装です。ワイプインとは、要素を流れるように出現させるアニメーションのことを指します。
ワイプインを実装する記述は以下のとおりです。
See the Pen hasClass() wipe-in by ZeroPlus (@zeroplus-programming) on CodePen.
スクロールイベント
画面をスクロールしたときにイベントを発生させる実装も、よく使われる演出のひとつです。
今回はスクロールで背景色が消える実装を行います。記述は以下のとおりです。
See the Pen addClass() スクロールイベント by ZeroPlus (@zeroplus-programming) on CodePen.
addClass()に関連するメソッド
addClass()に関連するメソッドは以下のとおりです。
- removeClass()
- toggleClass()
- hasClass()
それぞれの違いは以下のとおりです。
| メソッド | 意味 |
| removeClass() | classを削除する |
| toggleClass() | classを追加したり削除したりする |
| hasClass() | classの有無を調べる |
これらのメソッドの構文は基本的にaddClass()と同様、以下のように記述します。
$(function () {
$('任意の要素').〇〇Class('追加するクラス名');
});classを削除するremoveClass()
removeClass()はクラスを削除するメソッドです。
記述例と出力結果を見てみましょう。
See the Pen removeClass() by ZeroPlus (@zeroplus-programming) on CodePen.
color-redというクラスだけが削除され、文字色がついていない状態となっています。
classを追加したり削除したりするtoggleClass()
toggleClass()はクラスを追加したり削除したりするメソッドです。
クリックするとclassのつけ外しを行う処理を例としてみてみましょう。
See the Pen toggleClass() by ZeroPlus (@zeroplus-programming) on CodePen.
classの有無を調べるhasClass()
hasClass()はclassの有無を取得するメソッドです。
クリックした要素にclassが指定されている場合にテキストが変化する処理を例に見ていきましょう。
See the Pen jQuery hasClass()2 by ZeroPlus (@zeroplus-programming) on CodePen.
hasClass()については、こちらの記事で詳しく解説しています。併せてお読みください。
まとめ
addClass()は任意の要素にclassを追加するjQueryメソッドです。ひとつのclassだけでなく、複数classの追加や関数の指定も可能です。
addClass()まとめ
- classを追加するjQueryメソッド
- 複数classの追加や関数の指定も可能
- アニメーションをつける実装でよく使う
- removeClass()やtoggleClass()と組み合わせて使用することも多い
addClass()はアニメーションを追加するときによく使われるメソッドです。Webサイトをおしゃれにするためにも、ぜひ使いこなせるようになりましょう！
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
