CSS＆JavaScript表現アイデア帖

定価 1,980円
（本体 1,800円＋税10%） ※電子書籍の価格は各販売ストアにてご確認ください｡

紙の本を買う

紙の書籍を購入
- Amazon
- ヨドバシ.com

発売日	：2008-07-18
仕様	：A4変／144P
ISBN	：978-4-8443-5992-0

Webサイト制作でいまや必須の技術であるCSSを中心に、デザインに差をつけるJavaScriptのテクニックを紹介。CSSやJavaScriptでつくるデザインのTipsと、抑えておきたいCSSの知識をテーマごとにまとめました。今日から、明日からすぐに役に立つTipsと知識をこの1冊で学べます。「CHAPTER2」「CHAPTER4」で使用しているサンプルデータは特設Webサイトで閲覧可能です。本書と合わせてご利用ください。

→ダウンロードはこちら

CSS＆JavaScript表現アイデア帖

CHAPTER1
CSS＆JavaScriptで表現するデザインパーツ62

［レイアウト］
01　特定箇所だけ文字サイズを変更可能にするレイアウト
02　クリックで展開と折りたたみができるレイアウト
03　好きな画像で作成するラジオボタン
04　選択項目に応じて入力項目が切り替わるフォーム
05　条件分岐コメントでIEのCSSを制御
06　フッター部分をページ下部に固定するレイアウト
07　下辺をキレイに揃えたフロートボックス
08　ブラウザ幅の可変に対応したバナー
09　ブラウザの画面中央にボックスを配置
10　視覚的に訪問済みを表現するチェックマーク
11　文字サイズに合わせて画像サイズを変更
12　スクロールで変化する固定配置された背景
13　JavaScriptとCSSでつくる動的な日付表示
14　ウィンドウの幅に合わせて可変するカラムレイアウト
15　CSSで実現するさまざまなレイアウト
16　ユーザーの操作に反応して動的に表示する脚注
17　つねに画面下へ配置されるフッター
18　ボタンをクリックしてWebページを直接印刷
19　CSSで実現するフェードイン／フェードアウト
20　CSSを使った見栄えのよい表組みレイアウト
21　positionを使ったイメージマップ効果
22　< blockquote >タグを活用したオシャレな引用文
23　ブラウザごとに異なるCSSを反映
24　背景画像を活用した角丸ボックス
25　ボックスの背景を彩るドロップシャドウ
26　CSSを使った見栄えのよい印刷設定
27　凝ったデザインに見えるインラインフレーム風の表示

［画像］
28　タイトル写真などに深みを出す半透明処理
29　JavaScriptなどをつかって簡易的な商品回転を演出
30　注目させたい内容にステッカーを使い効果的に訴求
31　マウスホイールで実現するパラパラ漫画風インターフェイス
32　サムネールにマウスオーバーすると拡大表示する仕掛け
33　z-indexを利用した動的に変化する背景
34　オリジナルパターンのborderをクリックした画像に表示
35　テキストサイズの可変に対応する背景画像＋画像ボタン
36　CSSのみで作成するロールオーバーマップ
37　ロールオーバー時にボタンのように挙動するリンク画像
38　時間によって変化するイメージ＆カラー
39　床面に反射しているような映り込み表現の作成

［ボタン］
40　CSSでボタンにツールチップを表示
41　見た目とアクセシビリティを両立したボタン
42　カスタマイズ性を考慮したボタンの制作
43　見た目とユーザビリティの両立を図るアイコン表示

［テキスト］
44　CSSだけで実装するドロップシャドウ
45　hovor時にアニメーション下線を表示するリンク
46　シンプルなテキストを、CSSでバナー風のデザインに
47　ウインドウ幅に合わせて文字を左右合わせに配置

［メニュー］
48　フレキシブルなプルダウンメニュー
49　ひとつの画像だけで動かすシンプル・ロールオーバー
50　横スライドで項目が入れ替わるナビゲーション
51　リストメニューで切り替える画像
52　カスタマイズ可能なパンくずリストのアイデア
53　マウスオーバーで一瞬だけ光るメニュー
54　略語のフルスペルをマウスオーバーで表示
55　テキストリンクをCSSのみで装飾
56　マウスオーバー時にポイントするGIFアニメーション
57　擬似要素をうまく使いより効果的な見た目を演出
58　余白を有効活用!　余白部分にメニューを表示
59　パンくずリストを活用したメニュー
60　ネガティブマージンで、動きのあるメニュー
61　パンくずリストの各リンクに背景画像を指定
62　離れた場所を変化させるリモートロールオーバー

使えるJavaScriptライブラリ1

CHAPTER2
WEBデザインTIPS&TRICKS vol.1

01　セレクトメニューで内容を展開する
02　フォームをリセットする前に別ウインドウを開いて確認画面を表示する
03　自サイト外からのリンクをトップページに飛ばす
04　画像などの読み込み状態を表示する
05　ページ内にあるリンクのtarget 属性の値をチェックボックスで一括変換
06　パンくず型ナビゲーションのページタイトルを自動表示
07　多機能なスライドショー
08　ディスプレイの中央にサブウインドウを開く
09　リストをテーブルで組んだようにデザインする
10　セレクトメニューを連携させたコンパクトなインターフェイス
11　ボックス型ナビゲーションをCSS で実現する
12　訪問済みリンクにチェックマークをつける
13　画像ギャラリーをリストで定義し、CSS でスタイリングする
14　画像ギャラリーをdl 要素で定義し、CSS でスタイリングする
15　印刷用スタイルの作成方法
16　JavaScript を使わないCSS のみのロールオーバー効果
17　テーブルの一部にスクロールバーを表示させる
18　address 要素が使えるシチュエーション
19　フォームからの二重送信を防ぐ
20　ユーザーにスタイルシートを選んでもらう
21　Windows 版IE6 でも1 ピクセルの「dotted」ボーダーを実現する
22　画像ファイルを先読みする
23　cursor プロパティの使い方と注意点
24　送信ボタンのデザインテクニック
25　:first-letter 疑似要素のブラウザ実装の違い
26　コピーライトの年度を自動更新
27　:hover など疑似クラスの上手な使い方
28　CSS レイアウトでの表示ズレの解消法
29　リストマーカーをbackground プロパティで埋め込むときの注意点
30　Cookie情報に基づいて新着メッセージの表示・非表示を切り替える
31　特定の年月日までの秒数をカウントダウンする
32　イメージマップに説明文を組み合わせる

使えるJavaScriptライブラリ2

CHAPTER3
テーマ別CSSデザイン総整理

SESSION1　ビジュアルで見るスタイルシート組み立てガイド
SESSION2　スタイルシートレイアウトの落とし穴
SESSION3　スタイルシート実践コーディング!
SESSION4　スタイルシートアクセシビリティガイド
SESSION5　日々進化する最新のデザインテクニック
SESSION6　陥りやすいCSSのワナと回避法
SESSION7　モバイル環境のためのスタイルシート
SESSION8　CSSで行うひと味違ったブログデザイン

使えるJavaScriptライブラリ3

CHAPTER4
WEBデザインTIPS&TRICKS vol.2

01　JavaScript が有効な人にだけ要素を表示する
02　折りたたんだり広げたりできるコンテンツボックス
03　CSS を使って縦の棒グラフを描く
04　写真画像に縁取りをするテクニック
05　大きな画像をきれいな演出で見せるテクニック
06　入力したパスワードの安全性をリアルタイムに表示
07　CSS での回り込み時に背景を正しく表示させる
08　ページ内容の一部だけを書き換えるテクニック
09　ページ内リンクをスムーズに行う方法
10　タブ型インターフェイスを簡単に実現
11　送信ボタンの二度押しを防止する
12　文字サイズをユーザーが変更できるテクニック
13　CSS だけでフレームを実現
14　テキスト部分をクリックしたらハイライトさせる
15　コードを掲載するときのCSS テクニック
16　クリックすると沈み込むリンク
17　角丸のデザインを簡単に実現する方法
18　Flash のバージョンを検知する
19　「お気に入りに追加」ボタンを設置するテクニック
20　フォームの見た目を変えるテクニック
21　Validate.js でフォームの入力チェック
22　日本の休日に対応したカレンダー入力
23　アナログ時計で指定できる入力コントロール
24　Yahoo! UI Library を使ってみよう
25　ポップアップウインドウをスマートに表示させる方法
26　画面をロックしてユーザーに操作をさせない方法
27　情報をアニメーションして表示する方法
28　チャットのような吹き出し枠をつくる方法
29　写真を細部まで見せる「TJPzoom.js」
30　クロスフェードでコンテンツを表示する方法
31　ツールチップでヘルプを表示する方法
32　JS ライブラリ「Spry」を使ってみる
33　ボタンをCSS でデザインする方法
34　ページ内でテーブルをスクロール
35　画像にさまざまな効果を施す「corner.js」
36　XML で制作したデータをWeb ページに表示する
37　画面をグレーアウトさせる
38　ひとつのボタンで表示／非表示を切り替える
39　進行状況を表示する「プログレスバー」をつくる
40　右クリックメニューをつくる
41　ファイル選択コントロールをすてきに変える方法
42　半透明なツールチップを表示する
43　Spry でアコーディオンウインドウをつくる
44　金額をカウントアップするキャッシュレジスター
45　画像にめくれたような効果をつける「Curl.js」
46　スムーズなフォトギャラリーをつくる方法