jQueryでURLやパラメータを取得する
ENOWL_Nao
ENOWL（エノウル）
jQueryでクラスを追加する方法【基本から実用例まで解説！】
ENOWL_Nao
どうも、こんにちは。
Webデザイナーのなお（@ENOWL_Nao）です。
今回は、jQueryを使って、HTML要素にクラスを追加する方法について解説します。
クラスの追加は、見た目の変更や動きの制御に便利な手段です。この記事では、基本の .addClass() の使い方から、クリックイベントとの組み合わせ、複数クラスの追加まで、具体的なコードとともに紹介していきます！
ぜひ最後まで読んでみてくださいね！
.addClass()とは？
jQueryの .addClass() メソッドを使うと、要素に新しいクラスを追加できます！
既存のクラスはそのままで、後から自由に追加が可能です。
使い方は、以下のようなコードです。
$('.hoge').addClass('monge');
これは、クラス hoge を持つ要素に monge クラスを追加しています。
読み込み時にクラスを追加する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryでクラスを追加する</title>
<style>
.monge {
color: red;
}
</style>
</head>
<body>
<p class="hoge">mongeクラスが追加されて文字が赤くなっています。</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$('.hoge').addClass('monge');
</script>
</body>
</html>
ページが読み込まれるとすぐに、.hoge 要素に monge クラスが追加されて、文字が赤くなります。
デモだとすぐに読み込まれてしまうので、分かりづらいかもしれません💦
ボタンクリックでクラスを追加する
動的な操作として、クリックイベントに組み合わせることもできます！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jqueryでクラスを追加する</title>
<style>
.monge{
color: red;
}
</style>
</head>
<body>
<p class="hoge">クラスを追加してくれ！</p>
<button class="button">俺をクリックするんだ！そしたらクラスが追加されるから！</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$('.button').on('click', function(){
$('.hoge').addClass('monge');
});
</script>
</body>
</html>
このコードでは、ボタンをクリックすると .hoge 要素に monge クラスが追加され、文字が赤くなります。
複数のクラスを一度に追加する
複数のスタイルを同時に適用したい場合は、クラス名をスペース区切りで指定します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jqueryでクラスを追加する</title>
<style>
.monge{
color: red;
}
.large {
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<p class="hoge">クラスを追加してくれ！</p>
<button class="button">俺をクリックするんだ！そしたらクラスが追加されるから！</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$('.button').on('click', function(){
$('.hoge').addClass('monge large');
});
</script>
</body>
</html>
このようにすると、赤色・大きめ・太字のスタイルがすべて適用されます。
まとめ
シンプルな操作ですが、うまく活用することで柔軟なUIの制御ができるようになります。
.addClass()を使えば、要素に簡単にクラスを追加できる- 元のクラスはそのまま、新しいクラスを付け足せる
- イベント処理と組み合わせて動的に使える
- 複数のクラスも一度に追加可能
必要に応じて、次は .removeClass() や .toggleClass() の使い方も合わせて学んでみると、より表現の幅が広がります！
気になった方は、そちらもぜひチェックしてみてくださいね！
最後まで読んでいただき、ありがとうございました！
では、また！
個人事業主さまの「Web担当」そのWebの悩み
そのWebの悩み
一人で抱え込んでいませんか？
「ちょっとここを直したい」「そろそろリニューアルしたい」…。
小さな修正から本格的な制作まで、Webに関する「どうしよう」を私が丸ごと受け止めます。難しい専門用語は使いません。
あなたの事業を支えるパートナーとして、まずは気軽にお話ししませんか？
私について
ホームページをご覧いただきありがとうございます！
なおと申します。
現在はフリーランスのWebデザイナーとして活動しています。 WebデザインからコーディングからWordPress実装まで一貫してホームページ制作を行うことができます。
