ボタンを押したときに文字色や背景色を変えたいものの、jQueryの.css()へ何を渡せばよいか分からないことがありますよね。
.css()は、CSSの値を取得したり、選択した要素のインラインstyleを変更したりするメソッドです。1つの値は.css('color', '#fff')、複数の値はオブジェクト形式で指定します。
先に結論：その場で計算した値を入れるなら
.css()、あらかじめ決まったデザインを切り替えるならaddClass()やtoggleClass()を使うと管理しやすくなります。
jQueryのcss()でできること
| 目的 | 書き方 |
|---|---|
| 値を1つ取得 | $('.card').css('color') |
| 値を1つ設定 | $('.card').css('color', '#fff') |
| 複数の値を設定 | $('.card').css({ color: '#fff', padding: '24px' }) |
| 直接設定した値を解除 | $('.card').css('color', '') |
設定した値は、対象要素のstyle属性へ追加されます。CSSファイル自体を書き換えるわけではなく、ブラウザに表示されているHTMLの状態を変更します。
$('.card').css('background-color', '#1676d2');実行後のHTMLは、次のような状態になります。
<div class="card" style="background-color: rgb(22, 118, 210);">
カードの内容
</div>CSSの値を取得する
引数を1つだけ渡すと、最初に一致した要素の計算済みスタイルを取得できます。
const color = $('.card').css('background-color');
console.log(color); // 例: rgb(248, 251, 255)CSSファイルに16進数で指定していても、取得結果がrgb()になる場合があります。計算済みスタイルはブラウザによって表記が変わるため、文字列が完全一致する前提で判定しないほうが安全です。
複数の値をまとめて取得する
const styles = $('.card').css([
'color',
'background-color',
'padding-top',
]);
console.log(styles);配列を渡すと、プロパティ名と値の組み合わせを持つオブジェクトが返ります。余白や枠線を調べるときは、marginのような一括指定よりmargin-topなど個別のプロパティを取得すると結果が安定します。
CSSを1つ変更する
プロパティ名と値の2つを渡すと、一致したすべての要素へ同じstyleが設定されます。
$('.card').css('color', '#ffffff');
$('.card').css('padding', '24px');ハイフンを使う'background-color'と、JavaScript風の'backgroundColor'はどちらも指定できます。記事内で書き方を統一すると読みやすくなります。
複数のCSSをまとめて変更する
複数のプロパティは、波括弧を使うオブジェクト形式でまとめます。プロパティと値の間はコロン、各組み合わせの間はカンマです。
$('.card').css({
backgroundColor: '#1676d2',
color: '#ffffff',
borderColor: '#0f5da6',
borderRadius: '28px',
});ハイフンを含むプロパティ名をそのまま使う場合は、'background-color'のようにクォーテーションで囲んでください。
実例：カードの見た目を切り替える
左のカードは.css()で直接変更し、右のカードはclassで切り替えます。最初はどちらも同じ白いデザインです。
index.htmlにプレビューカードと操作ボタンを用意します。
<article class="sample-card" id="css-card">
<span class="tag">おすすめ</span>
<h2>はじめてのWeb制作</h2>
<p>HTML・CSS・jQueryを順番に学べます。</p>
</article>
<button type="button" id="apply-css">青いデザインに変更</button>
<button type="button" id="reset-css">元に戻す</button>
<p id="css-result" aria-live="polite">
背景色：rgb(248, 251, 255)
</p>style.cssでは初期状態と、classで使う強調状態を定義します。
.sample-card {
min-height: 180px;
padding: 24px;
border: 2px solid #d3dfeb;
border-radius: 14px;
background-color: #f8fbff;
color: #18304a;
transition: background-color 0.2s, color 0.2s;
}
.sample-card.is-highlighted {
border-color: #f0a000;
background: #fff7dc;
color: #624300;
transform: translateY(-4px);
}青いボタンを押すと、4つの値をまとめて変更します。変更後の背景色も取得して結果欄へ表示します。
function updateCssResult() {
window.setTimeout(function () {
const color = $('#css-card').css('background-color');
$('#css-result').text(`背景色：${color}`);
}, 250);
}
$('#apply-css').on('click', function () {
$('#css-card').css({
backgroundColor: '#1676d2',
color: '#ffffff',
borderColor: '#0f5da6',
borderRadius: '28px',
});
updateCssResult();
});画像では、左のカードだけが青色と大きな角丸へ変わりました。右側のclass操作とは独立しているため、必要な値だけを個別に変更できます。
直接設定したCSSを解除する
値へ空文字を渡すと、jQueryやstyle属性で直接設定したプロパティを取り除けます。その後はCSSファイルの指定が再び適用されます。
$('#css-card').css({
backgroundColor: '',
color: '',
borderColor: '',
borderRadius: '',
});この方法でCSSファイル内のルール自体を削除することはできません。解除後の色や余白は、CSSファイルの通常ルールや継承によって決まります。
css()とclass操作を使い分ける
ユーザーが選んだ色、ドラッグで計算した位置、APIから受け取ったサイズなど、実行時に値が決まる場合は.css()が便利です。
選択中・エラー・開閉中など、あらかじめ決まった状態ならCSSファイルへclassを用意します。メディアクエリや:focus-visibleも同じCSS側で管理できるため、レスポンシブ対応とアクセシビリティを保ちやすくなります。
$('#toggle-class').on('click', function () {
const isHighlighted = $('#class-card')
.toggleClass('is-highlighted')
.hasClass('is-highlighted');
$('#class-result').text(
`class：${isHighlighted ? 'is-highlighted' : '通常'}`
);
});単位は省略せずに指定する
jQuery 4では、数値を渡したときに自動でpxが付くプロパティが限定されています。バージョン差による動作の違いを避けるため、単位が必要な値は文字列で明示しましょう。
$('.card').css('padding', '24px');
$('.card').css('font-size', '1.125rem');
$('.card').css('line-height', '1.7');line-heightのように単位なしで使える値は文字列の'1.7'で問題ありません。幅、余白、文字サイズなどにはpx、rem、%など目的に合う単位を付けます。
現在値を基準に増減する
+=や-=を使うと、現在の値を基準に増減できます。
$('.card').css('padding-left', '+=8');クリックのたびに増やすUIでは、上限を決めないと画面からはみ出します。デザイン状態を切り替えるだけならclassのほうが安全です。
CSSカスタムプロパティを変更する
サイト全体で色や余白をCSS変数として管理している場合は、プロパティ名をそのまま渡します。
$('.card').css('--card-accent', '#1676d2');
const accent = $('.card').css('--card-accent');--card-accentはcamelCaseへ変換せず、ハイフンを含む名前のまま記述してください。
css()が動かないときの確認項目
- セレクタがHTMLのclass・idと一致しているか
- プロパティ名と値の間がカンマになっているか
- 複数指定で波括弧、コロン、カンマが揃っているか
- 必要な値へ
pxやremを付けているか - jQuery本体を
script.jsより先に読み込んでいるか !importantへ頼らずclassで優先度を整理できないか
.css('color', 'red !important')は期待どおりに動きません。強い指定が必要な状況では、まずCSSセレクタの詳細度や読み込み順を見直し、状態classへスタイルをまとめましょう。
関連するjQueryの使い方
class操作、マウス操作、表示切り替えを組み合わせる場合は、次の記事も参考にしてください。
まとめ
jQueryの.css()は、CSSの取得・追加・変更・解除に使えます。1つの設定はプロパティ名と値、複数の設定はオブジェクト形式で渡します。
実行時に計算する値は.css()、再利用する見た目はclass操作を選びましょう。単位を明示し、レスポンシブやフォーカスの指定をCSS側へ残すと、保守しやすい実装になります。