ボタン、メニュー、フォームがjQueryで簡単に見違える!
WEBが際立つ“動き&装飾”デザイン

vol.97 巻頭特集記事サンプルデータ ダウンロードサイト

このたびは、本誌「月刊web creators 2010年1月号」をお買い上げいただきまして、誠にありがとうございます。ここでは本誌の巻頭特集「WEBが際立つ“動き&装飾”デザイン」の制作例として解説したサンプルデータをダウンロードできます。下記の諸注意をご確認のうえ、ご利用ください。

■巻頭特集記事の内容について

「マウスオーバーで表示されるメニュー」や、「Flashのようなビジュアルのインターフェイス」など、効果的な動きや華やかな表現をサイトに取り入れたいが、スキルがなくてつくれないという人は少なくありません。そのため、本記事では魅力的な“動き&装飾”を実現できるjQueryやjQueryプラグインを利用し、ひと際目を引くデザイン表現を実現するテクニックを解説しています。そこで、このWebページ上では、本誌をお買い上げいただいた方がより理解を深めていただくために、誌面上で紹介したTIPS01〜037のサンプルデータのダウンロードが可能です。

■サンプルデータの使用について

○すべてのデータの著作権はそれぞれの著者・制作者および著作権者に帰属します。

○データをダウンロードするには、誌面の各TIPSナンバーの右側にあるパスワードが必要です。なお、P.29「画面遷移なしですばやくダイアログやフォームを表示する」にはパスワードはありません。

○公開しているサンプルデータには、記事中で紹介しているライブラリおよびプラグインの元ファイルを含めておりません。お手数ですが、誌面をご参考いただき配布元のWebサイトからご自身で元ファイルをダウンロードしてください。弊誌Webサイトからダウンロードしたファイルは、各TIPS記事の内容をご確認のうえ指定されたフォルダに入れていただくと、ライブラリとプラグインが取り込まれたサイトが表示されます。なお、2009年11月28日配信の、月刊「web creators」公式メールマガジン「web creators report」では、記事中で紹介しているライブラリおよびプラグインのダウンロード先のURLリンク集を公開しています。メールマガジンをご購読の方はそちらをご利用いただくと便利です。ただし現在ご購読されていない方が、配信後に新たにご購読の登録をしても再配信されませんので、ご了承ください。また、URLリンク集はメールマガジン限定コンテンツですので、Webサイト等に掲載することはできませんのでご了承ください。

○記事中で紹介しているプラグイン等のほかに、プラグイン等をインストールする必要があるものがあります。記事のテキストや図版、プラグインのダウンロードページ、Readmeファイル(一部のデータにのみ含まれています)などをご確認ください。なお、本記事の内容に起因するプラグインのインストール方法などにつきましては、プラグインの制作者やダウンロードサイトの管理者等ではなく、エムディエヌカスタマーセンターまで、メール(info@MdN.co.jp )にてお問い合わせください。

○本特集の記事内容およびサンプルデータの制作環境にあたっては、2009年11月16日現在のWebブラウザおよび著者・制作者の環境にて動作を確認しておりますが、他のすべての環境下での同一の結果を保証するものではありません。JavaScriptやWebブラウザの対応状況、そしてライブラリとプラグインのバージョンによって、正常に動作しなくなる可能性がございます。恐縮ではございますが、あらかじめご了承ください。

○本書のサンプルデータは、記事の内容を理解するための参照用に使用されるものです。そのため、ここに含まれているXHTMLファイル、JavaScriptファイル、CSSファイル、 画像ファイルなどすべてのファイルは、商用・非商用にかかわらず他の用途での使用、配付は一切禁止します。

○データの制作環境の違いにより、開けない、もしくは正しく動作しないことがあります。バージョンをお確かめのうえ、ご利用ください。

○サンプルデータをダウンロードした結果については、著者、サンプルデータ権利者、プラグインおよびライブラリの権利者、および株式会社エムディエヌコーポレーションは、一切の責任を負いかねます。各自の責任においてご利用ください。

○本サンプルは2010年5月28日までの公開となります。


■ダウンロード

ページ数 記事タイトル
P.29 画面遷移なしですばやくダイアログやフォームを表示する >> download
P.30 タブをクリックしてフェード&スライドする >> download
P.31 メニューにアニメーションを使い高級感を演出する >> download
P.32 指定個所以外の部分を暗くし文字表示で注目させる >> download
P.33 フォームへのテキスト入力時に内容を自動補完する >> download
P.34 スライドアニメーションで切り替わる項目を絞り込む >> download
P.35 美しく見せたいメイン画面を自動で左方向にスライドする >> download
P.36 さまざまな効果で画像を切り替えて動きを出す >> download
P.37 iPod風に勢いよくメニューを表示する >> download
P.38 マウスホイールで横方向に画面遷移させる >> download
P.39 浮かび上がるボックスにちょっとした情報を表示する >> download
P.40 四角形の残像エフェクトでユーザーの視線を誘導する >> download
P.41 Wikipediaと連動したツールチップで注釈表示する >> download
P.42 タブレイアウトのコンテンツを斜めスクロールで見せる >> download
P.43 インフォメーションをスライドしながら表示する >> download
P.44 ナビゲーションメニューを3Dエフェクトで回転する >> download
P.45 アイコンメニューをMac OS Xのドック風表現に見せる >> download
P.46 インフォメーションパネルを画面上でスライドさせる >> download
P.47 イベントカレンダーをスライドさせて切り替える >> download
P.48 ティッカーをふわっとフェードイン&アウトする >> download
P.49 マウスオーバーでバナーがスロットマシン風に変化する >> download
P.50 文中に配置した画像を滑らかなアニメーションで拡大する >> download
P.51 アンケートフォームの回答欄にスライダをつける >> download
P.52 背景画像を重ねてスクロールを演出する >> download
P.53 フローティングメニューがスクロールに追随する >> download
P.54 情報パネルを画面外からスライドさせて表示する >> download
P.55 背景画像を自動でスクロールさせ臨場感を出す >> download
P.56 マウスオーバーで別のエリアにコメントを表示する >> download
P.57 フォームの入力ミスをその場で指摘する >> download
P.58 ムービーが拡大・縮小してアニメーション再生する >> download
P.59 横にスクロールできるリッチなボックスをつくる >> download
P.60 Flashムービーのように写真をくるっとめくる >> download
P.61 クリックで自由に開閉するパネルをつくる >> download
P.62 ドラッグ&ドロップでCookieに登録する >> download
P.63 情報が縦にスライドしてローテーション表示する >> download
P.64 透明やフラッシュ状態になるロールオーバーを表現する >> download
P.65 ぼかした画像でメニューのロールオーバーを強調する >> download

←BACK

Copyright (c) 2009 MdN Corporation  All rights reserved.