jQuery入門講座：サンプル目次

サンプル

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

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

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章ではページ内アンカーにスクロールで移動する「スムーススクロール」や色々なサイトで利用されている「タブメニュー」、そして左図のようなカテゴリごとに記事を表示する「カテゴリ切替」を紹介しています。

次のページ：スムーススクロール(1)