デザインとグラフィックの総合情報サイト
[エムディエヌ・デザイン・インタラクティブ]

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

特集記事

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

jQuery
デザイン
メソッド

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


解説:(有)ムーニーワークス ハヤシユタカ (2015年4月15日更新)

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

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





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

jQuery_cover jQueryの特長は、通常のJavaScriptよりもシンプルなコードでWebサイトの動的なふるまいを記述できる点です。CSSと同じセレクタが利用できるので、HTML+CSSをひと通り理解していれば、文法や記述ルールはすぐに習得できます。本書は、このような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)



twitter facebook google+ このエントリーをはてなブックマークに追加 RSS