目次

Part 1 PhotoshopとGIMPでWeb素材を自作する

Chapter 1 Web素材を作成するソフトウェアについて

1-1 グラフィックソフトウェアの基本と共通概念

新規作成

レイヤーの概念

選択範囲の基本

選択範囲の作成方法

テキスト操作の基本

1-2 ソフトウェアの紹介

Adobe Photoshop

GIMP

Chapter 2 スイーツを販売するECサイトをデザインする

2-1 ストライプ柄の背景画像を作成する

2-2 コンテンツエリアを作成する

2-3 サイトナビゲーションを作成する

2-4 サイトロゴをデザインする

2-5 メインの写真を加工する

2-6 サムネイル画像のフレームを作成する

2-7 「詳細を見る」ボタンを作成する

2-8 色相を変えたカラーバリエーションを作成する

2-9 完成したデザインを書き出す

Chapter 3 YouTube動画を紹介する個人サイトをデザインする

3-1 背景画像を作成する

3-2 サイトロゴを作成する

3-3 ナビゲーションを作成する

3-4 コンテンツの見出しを作成する

3-5 YouTube動画のキャプチャ画像を貼り付ける

3-6 フッターエリアを作成する

3-7 必要なグラフィックパーツを最適化して保存する

Chapter 4 DVD・ミュージックCDを紹介するブログサイトをデザインする

4-1 背景画像を作成する

4-2 サイトロゴを作成する

4-3 記事エリアとナビゲーションを作成する

4-4 記事タイトルを作成する

Part 2 CSSとjQueryでWebページをデザインする

Chapter 5 ダイナミックなWebページを作成するには

5-1 XHTML＋CSS

CSSの書き方

CSSの構成

import.cssファイル

reset.cssファイル

base.cssファイル

hack.cssファイル

CSSハック

IEの条件付きコメント

5-2 CSS＋jQuery

jQueryとは

jQueryで「Hello World!」を表示してみる

jQueryで実行時にCSSを変更してみる

jQueryでCSSの:hover擬似クラスをシミュレーションしてみる

Chapter 6 スイーツを販売するECサイトを作成する

6-1 PhotoshopでデザインしたECサイトのXHTML版を作成する

Miki Sweetsを作成する

メニューのイメージをプリロードする

商品画像をズームインさせる

6-2 ECサイトの商品画像を拡大したりエフェクトを適用して切り替える

商品画像をズームイン／アウトさせる

商品画像をフラッシュのようにクロスフェードさせる

商品画像を3Dで回転させる

商品画像を横にスライドさせる

6-3 ECサイトの商品画像をスライドさせてダイアログに拡大表示する

商品画像をグリッド上に表示してズームインさせる

商品のサムネイルをタブ化して拡大表示する

商品のサムネイルをスライダーで横にスライドさせて拡大表示する

商品画像／ビデオをエフェクト付きで拡大表示する

Chapter 7 YouTube動画を紹介する個人サイトを作成する

7-1 GIMPでデザインしたサイトのXHTML版を作成する

VIDEO COLLECTION!を作成する

アコーディオンを組み込む（CSS版）

アコーディオンを組み込む（IE6版）

アコーディオンを組み込む（jQuery版）

7-2 YouTubeのData APIを利用して動画を検索して表示する

YouTubeからもっとも人気のある動画を検索して表示する

YouTubeから日本語の動画を検索して表示する

YouTubeからキーワードで動画を検索して表示する

YouTubeから検索した動画をjQueryのZoomboxプラグインで表示する

7-3 YouTubeの動画をjQueryのプラグインで表示する

YouTubeから検索した動画を横にスライドさせながらズームインする

YouTubeから検索した動画をスライダーでスライドさせてその場で再生する

Chapter 8 DVD・ミュージックCDを紹介するブログサイトを作成する

8-1 GIMPでデザインしたサイトのXHMTL版を作成する

ブログサイトを作成する

8-2 jQueryのプラグインでMP3ファイルを再生する

jQueryのjMP3プラグインでMP3ファイルを再生する

jQueryのjPlayerプラグインでMP3/OGGファイルを再生する

jPlayerの再生開始位置と音量をスライダーでコントロールする

jPlayerに再生する曲名リストを表示させて選択できるようにする

8-3 AmazonからDVD・ミュージックCDを検索して表示する

AmazonからCDを検索してサムネイルを回転させる

AmazonからミュージックCDを検索してサムネイルを3Dで回転させる