MdNCORPORATION

現場でかならず使われている jQueryデザインのメソッド

現場でかならず使われている jQueryデザインのメソッド

北川 貴清 著/邉春 貴保 著/吉岡 成奉 著/ハヤシ ユタカ 著/山本 圭助 著/津留 敏哉 著
定価 2,860円
(本体 2,600円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2014-04-25
仕様 B5判/208P
ISBN 978-4-8443-6423-8
jQueryの最大の特長は、通常のJavaScriptよりもシンプルなコードでWebサイトの動的な“ふるまい”を記述できる点です。CSSと同じセレクタが利用できるため、HTML+CSSをひととおり理解していれば、文法や記述ルールはすぐに習得できることでしょう。 とはいえ、「こう動かすにはどのようにjQueryのコードを書けばよいか」という目星をつける実践的な感覚を養うためには、実際のWebサイトで書かれているコードを理解して、さまざまな機能や表現の手法を自分の中に蓄積していく必要があります。 本書では、このようなjQueryの“実践感覚”を身につけていただけるように、実用的な作例をベースにjQueryのコードをステップ・バイ・ステップ形式で解説しています。アコーディオンやタブパネル、ツールチップといった頻出の基礎技術から、背景全面動画、Masonry、パララックススクロールなどの現在流行している最新の手法まで、近年のWebサイトに利用されているjQueryのテクニックを網羅しました。jQueryは1.9以降の最新バージョンに対応、サンプルデータをダウンロードできるので、実際に解説内容を試しながら応用力を養えます。現場の制作メソッドがぎっしり詰まった必携の一冊です!


■ページ見本










目次

■INTRODUCTION jQueryの基礎解説
jQueryの特徴
jQueryの基本の書き方
セレクタ
イベント
条件分岐・ループ
変数・配列
関数
メソッド

■PART1 jQueryベーシックテクニック
クリックで折りたためるアコーディオンメニュー
スライドアニメーションのドロップダウンメニュー
特定のクラスを持つコンテンツだけを表示する
ナビゲーションのみをブラウザの上部に固定する
ページトップへ戻るボタンとスムーズスクロール
jQueryを利用したバナーアニメーション
マウスオーバー時の画像エフェクト

■PART2 インターフェイス
エフェクトの豊富なタブパネル
ユーザビリティを向上するツールチップ
サイドから展開するスライドメニュー
Masonryを利用してコンテンツを隙間なく並べる
メイングラフィックに最適なスライドショー
マルチデバイスに対応したフォトギャラリー
コンテンツを次々に読み込んで無限にスクロールするページ

■PART3 インパクトのある表現
ブラウザの背景全体に画像を配置する
ブラウザの背景全体に動画を再生させる
ページ読み込み時に要素をアニメーションで表示する
下からコンテンツがスライドするパララックス効果
マウスホイールに対応した横スクロールのページ
たくさんの写真を自動スライドで見せる
奥スクロールのパララックスアニメーション
スクロールを判別して指定位置に移動する

■PART4 ユーティリティ
Googleマップを埋め込んでカスタマイズする
使いやすいお問い合わせフォーム
ソートや絞り込みができる表組み
数値データからSVGでグラフを描画する
SNSのボタンをまとめて配置する
PCとスマートフォンで画像を切り替える
ウィンドウサイズに合わせてコンテンツフィッティング

ダウンロードデータ

現場でかならず使われている jQueryデザインのメソッド
サンプルデータダウンロード


このたびは、「現場でかならず使われている jQueryデザインのメソッド」をご購入いただきまして、誠にありがとうございます。
以下に本書のサンプルテーマ、および解説中に掲載しているコードのファイルをご用意しましたので、ご利用ください。


◯サンプルテーマ

MdN_jQueryDesignMethod.zip(156MB)


■ダウンロードにあたってのご注意■

ダウンロードファイルは、ZIP形式で圧縮されています。
Windows、Macそれぞれの解凍ソフトを使って圧縮ファイルを解凍してください。
解凍したフォルダ内に「はじめにお読みください.html」が同梱されていますので、ご使用の前に必ずお読みください。


■ダウンロードファイル解凍時のご注意■

Windowsをご利用の場合は、ダブルクリックしてもダウンロードファイルを正しく解凍できない場合があります。ファイルの閲覧や操作に問題が生じた場合は、次の手順でファイルの解凍をお試しください。

[1]ダウンロードしたファイルを右クリック
[2]表示されたメニューから[すべてを展開...]を選択
[3]ファイルを解凍するダイアログが表示されるので、保存場所を選択して実行
[4]指定した場所にファイルが解凍される

※弊社Webサイトからダウンロードできるサンプルデータは、本書の解説内容をご理解いただくために、ご自身で試される場合にのみ使用できる参照用データです。その他の用途での使用や配布などは一切できませんので、あらかじめご了承ください。ただしjQueryや各種プラグインなどの一般に公開されているライブラリ類については、各ライブラリのライセンス条件に従います。

※弊社Webサイトからダウンロードできるサンプルデータの著作権は、それぞれの制作者に帰属します。

※弊社Webサイトからダウンロードできるサンプルデータを実行した結果につきましては、著者および株式会社エムディエヌコーポレーションは一切の責任を負いかねます。お客様の責任においてご利用ください。

※本書に掲載されているJavaScript、HTML、CSS等のコメントや改行位置等は、紙面掲載用として加工していることがあります。ダウンロードしたサンプルデータとは異なる場合がありますので、あらかじめご了承ください。

※サンプルのなかには、オンラインサービスの機能を利用するなどの理由から、ローカル環境上では正しく動作しないものがあります。このようなサンプルの場合は、Webサーバ上に設置したうえで機能をお試しください。

制作の基本からデザイン業界の最新状況まで! MdNのデザイン・グラフィック書8選

デザイン・制作・マーケティング Webでもう困らない! わかりやすくて知識が身につく8冊