jQuery標準デザイン講座

本書内容に関するお問い合わせについて

このたびは翔泳社の書籍をお買い上げいただき、誠にありがとうございます。弊社では、読者の皆様からのお問い合わせに適切に対応させていただくため、以下のガイドラインへのご協力をお願い致しております。下記項目をお読みいただき、手順に従ってお問い合わせください。

●ご質問される前に
弊社Webサイトの「正誤表」をご参照ください。これまでに判明した正誤や追加情報を掲載しています。
正誤表http://www.shoeisha.co.jp/book/errata/

●ご質問方法
弊社Webサイトの「刊行物Q&A」をご利用ください。
刊行物Q&Ahttp://www.shoeisha.co.jp/book/qa/

インターネットをご利用でない場合は、FAXまたは郵便にて、下記”翔泳社 愛読者サービスセンター”までお問い合わせください。
電話でのご質問は、お受けしておりません。

●回答について
回答は、ご質問いただいた手段によってご返事申し上げます。ご質問の内容によっては、回答に数日ないしはそれ以上の期間を要する場合があります。

●ご質問に際してのご注意
本書の対象を越えるもの、記述個所を特定されないもの、また読者固有の環境に起因するご質問等にはお答えできませんので、予めご了承ください。

●郵便物送付先およびFAX番号
送付先住所 〒160-0006 東京都新宿区舟町5
FAX番号 03-5362-3818
宛先 (株)翔泳社 愛読者サービスセンター

※本書に記載されたURL等は予告なく変更される場合があります。
※本書の出版にあたっては正確な記述につとめましたが、著者や出版社などのいずれも、本書の内容に対してなんらかの保証をするものではなく、内容やサンプルに基づくいかなる運用結果に関してもいっさいの責任を負いません。
※本書に掲載されているサンプルプログラムやスクリプト、および実行結果を記した画面イメージなどは、特定の設定に基づいた環境にて再現される一例です。
※本書に記載されている会社名、製品名はそれぞれ各社の商標および登録商標です。

はじめに

こんにちは、神田幸恵です。
私は日々、各種セミナーやワークショップ、専門学校の講師としてwebデザインの楽しさを日本全国でお伝えしています。

セミナーや講義の際、私はよくjQueryによる制作をブロック遊びに例えます。セレクタやメソッドを組み合わせてスクリプトを構築していく過程は、ブロックでお城などを作るのに似ていると思うのです。理想のお城を作るにはブロック一つ一つの特性を理解し、それらをどう組み合わせればよいか考えられる力が必要です。本書執筆のお話を頂いた際、生意気にも私は、jQueryにおけるそういった設計力を養えるような内容にしたい!とお願いしました。

本書では、ベーシックなものから最近よく見られる流行りのものまで、jQueryを使った様々なサンプルを紹介しています。これだけでも充分お役に立てる自信はあるのですが、それぞれのサンプルを完成させるにあたって、どのような機能が必要なのか、それはどのメソッドに落とし込めるのかといった設計手順の解説にも力を入れているのが本書の特徴です。

出来合いのプラグインも便利ですが、自分で書いたスクリプトはカスタマイズも楽ですし、何より「作る楽しみ」を与えてくれます。ページを進める毎に難易度はどんどん上がりますが、全て読み終えた時には相当の力がついているはずです。
どうぞ楽しみにしてください。

現在は、皆が技術や知識を惜しみなく提供するシェアの時代です。jQueryの開発者であるジョン・レシグ氏に、私はもちろんお会いしたことはありません。そんな私がご本人の知らぬ間に本書をこっそり書き上げ、それがまた(おそらく)やはり未だお会いしたことのない皆様の手に届く。これはjQueryのライセンスがとても寛容で、シェアの精神に則ったものであるからこそ実現したご縁です。

氏から私、私から皆さん、そして今度は皆さんから他の誰かへ。一緒に制作の喜びを共有して行きましょう。

2015年12月 著者

目次

Introduction　レッスンを始める前に

Chapter 01　　jQueryの基礎知識
LESSONO1 jQueryの概要
LESSONO2 jQueryの導入

Chapter 02　　jQueryの文法
LESSONO3 jQuery の文法
LESSONO4 JavaScriptの基本

Chapter 03　　jQueryのサンプル制作:Level 1 (難易度 ★☆☆☆☆)
LESSONO5 トグルメニュー
LESSON06 アラートボックス
LESSONO7 ビューアー
LESSON08 タブ

Chapter 04　　jQueryotyサンプル制作:Level 2　(難易度 ★★☆☆☆)
LESSONO9 ドロップダウンメニュー
LESSON10 フローティングメニュー
LESSON11 lightBox風モーダルウインドウ
LESSON12 画像のキャプション表示
LESSON13 ツールチップ

Chapter 05　　jQueryのサンプル制作:Level 3 (難易度 ★★★☆☆)
LESSON14 ボックスの高さを合わせる
LESSON15 文字サイズの変更
LESSON16 パララックス効果
LESSON17 フィルタリング
LESSON18テーブルセルのハイライト
LESSON19 アコーディオンパネル
LESSON20 スムーススクロール

Chapter 06　　jQueryのサンプル制作:Level 4 (難易度 ★★★★☆)
LESSON21 バナーのランダム表示
LESSON22 フォームのバリデーション
LESSON23 スライドメニュー
LESSON24 スクロールによるヘッダーのリサイズ
LESSON25 ブラウザ上部に固定されるヘッダー
LESSON26 メニューのハイライト

Chapter 07　　jQueryのサンプル制作:Level 5 (難易度 ★★★☆☆)
LESSON27 スライドショー(横スクロール)
LESSON28スライドショー(フェードイン/アウト)
LESSON29 画像のズーム
LESSON30 カウントアップゲーム

[補講] プラグインの利用

APPENDIX 　jQueryリファレンス

索引

[本書の特徴] 本書は全7章・30のLESSONからできています。Chapter01~02はjQueryの学習のための基礎知識の解説パート、Chapter03~07はjQueryのサンプルを制作していくパートです。LESSONは考え方や仕組みを解説する「講義」と、実際に手を動かしてコードを書いていく「実習」に分かれています。Chapter03からのLESSONは難度順に少しずつステップアップしていきますので、自分のペースで学習を進めてください。
[学習用サンプルファイルについて] 本書ではサンプルファイルを使って、実際にコードを書きながら学習を進められます。
サンプルファイルは下記のURLからダウンロードできます。
URL　 http://www.shoeisha.co.jp/book/download/9784798136226
サンプルファイルを使った実習があるLESSONでは、使用するファイルの場所を冒頭に記載しています。記載にしたがって該当のファイルを開き、学習を進めてください。

レッスンを始める前に

●本書の対象
本書は、HTML5とCSS3を学習した方が、WebデザインのスキルアップとしてjQueryをはじめて学ぶための入門書です。すでにHTML5とCSS3について基礎的な知識があることを前提として、jQueryを使ったWebデザインの学習に絞って解説を行っていきます。

※HTML5とCSS3について学びたい方は、『HTML5&CSS3標準デザイン講座』(草野あけみ著、翔泳社刊)をおすすめします。

●学習用サンプルファイル
本書での学習は、学習用サンプルファイルを使って実際にソースコードを書きながら進めていきます。学習用のサンプルファイルは下記のURLからダウンロードしてください。

・学習用サンプルファイル
URL: http://www.shoeisha.co.jp/book/download/9784798136226

サンプルファイルを使った実習があるLESSONでは、使用するファイルの場所を冒頭に記載しています。記載にしたがって該当のファイルを開き、学習を進めてください。

●本書での学習に必要な制作環境
サンプルファイルを使った学習は、テキストエディタでのソースコード記述と、Webブラウザでの表示確認によって行います。
Webブラウザは、HTML5とCSS3に対応したモダンブラウザ(IE10以上、Google Chrome、Opera、Safariなど)をご利用ください。テキストエディタは、文字コードを正しく判別できるエディタであれば普段から使い慣れたもので構いません。
なお、使用するOSはWindows、Macどちらでも構いません。

Memo
本書のサンプルファイルは基本的に文字コードUTF-8(BOM無し)で書かれています。

●デバッグについて
本書を使って学習を進めていく際、ソースコードの記述にスペルミスや半角/全角の間違いなどがあると、ちょっとしたことでもスクリプトは動かなくなってしまいます。ここではそうしたエラー時の対策として、ブラウザの機能を利用してエラーの原因を調べる(デバッグ)方法を紹介します。

Google Chromeの「検証」を使用する
Google Chromeには、「検証」という機能があります。この機能を使うと、jQueryがページに変更を加えた箇所を確認することができます。

例えば、以下のソースコードは、index.htmlに対してjQueryでbutton要素の背景色を青色に変更している例です。

Memoソースコードの読み方はLESSONO2を参照。

 

ブラウザ上で背景色が変更されたボタンを右クリックして「検証」を選択すると、ボタン付近のソースコードを確認することができます。

●検証

画面右上の「Elements」には該当箇所のHTML、右下の「Styles」にはCSSがそれぞれ表示されます。
「Elements」内のソースコードを確認してみましょう。jQueryによって元のHTMLのbutton要素にstyle属性が追加され、その結果ボタンの背景色が変更されていることがわかります。

●Elements ED button

エラー箇所を見つける
jQuery スクリプトの css()メソッドのスペルを以下のように誤った記述に変更し、わざとエラーが起こる表記にしてみるとどうなるでしょうか。

この状態でブラウザをリロードし、再度「検証」で確認を行います。
今度はbutton要素にstyle属性が加えられていないことがわかります。

●要素の検証

●Elements上のbutton要素

エラーの原因は画面右上の「Console」で確認することができます。

●Console画面

表記が英語なのでわかりづらいかもしれませんが、タイプエラーを起こしていることと、該当箇所がscript.jsの5行目であることを教えてくれています。

●Consoleのメッセージ

このようにブラウザの機能を利用すると、内容上表からは確認することができない部分もチェックすることができるので便利です。ぜひ活用してみてください。

その他のブラウザによるデバッグ
Google Chromeだけでなく、その他のブラウザでも同等の機能が用意されています。
Firefoxでは「要素の調査」、Safariでは「要素の詳細を表示」、Internet Explorerでは「要素を調査」がそれぞれ該当し、いずれも右クリックで使用することができます。
なお、Safariの場合は、事前に「環境設定」の「詳細」で「メニューバーに“開発”メニューを表示」にチェックを入れておく必要があります。