JavaScriptプログラマのためのWebデザイン入門

概 要

JavaScriptとXHTML、CSS、APIを活用したWebデザインのノウハウを解説したデザイン入門書です。RIAの登場により、WebページのUIはFlash、Javaアプレット、Ajaxなど高度な技術が使われるようになり、Webデザイナーにもプログラミングの知識が必要になりつつあります。そこで本書では、PhotoshopとGIMPを使ったWeb素材作成の基本、ECサイトやYoutubeの動画を紹介するサイトの作り方をチュートリアル形式で解説。さらに、XHTML、CSS、JQueryを使ったWebサイトのデザインを学びます。Webデザインに興味のあるJavaScriptプログラマ、CSSやJavaScriptに興味のあるWebデザイナーにおすすめの一冊です。サンプルのダウンロードサービスのほか、素材作成手順(3章)を解説した動画を無料公開します(本ページ「サポート情報」を参照)。

著者 葛西秋雄、喜安亮介
価格 本体2800円(税別)
ISBN 978-4-7980-2726-5
発売日 2010/9/8
判型 B5変
色数 4色
ページ数 240
CD/DVD
対象読者 初級
シリーズ
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

※リンク先によっては、販売ページが用意されていないことがあります。あらかじめご了承ください。

新しいウィンドウで開く 書籍購入のご案内

サポート

サポート情報は以下からご参照下さい。

サポート情報へのリンク

目次

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で回転させる

PR

秀和システム