デザイン・プログラミングなど

簡単スッキリ!jQueryでCSSを変更・追加操作をする方法【jQueryの基本的な書き方】

【簡単スッキリ】jQueryでCSSを追加や変更の操作をする方法【jQueryの基本的な書き方が分かります】
こがねさん
こがねさん

「イマイチjQueryの書き方がスッキリ理解できない。」

「jQueryプラグインをカスタマイズしたい。」

「jQueryの基本的な書き方を知りたい。」

本記事ではそんな方へ向けて、基本的なjQueryの書き方の第一歩として、

jQueryでCSSを変更・追加などの操作をする為の書き方を解説しています。

「jQueryを使いこなしたい」「新たに覚えたい」「忘れたので確認したい」っといった方は是非参考にご覧ください。

jQueryのセレクターの基本的な書き方

CSSと同じ要領で命令できる

jqueryはCSSと同じ要領で命令できる
ポイント

jQueryでCSSセレクタでの命令は、
CSS【.sample strong { color : #ff0000; }】

jQuery【$(“.sample strong”).css(“color”, “#ff0000”);】

CSSの指定と同じ要領でセレクターを使い、指定を適用する事ができます。

画像の①の部分にセレクターを、②の部分にCSSの命令を書きます。

CSSでの要素指定と命令で、例えば

.sample strong { color : #ff0000; }

と書く場合、jQueryでは

$(“.sample strong”).css(“color”, “#ff0000”);

と書きます。

idセレクターなら、
「$(“#ID名”)~」
例:「$(“#sample”)~」

nth-child等の疑似クラスは、
「$(“E:nth-child(n)”)~」
例:「$(“p:nth-child(even)”)~」

属性セレクターは、
「$(“[属性名]”)~」
「$(“[type=’text’]”)~」

と書きます。

これで、jQueryのスクリプトでCSSの命令を上書きし、CSSを変更、追加の操作をする事ができます。

 

サンプル – jQueryのスクリプトでCSSを追加する

See the Pen
ydqOjO
by koganesan (@koganesan)
on CodePen.

(※スマホでご覧の方は、デモ右上のロゴマークをクリックしたリンク先より確認していただく事ができます。)

サンプルをつくってみました。

中身はシンプルにjQueryでCSSを追加する命令です。

ボタンをクリックする事でスクリプトが実行される様にしています。

右上にある「スクリプトの実行ボタン」をポチッと押して試してみてください。

ボタンをクリックすると、テキストの太字部分が赤色になるCSSが、jQueryのスクリプトを使って実行されます。

 

jQuery独自セレクターも使って命令できる

jQueryの独自セレクター
$(“要素:セレクター”)指定の内容
$(“p:first”)指定した要素の「最初」の要素
$(“p:last”)指定した要素の「最後」の要素
$(“p:even”)指定した要素の「偶数番目」の要素
$(“p:odd”)指定した要素の「奇数」の要素
$(“p:eq(3)”)指定した「eq()番目」の要素(例なら3番目)
$(“p:lt(番号)”)指定した要素の「番号より前」の要素
$(“p:gt(番号)”)指定した要素の「番号より後」の要素
$(“:header”)h1~h6の要素

jQueryでは、CSSにはない独自のjQueryセレクターを使って命令をする事もできます。

CSSのセレクタである程度事足りそうですが、上記セレクタを頭に入れておけば、より自在にjQueryでCSSを操る事が可能になります。

 

HTML、CSSを操作するjQueryの命令をもう少し詳しく

jQueryのHTML・CSSを操作する命令一覧と使い方【サンプル付きで瞬時にわかる!】
jQueryのHTML・CSSを操作する命令一覧と使い方【サンプル付きで瞬時にわかる!】jQueryのHTML・CSSを操作する命令一覧や、基本的な使い方が分かる記事をお探しですか?本記事ではわかりやすい実行サンプル付きで、jQueryの命令一覧と基本的な使い方を解説しています。書き方の確認や使い方の勉強用としてご覧ください。...

jQueryを使ってHTML・CSSの追加や変更などの操作をする命令の使い方を、もう少し詳しく解説した記事をつくってみました。

jQueryのHTML・CSSを操作する命令の一覧も合わせて掲載しています。

もう少し詳しく知りたい方は是非参考にご覧ください!

 

jQueryでCSSを変更操作をする方法 – まとめ

jQueryでCSSを変更操作をする方法 - まとめ

jQueryの基本的な書き方の第一歩。

jQueryでCSSセレクターを使って命令する書き方をまとめみました。

新たに勉強しはじめた方や、忘れた時の備忘録としてご参考にしていただければ幸いです。

 

jQuery入門 - どうやって導入するの?初心者でもできる使い方と準備方法。
jQuery入門 - どうやって導入するの?初心者でもできる使い方と準備方法。jQueryってどうやって使うの?Webサイトをスタイリッシュに動かすJavaScriptライブラリ「jQuery」。初期設定の方法をどんな方でも分かる備忘録としてまとめています。jqueryの初期設定の方法を知りたい。忘れたので確認したい。Webサイトに動きを付けたい。そんな方は是非参考にご覧ください。...
jQueryのHTML・CSSを操作する命令一覧と使い方【サンプル付きで瞬時にわかる!】
jQueryのHTML・CSSを操作する命令一覧と使い方【サンプル付きで瞬時にわかる!】jQueryのHTML・CSSを操作する命令一覧や、基本的な使い方が分かる記事をお探しですか?本記事ではわかりやすい実行サンプル付きで、jQueryの命令一覧と基本的な使い方を解説しています。書き方の確認や使い方の勉強用としてご覧ください。...
【jQuery】まとめて指定「メソッドチェーン」の書き方のアドバイス【分かりやすいデモサンプル付き】
jQuery - まとめて指定「メソッドチェーン」の書き方のアドバイス。分かりやすいデモサンプル付きjQuery(ジェイクエリー)で複数の命令をまとめて記述する「メソッドチェーン」の書き方をお探しですか?本記事ではサンプル付きで分かりやすくjQueryのメソッドチェーンの書き方について解説しています。書き方を忘れてしまった時の確認用として、勉強中の方の参考としてご活用ください。...
プログラミングなんて自分にできるの?そんな方はスクールの無料体験がオススメ。
こがねさん
こがねさん

「Webデザインやプログラミングに興味はあるんだけど、本を読んでてもちんぷんかんぷんでできる気がしないゾ…。」

AIソルトくん
AIソルトくん
最初はプログラミングスクールの力を借りるのも1つの選択肢だよ。

僕もそうでしたが、Webデザインやプログラミングは、最初の基礎を身につけるまでが本当に一番大変です

ただ、キチンとした基礎を身につける事がれば、あとは独学でも様々な言語に手を広げていく事ができます

もし独学で苦戦しているなら、最初はスクールの力を借りるのも1つの選択肢です。

「短期間でプログラミングスキルを身に付けたい。」
「しっかりとしたプログラミングの基礎を勉強したい。」
「一緒に切磋琢磨できるプログラミング仲間が欲しい。」
「スキルを活かした場所や時間にとらわれない新しい時代の生き方をしたい。」

そんな方は最初に短期間スクールで学んでみる事もオススメです。

もちろん今の時代、YoutubeやWebに無料の有益な情報もたくさんあるので、しっかりとした目標を見定めて勉強すれば独学も不可能ではないです。
ただ、ネットは有益な情報もあれば微妙な情報も混在しています。

「余計な回り道を省いて、手っ取り早くしっかりとしたスキルを身に着けたい。」

そういった方は、実績のあるオンラインスクールを一度体験してみるという方法もあります。

プログラミングのオンラインスクールも探せば色々選択肢があります。

その中でもTechAcademyは、日本e-Learning大賞プログラミング教育特別部門賞の受賞実績があり、今なら無料体験コースも用意されています。

独学で行きづまったり、モチベーションが保てず挫折した経験のある方は、とりあえずTechAcademyの無料コースを体験してみると、プログラミング学習の行きづまりを解消すると共に、楽しさや将来への道が大きく開ける可能性があります。

無料コースを試してみてやめるもよし、手応えを感じれば、まずはその勢いで基礎を固める事を目指してみてください。
そうする事で様々なプログラミング言語の習得の難易度も一気に下がります。

奪われないし裏切らないスキルは、きっとあなたの人生の助けになります。

関連記事