Photoshopの記事を書こうとしたのですが、編集後の画像があまりかっこよくなかったので少し後回しにし、jQueryについて執筆していきたいと思います。前回記事jQueryの読み込みからさらに進めていきたいと思います。読む人の対象は HTML+CSSがある程度わかっており、WEB上にあるjQueryのサンプルコードをいじって設定してみたものの、もう少し深く知りたいや、自分で実装してみたいという方向け です。7月11日記事
目次
はじめに断わっておきますが、今回の内容はHTML+CSSのみでも実装できます。なぜ今回の内容を学ぶかというと、今後必要になってくる記述だからです。jQueryはクライアント側が動的にブラウザ上の表記を変更させるために使われます。ブラウザ上の表記を変えるとはどういうことかというと、
ブラウザのコンテンツの有無を変更したり、デザインを変更したりする
ということです。デザインを変更するためには当然CSSの記述やその変更を余儀なくされます。よって、最初はあまり面白くないとは思いますが、
jQueryの基本構文とCSS記述を行っていきたいと思います。
まずは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を実行させる基本構文を作成します。<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>
どんなHTMLでもいいです。以下のコードを読み替え、各自記述していくといいと思います。今回はただ赤字に変えるCSSを記述していきます。
style.css(共通)
@charset "utf-8"; /* CSS Document */ #main{ width: 300px; height: 200px; border: 1px solid #000; }
以下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> <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は値です。
こちらも
$から始まり、実行命令を記述していく。
ものだと思っていただければとおもいます。
もちろんこんな記述もできます。
<!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>
イメージ
次はmainの中のpの文字だけ赤になると思います。そのほかにもidの#指定で背景色を変えてみたり、classの.指定で文字色を変えてみてください。
今回の内容はCSSだけでも記述できますが、今後CSSをjQueryで変更するためにはどうすればよいのか、その記述方法を学びました。