Re:Creator’s Kansai

こんにちわ。to-Rの西畑です。

時間がかかりましたがjQueryの使い方について解説していきたいと思います。第1回はCSSの操作方法。

プログラム入門らしくHello World!から始めようかと思ったのですが、普段CSSを書いているデザイナーさんにはCSSの操作から始めるほうが理解がしやすいと思います。

単純にCSS操作

CSSを理解している方は、書式さえ覚えてしまえば簡単にjQueryでCSSを操作することが可能です。

まずはサンプルをご覧ください。

サンプル

$(function(){
	$("#container").css("width","200px");
	$("div").css("background-color","red");
	$(".sample").css("font-weight","bold");
	$("#container p").css("color","white");
})

解説

$(function(){
　
})

まず1行目の「$(function(){」と5行目の「})」ですが、詳しくはイベントハンドラの説明の際に行いますので、ひとまずはjQueryを利用する際のお約束と覚えておいてください。

基本的にjQueryの記述はこの中に書いていきます。

jQueryではCSSを操作する際に以下のように記述します。

$("CSSセレクタ").css("プロパティ","値");

つまり2行目の記述はCSSの以下の記述と同じ意味を持ちます。

#container{
	width:200px;
}

CSSの知識がある方は、書式さえ覚えてしまえば簡単にCSSを操作することが可能です。

CSSセレクタに関してはCSSの操作だけではなく、今後のjQueryの解説全般で利用しますので、ぜひ覚えておいてください。

サンプルでは最近のCSSの基本セレクタである、要素セレクタ、IDセレクタ、クラスセレクタ、子孫セレクタを利用しています。

jQueryで先取るCSS3

jQueryのすごいところはCSS3のセレクタも多くサポートしているところです。

現状のブラウザシェアを考えると、CSS3の記述を業務で利用できるのは2~3年後以上後になりそうですが、jQueryを利用すれば、今から業務でCSS3の強力なセレクタを利用したCSSが記述することが出来ます。

$("li:nth-child(odd)").css("background-color","green");
$("li:nth-child(even)").css("background-color","#D1EFD1");
$("li:first-child").css("background-color","red");

サンプル

jQueryを利用して、CSS3のnth-child擬似クラスやfirst-child擬似クラスでCSSを操作しています。

CSS3の記述用にjQueryを利用するというのも便利だと思いますよ。

一部のCSS3セレクタは書式などが違ったりしますので、ドキュメントなどを参考にしてください。

【PR】書籍 現場のプロから学ぶXHTML+CSS 好評発売中