MdNの本

現場で役立つCSS3デザインパーツライブラリ

現場で役立つCSS3デザインパーツライブラリ

現場で役立つCSS3デザインパーツライブラリ

デザイン性にすぐれ、スマホやWeb制作にそのまま使えるデザインパーツを厳選して掲載。CSS3で制作したWebパーツ素材集!

太田 智彬 著/鍋坂 理恵 著/ハヤシ ユタカ 著/早瀬 有花 著/境 祐司 監修
A5判 / 312P
ISBN978-4-8443-6343-9 / 価格(本体2,800円+税)※電子版の価格は販売ストアにて
2013年05月17日発売

Web制作の現場では、今やスマートフォンやタブレットなど多様なデバイスに対応させるために、従来の画像を中心にしたグラフィックではなく、CSS3を使ったグラフィックパーツやインターフェイスを作る必要性に迫られています。同時に量と質とスピードを求められているのが現状です。
本書は、そのような現場のニーズに応えるべく、ボタンやアイコン、ナビゲーション、ぱんくずリストやローディングバー、背景パターンなど、デザイン性にすぐれ、スマートフォンやWeb制作の現場ですぐに使えるデザインパーツを約120点、厳選して素材集として提供した今までにないCSS3の書籍です。紙面には、各パーツの対応環境や、プロパティとコード、そしてカスタマイズするためのポイントを簡潔に解説しました。Webパーツのデータは専用サイトからダウンロード可能です。

twitter facebook google+ このエントリーをはてなブックマークに追加 RSS

ページイメージ

クリックすると折りたためます
■ページ見本
















目次

クリックすると開きます

【目次】
INTRODUCTION CSSの基本
01 HTMLとCSSの基礎知識
02 CSS3で追加されたプロパティと表現力
03 Webブラウザの種類
04 CSS3の実装状況
05 Internet Explorer 対策のまとめ

CHAPTER 1 アイコン
01 Webフォントについて
02 ソーシャルメディアやブログサービスのアイコンフォント
03 スマートフォンやタブレットなどのデバイスアイコンを表示
04 晴れ・曇り・雨などのウェザーアイコンを表示
05 Webフォントを利用したデコレーションの表現

CHAPTER 2 バックグラウンド
01 スマートフォンサイトで使用する縦・横ストライプの背景
variation_グレーの細い横ストライプ
variation_グレーの細い縦ストライプ
02 スマートフォンサイトで使用する斜めストライプの背景
variation_グレーの細い斜めストライプ
variation_チェックのパターン背景
03 スマートフォンサイトで使用するひし型のパターン背景
variation_グレーのひし形パターン
04 背景色が透過したチェック模様
variation_ポップな印象のチェック模様
05 色鮮やかなマルチボーダー柄
06 背景パターンに半透明マスクをかける
07 領域を半透明にして背景写真が見えるようにする
08 領域に微妙なグラデーションを設定する
09 背景に円形グラデーションを設定する
variation_メモ帳のような背景パターン
10 内側にシャドウを設定したボックス
11 エンボス風のシャドウを設定したボックス
12 フルスクリーンのスライドショー


CHAPTER 3 タイポグラフィ
01 カラフルな見出し
02 立体感を増したカラフルな見出し
03 立体的なアイコン付き見出
variation_アイコン付きのカラフルな見出し
04 角丸を使用したタブ風見出し
variation_タブ風の立体的な見出し
05 リボン型の見出し
06 吹き出し型の見出し
07 タイトル付きの角丸テキストボックス
08 仕切り線が入った角丸テキストボックス
variation_黒背景に合うグレーの仕切り線
09 グラデーション状の仕切り線
10 メモ帳のようなテキストボックス
11 紙の端が折れたようなコンテンツ枠
12 装飾した番号付きリスト
13 グラデーションを使用したロゴテキスト
14 大胆に傾けて立体的な影を付けたロゴ
15 文字ごとに角度や大きさで変化を付けたタイトル
16 アニメーションしながら出現するテキスト
17 文字ごとにカラフルな装飾を施したロゴ
18 Webフォントとテクスチャで作るかすれた文字

CHAPTER 4 ナビゲーション
01 立体的なボタン
variation_エンボス風な縁が立体的なボタン
02 立体的なアイコンボタン
variation_画像を使用したアイコンボタン
03 黒い立体的なボタン
variation_黒いアイコンボタン
04 矢印型の「戻る/次へ」ボタン
05 立体的なトグルボタン
06 2つセットの切り替えボタン
07 2トーンのグラデーションを使用したカラフルなボタン
08 クリック時にくぼんだように見えるボタン
09 アイコン付きのカラフルなボタン
10 ふんわりとアニメーションするボタン
11 表紙がめくれて中身が見えるボタン
12 マウスオーバーでモーフィングするボタン
13 マウスオーバーでアイコンが回転するボタン
14 CSSのみで作るグローバルナビゲーション
variation_2トーンカラーのグローバルナビゲーション
15 CSSで作るアイコンナビゲーション
variation_青いアイコンナビゲーション
16 エンボス風の縁を付けたアイコンナビゲーション
17 シンプルなアンダーラインナビゲーション
18 横幅100%のアイコン付きナビゲーション
19 立体感のある横幅100%のアイコン付きナビゲーション
20 横幅100%のヘッダー固定のナビゲーション
21 ボタンが端に来る横幅100%のヘッダー固定ナビゲーション
22 吹き出し型ナビゲーション
23 マウスオーバーで上下に画像が表れるナビゲーション
24 マウスオーバーで吹き出しが出るナビゲーション
25 マウスオーバーでサブメニューが現れる円形ナビゲーション
26 リストを使用した縦型ナビゲーション
27 説明テキスト付きの縦型ナビゲーション
28 ボタン付きの縦型ナビゲーション
29 サムネイル付きリストナビ
variation_サムネイルとボタン付きリスト
30 タブ風のナビゲーション
31 コンテンツがフェードインで切り替わるタブ
32 ページネーション
variation_ボタンの隙間のないページネーション
33 クリックでプルダウンメニューを展開させるナビゲーション
34 レスポンシブWebデザインのヘッダーナビゲーション
35 パンくずリスト
variation_角が丸いパンくずリスト
variation_吹き出し状のパンくずリスト


CHAPTER 5 グラフィックスタイル
01 角丸とシャドウを使って画像に縁を付ける
02 背景画像として配置した写真を丸く切り抜いたように見せる
03 画像の内側にシャドウや色を重ねる
04 写真の上にグラデーションを載せる
05 写真の縁がめくれたような影を付ける
06 写真の縁に部分的にシャドウを載せる装飾
07 写真上にキャプションやタイトルを付ける
08 サムネイルのロールオーバーアニメーション
09 テープで貼付けたようなスタイルをCSSで作る
10 写真が重なったような枠
11 写真がズームしてコンテンツが表示されるスタイル
12 写真を加工して表示する
13 カレンダー風テキストボックス
14 カラフルなカレンダー風アイコン
15 1 ヶ月分のカレンダー
16 折れ曲がった紙のような効果
17 アイコンが大きく拡大されるカード
18 めくれた感じのシール型バッジ
19 ギザギザした星型バッジ
20 タグ風のアイコン
アイコン付きのタグ
21 新着情報などのカウントバブル
22 吹き出し型ツールチップ
23 CSS3のアニメーションで作るメインビジュアル
24 回転するローディングアニメーション
25 ドットタイプのローディングアニメーション
26 ラインタイプのローディングアニメーション
27 バータイプのローディングアニメーション

CHAPTER 6 フォーム
01 フォームエリアを装飾する
02 アイコン付きの検索フォーム
03 さまざまなアイコン付き入力フィールド
04 会員制サイト用のログインフォーム
05 ウィンドウ風のログインフォーム
06 黒いログインフォーム
07 シンプルなログインフォーム
08 ボタンがアニメーションするログインフォーム

CHAPTER 7 ジェネレータ
01 Patternizerを使用して背景パターンを作成する
02 Patternifyを使用して背景パターンを作成する
03 CSS3 Button Generatorを使用してボタンを作成する
04 CSS3 Generatorを使用して角丸のボックスを作成する
05 CSS Menu Makerを使用してメニューを作成する

索引
著者紹介

関連記事があります

  • ソーシャルアプリ制作の裏側/第8回コロプラ「プロ野球PRIDE」

    インタビュー ソーシャルアプリ制作の裏側/第8回コロプラ「プロ野球PRIDE」

  • ソーシャルアプリ制作の裏側/第2回サイバーエージェント「天空のクリスタリア」

    インタビュー ソーシャルアプリ制作の裏側/第2回サイバーエージェント「天空のクリスタリア」

  • ソーシャルアプリ制作の裏側/第1回gloops「大召喚!!マジゲート」

    インタビュー ソーシャルアプリ制作の裏側/第1回gloops「大召喚!!マジゲート」

カスタマーレビュー(出典:amazon.co.jp)

カスタマーレビュー(出典:amazon.co.jp)