jQueryを学ぶ1 - nicepaper @ ウィキ - atwiki（アットウィキ）

Photoshopの記事を書こうとしたのですが、編集後の画像があまりかっこよくなかったので少し後回しにし、jQueryについて執筆していきたいと思います。前回記事jQueryの読み込みからさらに進めていきたいと思います。読む人の対象は HTML+CSSがある程度わかっており、WEB上にあるjQueryのサンプルコードをいじって設定してみたものの、もう少し深く知りたいや、自分で実装してみたいという方向けです。7月11日記事

jQueryを学ぶ手順
jQueryでCSS記述をしてみる
jQueryを実行させる環境を整備する。
jQueryを呼び出す基本構文を作成する
jQueryでCSSのなにか記述をしてみる。
- pを赤字
- #mainの中のpを赤字
まとめ

jQueryを学ぶ手順

とりあえず動かしてみる。（前回記事）
CSSの記述をしてみる。（今回）
動かしたりする関数（メソッド）を使ってみる。
色々なコンテンツを作ってみる。

です。今回はjQueryで2番目のCSSの記述をしてみる。のところを行ってみたいと思います。

jQueryでCSS記述をしてみる

はじめに断わっておきますが、今回の内容はHTML+CSSのみでも実装できます。なぜ今回の内容を学ぶかというと、今後必要になってくる記述だからです。jQueryはクライアント側が動的にブラウザ上の表記を変更させるために使われます。ブラウザ上の表記を変えるとはどういうことかというと、ブラウザのコンテンツの有無を変更したり、デザインを変更したりするということです。デザインを変更するためには当然CSSの記述やその変更を余儀なくされます。よって、最初はあまり面白くないとは思いますが、 jQueryの基本構文とCSS記述を行っていきたいと思います。

jQueryを実行させる環境を整備する。

まずはhead内にjQueryを読み込んでいきます。jQueryの本家サイトからとってきてもいいですが、高速化やすぐ実行させるためにGoogleのCDNを使っていきたいと思います。その他にCSSはreset.cssを読み込んでいきます。reset.cssのダウンロードはこちらを参照してください。ちなみにstyle.cssにはまだなにも記述していません。 HTML部

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryでCSS</title>
<link rel="stylesheet" type="text/css" href="reset.css"><!--まずはreset.cssの読み込み-->
<link rel="stylesheet" type="text/css" href="style.css"><!--次に自分で定義するスタイルシートの読み込み-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><!--jQueryの読み込み-->
</head>
<body>
</body>
</html>

jQueryは1.x.x系と2.x.x系があります。2は古いブラウザを捨てた高速化のjQueryファイル、1は古いブラウザにも対応したjQueryファイルです。

jQueryを呼び出す基本構文を作成する

次にjQueryを実行させる基本構文を作成します。<script>からはじまり、 $からはじまることが特徴です。コメントアウトは//か/**/です。終わりは});を用います。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryでCSS</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {//ここから開始
	    //ここに処理記述です。
});//ここで終了
</script>
</head>
<body>
</body>
</html>

jQueryでCSSのなにか記述をしてみる。

どんなHTMLでもいいです。以下のコードを読み替え、各自記述していくといいと思います。今回はただ赤字に変えるCSSを記述していきます。
style.css（共通）

@charset "utf-8";
/* CSS Document */

#main{
	width: 300px;
	height: 200px;
	border: 1px solid #000;
}

以下HTMLを色々と変えていきます。

pを赤字

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryでCSS</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
	$('p').css('color','#f00');	
});
</script>
</head>
<body>
<div id="main">
	<p>mainの中の文字</p>
</div>
<p>mainの外の文字</p>
</body>
</html>

イメージ

pは両方とも赤字になったと思います。以下詳細説明

$(function() {
	$('p').css('color','#f00');	
});

pはp要素をさし、.cssはCSSの記述を変更するという命令、colorはプロパティ名で最後の#f00は値です。こちらも $から始まり、実行命令を記述していく。ものだと思っていただければとおもいます。

#mainの中のpを赤字

もちろんこんな記述もできます。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryでCSS</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
	$('#main p').css('color','#f00');	
});
</script>
</head>
<body>
<div id="main">
	<p>mainの中の文字</p>
</div>
<p>mainの外の文字</p>
</body>
</html>

イメージ