「jQueryを学ぶ1」の編集履歴（バックアップ）一覧はこちら
jQueryを学ぶ1 - (2015/07/12 (日) 04:43:54) の１つ前との変更点
追加された行は緑色になります。
削除された行は赤色になります。
Photoshopの記事を書こうとしたのですが、編集後の画像があまりかっこよくなかったので少し後回しにし、jQueryについて執筆していきたいと思います。前回記事[[jQueryの読み込み]]からさらに進めていきたいと思います。読む人の対象は&color(red){HTML+CSSがある程度わかっており、WEB上にあるjQueryのサンプルコードをいじって設定してみたものの、もう少し深く知りたいや、自分で実装してみたいという方向け}です。7月11日記事
~
~
目次
#contents
~
----
*jQueryを学ぶ手順
+とりあえず動かしてみる。（前回記事）
+CSSの記述をしてみる。
+動かしたりする関数を使ってみる。
+色々なコンテンツを作ってみる。
~
~
です。今回はjQueryで2番目のCSSの記述をしてみる。のところを行ってみたいと思います。
~
~
*jQueryでCSS記述をしてみる
はじめに断わっておきますが、今回の内容はHTML+CSSのみでも実装できます。なぜ今回の内容を学ぶかというと、今後必要になってくる記述だからです。jQueryはクライアント側が動的にブラウザ上の表記を変更させるために使われます。ブラウザ上の表記を変えるとはどういうことかというと、&color(red){ブラウザのコンテンツの有無を変更したり、デザインを変更したりする}ということです。デザインを変更するためには当然CSSの記述やその変更を余儀なくされます。よって、最初はあまり面白くないとは思いますが、&color(red){jQueryの基本構文とCSS記述を行っていきたいと思います。}
~
~
*jQueryを実行させる環境を整備する。
まずはhead内にjQueryを読み込んでいきます。jQueryの[[本家サイト:]]からとってきてもいいですが、高速化やすぐ実行させるためにGoogleのCDNを使っていきたいと思います。
~
~
*jQueryを呼び出す基本構文を作成する
~
~
*CSSでなにか記述をしてみる。
~
~
*まとめ
~
~
Photoshopの記事を書こうとしたのですが、編集後の画像があまりかっこよくなかったので少し後回しにし、jQueryについて執筆していきたいと思います。前回記事[[jQueryの読み込み]]からさらに進めていきたいと思います。読む人の対象は&color(red){HTML+CSSがある程度わかっており、WEB上にあるjQueryのサンプルコードをいじって設定してみたものの、もう少し深く知りたいや、自分で実装してみたいという方向け}です。7月11日記事
~
~
目次
#contents
~
----
*jQueryを学ぶ手順
+とりあえず動かしてみる。（前回記事）
+CSSの記述をしてみる。
+動かしたりする関数を使ってみる。
+色々なコンテンツを作ってみる。
~
~
です。今回はjQueryで2番目のCSSの記述をしてみる。のところを行ってみたいと思います。
~
~
*jQueryでCSS記述をしてみる
はじめに断わっておきますが、今回の内容はHTML+CSSのみでも実装できます。なぜ今回の内容を学ぶかというと、今後必要になってくる記述だからです。jQueryはクライアント側が動的にブラウザ上の表記を変更させるために使われます。ブラウザ上の表記を変えるとはどういうことかというと、&color(red){ブラウザのコンテンツの有無を変更したり、デザインを変更したりする}ということです。デザインを変更するためには当然CSSの記述やその変更を余儀なくされます。よって、最初はあまり面白くないとは思いますが、&color(red){jQueryの基本構文とCSS記述を行っていきたいと思います。}
~
~
*jQueryを実行させる環境を整備する。
まずはhead内にjQueryを読み込んでいきます。jQueryの[[本家サイト:https://jquery.com/]]からとってきてもいいですが、高速化やすぐ実行させるためにGoogleのCDNを使っていきたいと思います。その他にCSSはreset.cssを読み込んでいきます。reset.cssのダウンロードは[[こちら:http://html5doctor.com/html-5-reset-stylesheet/]]を参照してください。ちなみに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">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
</body>
</html>
jQueryは1.x.x系と2.x.x系があります。2は古いブラウザを捨てた高速化のjQueryファイル、1は古いブラウザにも対応したjQueryファイルです。
~
~
*jQueryを呼び出す基本構文を作成する
次にjQueryを実行させる基本構文を作成します。&color(red){$からはじまることが特徴です。}
<!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>
~
~
*CSSのなにか記述をしてみる。
~
~
*まとめ
~
~
