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

  • このエントリーをはてなブックマークに追加
  • Twitter
  • Clip to Evernote

Web デザイン

 
 

 いまWebの現場で使われている
「jQuery」デザイン メソッド

jQuery
デザイン
メソッド

ベーシックな使い方からプラグインを活用した最新手法まで、
多彩なjQueryテクニックを紹介します!

本連載は、jQueryの“実践感覚”を身につけていただけるように、実用的な作例をベースにjQueryのコードをステップ・バイ・ステップ形式で紹介するテクニカル連載です。アコーディオンやタブパネル、ツールチップといった頻出の基礎技術から、背景全面動画、Masonry、パララックススクロールなどの現在流行している最新手法まで、近年のWebサイトに利用されているjQueryのテクニックを解説します。


解説:(有)ムーニーワークス ハヤシユタカ (2014年8月21日更新)

いまWeb現場で使われている「jQuery」デザイン メソッド 目次

第12回目 「masonryでコンテンツを隙間なく敷き詰め表示方法いろいろ試す」
第11回目 「ブラウザ一杯に広がったメイングラフィックに最適なスライドショーを作成する」
第10回目 「クリックでサイドから展開するスライドメニューを作成する」
第9回目 「PCとスマートフォンで画像を切り替える」
第8回目 「SNSのボタンをまとめて配置する」
第7回目 「特定のタイミングでヘッダーナビゲーション部分を上部に固定する」
第6回目 「ユーザビリティを向上するツールチップを作る」
第5回目 「エフェクトの豊富なタブパネルを実装する(フェード切り替えなど)」
第4回目 「ページトップへ戻るボタンの出現方法いろいろとスムーズスクロール」
第3回目 「ブラウザの背景全体に画像を表示(ランダム配置)する」
第2回目 「Bigvideoプラグインを使用してvideo要素で動画をブラウザの背景全体に再生させる」
(2014年9月4日公開予定)
第1回目 tubularプラグインを使用してYOUTUBEの動画をブラウザの背景全体に再生させる
(2014年8月21日公開)





●本連載で使用している書籍「現場でかならず使われている jQueryデザインのメソッド」

jQuery_cover jQueryの特長は、通常のJavaScriptよりもシンプルなコードでWebサイトの動的なふるまいを記述できる点です。CSSと同じセレクタが利用できるので、HTML+CSSをひと通り理解していれば、文法や記述ルールはすぐに習得できます。とはいえ「こう動かすにはjQueryのコードをどのように書けばよいか」という実践的な感覚を養うためには、実際に書かれているコードを理解し、さまざまな機能や表現手法を自分の中に蓄積していく必要があります。

本書は、このようなjQueryの実践感覚を身につくように、アコーディオンやタブパネル、ツールチップといった頻出の基礎技術から、背景全面動画、パララックススクロールなどの現在流行している最新の手法まで、多彩なjQueryのテクニックを解説。現場の制作メソッドがぎっしり詰まった必携の一冊です!

ハヤシユタカ氏 Profile
【ハヤシユタカ】2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より教鞭をとる。2004年からは、デジタルハリウッド大学大学院、明治大学大学院非常勤講師を歴任。2012年からはデジハリオンラインスクールにてWEB関連講座のeラーニング教材の開発に携わり、会社・自宅のPCからいつでも「HTML5」「WordPress」を学べる講座を担当。2013年御苗場Vol12.横浜にて「The Zoological Garden ~言葉のない対話~」エプソン賞受賞。

こちらの連載もあわせてご覧ください
●WordPressでブログでなくビジネスサイトをつくろう:http://www.mdn.co.jp/di/articles/2782/
●ゼロからはじめるHTML5でのサイト制作:http://www.mdn.co.jp/di/articles/2605/
●HTML5でサイトをつくろう:http://www.html5-memo.com/
●Webデザインクリップ:http://webdesignmatome.com/

【著書・共著】
●現場でかならず使われている jQueryデザインのメソッド (2014/4/25)
●HTML5デザイン 仕事のネタ帳 CSS3+JavaScript+CSSフレームワークと活用するプロのテクニック (2014/3/24)
●現場で役立つCSS3デザインパーツライブラリ (2013/5/17)
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしい スタイルシートデザインの基本原則(2012/5/25)



 
 




MdN出版物のご案内

MdN定期購読のご案内
近刊発売の新刊情報
訂正とお知らせ・ダウンロード
MdNの電子書籍

MdN のデザイン求人情報

  • MdN BLOG β
  • MdNメールマガジンの登録・解除