WEBデザイン・プログラミング関連の
情報発信を手掛ける STAND4U

HOME > WEB制作 > javascript > jQuery｢css()｣でCSSのスタイルを取得・変更する

jQuery｢css()｣でCSSのスタイルを取得・変更する

［景品表示法に基づく表記］ 本コンテンツにはプロモーションが含まれています。

あわせて読みたい記事
【2021年】現役プロが比較 ｢WEBデザインスクール12校｣おすすめランキング！

現役プロが比較 ｢WEBデザインスクール12校｣おすすめランキング！

WEBデザインスクール選びで絶対失敗したくない！プロの目線でおすすめを教えて！

jQueryのメソッド「.css()」は、CSSスタイルの取得・設定ができるメソッド。

今回は、jQueryの「CSSスタイルの取得・設定」できるメソッド「.css()」について、その使い方をサンプルを交えて解説しよう。

.css()の機能とは？

.css()の機能

.css()は、指定した要素の「CSSスタイルを取得・変更」できるメソッド。

例えば$("p").css("display","none");とした場合、pタグに"display","none"が適用され非表示にする事ができる。

.css()の構文

CSSスタイルを変更する構文

$("セレクタ").css("スタイル名","値");

このように記述し、第１引数で「CSSのスタイル名」、第２引数で「CSSスタイルの値」を記述する事で、指定したCSSスタイルを変更する事ができる。

CSSスタイルを取得する場合はvar hoge = $("p").css("color");のように第１引数のみ記述して、任意の変数に格納する事でCSSスタイルの値を取得できる。

jQueryでCSSスタイルを変更する例

HTML
<div>
 <p>P要素の色が変わる</p>
</div>
<p>色は変わらない</p>
jQuery
$(function(){
 $("div p").css("color","orange");
});

ブラウザ表示

P要素の色が変わる

色は変わらない

↓↓↓

P要素の色が変わる

色は変わらない

このような形で$("div p")のCSSスタイルcolorをorengeに変更する事ができる。

jQueryでCSSスタイルの値を取得する例

次は、CSSスタイルの値を取得する例をみてみよう。

HTML
<div>
 <p>色の値を取得する</p>
</div>
CSS
div p{
color:#ff9900;
}
jQuery
$(function(){
 var hoge = $("div p").css("color");
 console.log(hoge)
});

これは、変数 hogeに$("div p")のcolorの値を格納してconsole.logで出力する例だ。

consoleの表示

"rgb(255, 153, 0)"

取得した色の値は"rgb(255, 153, 0)"の形式で取得される点もおさえておこう。

以上、jQueryでCSSのスタイルを取得・変更する方法でした。

その他のjQueryメソッドについて確認したい方は、jQueryメソッドを一覧で解説したこちらの記事を確認しておこう！

jQueryの「メソッド一覧」と使い方

▶ jQueryの「メソッド一覧」と使い方

jQueryの沢山あるメソッドの一覧を解説してほしいjQueryのメソッド一覧を確認して、jQueryを自由に操れるよ…

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント
  • 学習スタイルが自分に合っているか？
  • 低価格でコスパの良い学習料金か？
  • 講師に質問しやすい環境か？
  • 無料体験できるスクールか？

数あるスクールの中から、実際に受講してわかった事や現役プロならでは目線で厳選・比較したこちらの記事「現役プロ比較！短期 ｢WEBデザインスクール12校｣おすすめランキング！」を参考に自分に合ったスクールを探そう↓

現役プロ比較！短期 ｢WEBデザインスクール12校｣おすすめランキング！

▶ 現役プロ比較！短期 ｢WEBデザインスクール12校｣おすすめランキング！

現役デザイナーが実際にスクールを２校受講した経験を元に徹底比較調査した、WEBデザインスクールランキング！まず最初に実…

※当記事の掲載内容は執筆現在の個人の見解・調査によるもので、動作・サービス等を保証するものではありません。最新情報は各公式サイトでご確認頂き、購入・契約・データ作成等はご自身の判断・責任でお願いします。 免責事項

関連記事

WEBデザイン動画講座
YouTubeで学ぶWEBデザイン Uチャンネル Powerd by STAND4U
超短期1日集中 オンラインWEBデザインマンツーマン講座

ナビゲーション

この記事を書いた人

編集長

WEBデザイン・グラフィックデザイン歴：約18年、HTMLコーディング、jquery、wordpress、イラストなど本業とし、WEBデザインコンサル・プログラミング・ライティング等にも勤しんでいます

プロフィールはこちら

WEBデザイン作品集はこちら

Twitter @stand_4u_ をフォロー

新着記事