MdNCORPORATION

CSS&JavaScript表現アイデア帖

CSS&JavaScript表現アイデア帖

本体 1800円(税別) ※電子書籍の価格は各販売ストアにてご確認ください。
発売日 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 スムーズなフォトギャラリーをつくる方法

Web業界で働く人に読んでほしい!マーケティングの基本を学ぶオススメ8選

デザイナー志望の学生必見!勉強にぴったりな定番デザイン書セレクション