15:17:39TwitterFacebookはてブPocketLINEjQueryはHTMLのタグに対して使用するためJavaScriptよりもCSSに性質が近い面もあるのですが、なかでも特にCSS的な使い方ができるのがCSSメソッドです。このCSSメソッドを使用すれば、HTMLのタグに対してCSSのようにプロパティ操作ができます。それでは具体的な方法を紹介していきます。CSSメソッドを用いてスタイルを追加する方法を紹介します。サンプルコードは以下のようになります。'#f00');</body>上記のソースコードではpタグに対してCSSメソッドで色を赤に指定しています。続いて、変更のサンプルコードは以下です。'#f00');</body>追加と変更の書き方はまったく同じで、違いはもともと色が設定されているかどうかです。今回のサンプルコードではもともとpタグの色が青色になっているため、それが赤色に変更されました。次に、取得のサンプルコードです。);</body>上記のソースコードを実行すると、以下のようにコンソール出力されます。0)CSSメソッドをdivタグに対して使用し、引数にborderを設定しています。このように記述することで、divタグのborderのプロパティを取得できるようになっています。カラー情報はrgb表記になります。red、green、blueの略なのでだいたいの色はわかるかと思いますが、16進数による表記との対応表はネットでもすぐに見つかるので、必要な場合は検索してみてください。CSSメソッドの基本的な使い方は以上のようになるので、非常にシンプルで簡単です。相対値による値設定CSSでプロパティを設定する際は基本的に絶対値で設定しますが、jQueryの場合相対値で設定することも可能です。方法は以下のサンプルコードのようになります。);</script></body>上記のソースコードを実行すると、以下のようにコンソール出力されます。20pxもともとのフォントサイズは10pxでしたが、CSSメソッドを使用してサイズを10プラスしています。その結果、フォントサイズは20pxとなりました。今までは単一の設定のみを行ってきましたが、一つのCSSメソッドで複数のプロパティを設定することが可能です。同様に取得も一度に複数のプロパティ取得が可能です。それではサンプルコードを見てみましょう。<body><p>サンプル</p><script>$('p').css({'color':'#f00','font-size':'20px','font-weight':'bold'});</script></body>上記のソースコードはCSSメソッドを用いて色、サイズ、フォントの太さをいっぺんに設定しています。カンマ区切りにすればいくつでもプロパティを設定することができるので、簡単です。複数のプロパティを取得する場合は配列を使用します。サンプルコードは以下になります。);</script></body>上記のソースコードを実行すると、以下のようにコンソール出力されます。0)”}CSSメソッドの引数が配列になっており、プロパティの格納順に指定しています。CSSメソッドの第二引数に関数を設定する今までは第一引数にプロパティ、第二引数に直接値を記述していました。第二引数に関数を設定することも可能です。第二引数に関数を設定すれば、プロパティに対して複数の値を一度に取得することなどができます。サンプルコードで確認しましょう。'px';})</script></body>上記のソースコードを実行すると、以下のようにコンソール出力されます。style=”font-size:22px”>サンプル3</p>フォントサイズが設定されたpタグが三つありますが、それぞれに対してpxを10プラスしています。value)を設定し、indexとvalueを取得します。indexには三つあるpタグのインデックス番号が格納され、valueにはプロパティ値であるfont-sizeの値が入ります。valueをイント型に変換しつつ10pxプラスし、最終的に出力しました。その他CSSメソッドの使い方CSSメソッドはプロパティを取得や追加するだけでなく、特殊な設定を行うことも可能です。displayによって要素の表示、非表示の設定ができます。以下のサンプルコードで確認します。'block');}})</script></body>上記のコードは、ボタンをクリックするたびにpタグの要素を表示、非表示と切り替えるものです。ちなみに、$(‘button’).click(function()もjQueryの代表的な機能になります。他にもCSSメソッドの使い方はいくつかありますが、これだけ把握しておけばまずは大丈夫かと思います。基本的な使い方がわかっていれば後は調べればすぐにわかるので、必要に応じてリサーチすると良いでしょう。案件量が豊富なアルマサーチ最後に、アルマサーチのご紹介!アルマサーチはフリーランス向けに案件をご紹介することに特化したエージェントサービスです。豊富な案件量から、安定して継続的な案件のご紹介を実現しており、口コミから登録エンジニアが急増中です。週3?4日の案件や在宅リモート案件も。優秀なコンサルタント陣。案件に参画後もしっかりサポート。豊富な案件量フリーランス向けに特化し、業界屈指の案件量を誇ります!週3?4日の案件や、在宅リモート案件もありますし、その他あらゆる希望をしっかりお伝えください。最適な案件のご紹介をさせていただきます。技術に疎く、開発の希望を伝えても響かないエージェント・・・嫌ですよね。アルマサーチにはそのような者は一切おりません!さらに独立にまつわる税金や保険関係に詳しいスタッフが徹底的にサポートさせていただきます。案件に参画後もしっかりサポート常駐先が決まった瞬間に、一度も連絡が取れなくなるエージェント・・・いますよね?アルマサーチでは、そのようなことは一切ありません!常に電話やメールは即対応しますし、月に1度のランチミーティングなどから現場の状況を細かくヒアリングし、就業環境改善に尽力いたします。uriを使ってWeb上のデータを取得しよう条件分岐に便利なSwiftのSwitch文の使い方まとめCOBOLerの上司のためにJava入門講座を開いてみたエンジニアがおすすめの靴選び!TPOで迷わない。