デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
1章:短編集
2章:診断系コンテンツ
3章:製品抽出系コンテンツ
番外:Simulation Game

サンプル

仕事で利用できるサンプル

サンプルページでは使い方で習得した知識を発展させ、実用的なコンテンツ作成の手法を学びます(使い方を修了していない方は先に使い方を修了して下さい)。

jQueryのサンプルサイトでは、jQueryを分かりやすく説明するために、htmlやcssはシンプルにする傾向がありますが、このサイトでは仕事で利用できるサンプルを目指してhtmlやcssも普通に設定していきたいと思います。ただしhtmlやcssの知識をすでに習得している方をターゲットとしているため、htmlやcssの説明は省略しています。

おすすめのcss本は左の「css3スタンダードデザインガイド」が良いと思います。発売日は2011.6/14と古めですがAmazonのレビューで8件のレビュー中7つが5つ星です。

サンプルの紹介

jQueryはFlashに置き換わり、スペシャルサイトのようなハデな演出を実現する手段になってきていますが、私はもっと実用的なコンテンツ作成に利用されるべきだと考えています。

ですのでサンプルページでは実用的なコンテンツ作成について説明したいと思います(右の画像をクリックして下さい)。左図に紹介している3章の「製品抽出系コンテンツ」はユーザーが質問に回答することで、ユーザーにあった製品をランキング形式で紹介します。

日本のメーカーの製品は色々なニーズに対応するように幅広く作成されているので、この様なコンテンツは有用なのではないでしょうか?

サンプルサイトは1章から順に閲覧されることを前提に記事を書いています。ですので紹介した「製品抽出」に興味があっても、1,2章を飛ばさずに1章から順に閲覧して下さい

他のサイトと差別化するために

jQueryを紹介するサイトは多く存在するので、このサイトでは内容が重複しないようにコンテンツを作成していこうと考えて2章の「診断系コンテンツ」や3章の「製品抽出系コンテンツ」を作成したのですが、初心者向けの内容ではなくなってしまいました...。ちょっと難しいかもしれません。すいません...。

しかし1章は簡単だと思いますので是非ご確認下さい。1章ではページ内アンカーにスクロールで移動する「スムーススクロール」や色々なサイトで利用されている「タブメニュー」、そして左図のようなカテゴリごとに記事を表示する「カテゴリ切替」を紹介しています。