jQuery標準デザイン講座

基本から楽んで学ぶ

JQueryの基礎からわかりやすく解説されており、難易度は易しめですが、こちらを学ぶことによってWebサイトに動きをつけることは容易になります。学んだ内容を応用してアレンジすることも可能です。また、楽しく学習を進められる構成であることも魅力の1つです。

神田 幸恵 (著)
出版社: 翔泳社 (2015/12/16)、出典:出版社HP

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

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

  • ご質問される前に弊社Webサイトの「正誤表」をご参照ください。これまでに判明した正誤や追加情報を掲載しています。
    正誤表
    http://www.shoeisha.co.jp/book/errata/
  • ご質問方法
    弊社Webサイトの「刊行物Q&A」をご利用ください。
    刊行物Q&A
    http://www.shoeisha.co.jp/book/qa/
    インターネットをご利用でない場合は、FAXまたは郵便にて、下記“翔泳社 愛読者サービスセンターまでお問い合わせください。 電話でのご質問は、お受けしておりません。
  • 回答について
    回答は、ご質問いただいた手段によってご返事申し上げます。ご質問の内容によっては、回答に数日ないしはそれ以上の期間を要する場合があります。
  • ご質問に際してのご注意
    本書の対象を越えるもの、記述個所を特定されないもの、また読者固有の環境に起因するご質問等にはお答えできませんので、予めご了承ください。
  • 郵便物送付先および FAX番号
    送付先住所 〒160-0006 東京都新宿区舟町5
    FAX番号 03-5362-3818
    宛先 (株)翔泳社愛読者サービスセンター

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

はじめに

こんにちは、神田幸恵です。 私は日々、各種セミナーやワークショップ、専門学校の講師としてwebデザインの楽しさを日本全国でお伝えしています。
セミナーや講義の際、私はよくjQueryによる制作をブロック遊びに例えます。セレクタやメソッドを組み合わせてスクリプトを構築していく過程は、ブロックでお城などを作るのに似ていると思うのです。理想のお城を作るにはブロック一つ一つの特性を理解し、それらをどう組み合わせればよいか考えられる力が必要です。本書執筆のお話を頂いた際、生意気にも私は、jQueryにおけるそういった設計力を養えるような内容にしたい!とお願いしました。

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

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

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

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

2015年12月 著者

神田 幸恵 (著)
出版社: 翔泳社 (2015/12/16)、出典:出版社HP

目次

Introduction

レッスンを始める前に

Chapter 01 jQueryの基礎知識
LESSON O1 jQueryの概要
LESSON O2 jQueryの導入

Chapter 02 jQueryの文法
LESSON O3 jQueryの文法
LESSON O4 JavaScriptの基本

Chapter 03 jQueryのサンプル制作:Level 1
LESSON O5 トグルメニュー
LESSON O6 アラートボックス
LESSON O7 ビューアー
LESSON O8 タブ

Chapter 04 jQueryのサンプル制作:Level 2
LESSON O9 ドロップダウンメニュー
LESSON 10 フローティングメニュー
LESSON 11 lightBox風モーダルウインドウ
LESSON 12 画像のキャプション表示
LESSON 13 ツールチップ

Chapter 05 jQueryのサンプル制作:Level 3
LESSON 14 ボックスの高さを合わせる
LESSON 15 文字サイズの変更
LESSON 16 パララックス効果
LESSON 17 フィルタリング
LESSON 18 テーブルセルのハイライト
LESSON 19 アコーディオンパネル
LESSON 20 スムーススクロール

Chapter 06 jQueryのサンプル制作:Level 4
LESSON 21 バナーのランダム表示
LESSON 22 フォームのバリデーション
LESSON 23 スライドメニュー
LESSON 24 スクロールによるヘッダーのリサイズ
LESSON 25 ブラウザ上部に固定されるヘッダー
LESSON 26 メニューのハイライト

Chapter 07 jQueryのサンプル制作:Level 5
LESSON 27 スライドショー(横スクロール)
LESSON 28 スライドショー(フェードイン/アウト)
LESSON 29 画像のズーム
LESSON 30 カウントアップゲーム

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

APPENDIX jQueryリファレンス

索引

神田 幸恵 (著)
出版社: 翔泳社 (2015/12/16)、出典:出版社HP

本書の特徴

本書は全7章・30のLESSON からできています。Chapter 01~02はjQueryの学習のための基礎知識の解説パート、Chapter 03~07はjQueryのサンプルを制作していくパートです。LESSONは考え方や仕組みを解説する「講義」と、実際に手を動かしてコードを書いていく実習」に分かれています。Chapter 03からのLESSONは度順に少しずつステップアップしていきますので、自分のペースで学習を進めてください。

学習用サンプルファイルについて

本書ではサンプルファイルを使って、実際にコードを書きながら学習を進められます。サンプルファイルは下記のURLからダウンロードできます。
URL http://www.shoeisha.co.jp/book/download/9784798136226
サンプルファイルを使った実習があるLESSONでは、使用するファイルの場所を冒頭に記載しています。記載にしたがって該当のファイルを開き、学習を進めてください。

ORIENTATION
レッスンを始める前に
◆本書の対象
本書は、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、Firefox, Opera、Safari など)をご利用ください。テキストエディタは、文字コードを正しく判別できるエディタであれば、普段から使い慣れたもので構いません。
なお、使用する OSはWindws、Macどちらでも構いません。
本書のサンプルファイルは基本的に文字コードUTF-8(BOM無し)で書かれています。
◆デバッグについて
本書を使って学習を進めていく際、ソースコードの記述にスペルミスや半角/全角の間違いなどがあると、ちょっとしたことでもスクリプトは動かなくなってしまいます。ここではそうしたエラー時の対策として、ブラウザの機能を利用してエラーの原因を調べる(デバッグ)方法を紹介します。
・Google Chromeの「検証」を使用する
Google Chromeには、「検証」という機能があります。この機能を使うと、jQueryがページに変更を加えた箇所を確認することができます。例えば、以下のソースコードは、index.htmlに対してjQueryでbutton要素の背景色を青色に変更している例です。
ソースコードの読み方はLESSONO2 を参照。


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

神田 幸恵 (著)
出版社: 翔泳社 (2015/12/16)、出典:出版社HP