MdNCORPORATION

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

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

太田 智彬 著/鍋坂 理恵 著/境 祐司 監修/早瀬 有花 著/ハヤシ ユタカ 著
定価 3,080円
(本体 2,800円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2013-05-17
仕様 A5判/312P
ISBN 978-4-8443-6343-9
Web制作の現場では、今やスマートフォンやタブレットなど多様なデバイスに対応させるために、従来の画像を中心にしたグラフィックではなく、CSS3を使ったグラフィックパーツやインターフェイスを作る必要性に迫られています。同時に量と質とスピードを求められているのが現状です。 本書は、そのような現場のニーズに応えるべく、ボタンやアイコン、ナビゲーション、ぱんくずリストやローディングバー、背景パターンなど、デザイン性にすぐれ、スマートフォンやWeb制作の現場ですぐに使えるデザインパーツを約120点、厳選して素材集として提供した今までにないCSS3の書籍です。紙面には、各パーツの対応環境や、プロパティとコード、そしてカスタマイズするためのポイントを簡潔に解説しました。Webパーツのデータは専用サイトからダウンロード可能です。

■ページ見本










目次

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を使用してメニューを作成する

索引
著者紹介

ダウンロードデータ

現場で役立つCSS3デザインパーツライブラリ
素材データダウンロード


このたびは、「現場で役立つCSS3デザインパーツライブラリ」をご購入いただきまして、誠にありがとうございます。以下に本書の解説で使用した素材データを用意しましたのでご利用ください。


【1ファイルで圧縮】

CSS3_designparts.zip(約78MB)


【各章ファイルで圧縮】

chap2.zip(約10.2MB)

chap3.zip(約7.5MB)

chap4.zip(約30.7MB)

chap5.zip(約20.1MB)

chap6.zip(約8.9MB)


【ダウンロードにあたってのご注意】

ダウンロードファイルは、ZIP形式で圧縮されています。Windows、Macそれぞれの解凍ソフトを使って圧縮ファイルを解凍してください。
解凍したフォルダ内には、各Chapter、項目ごとにフォルダ分けされて素材データが収録されています。各項目フォルダおよびファイル名は本書の各項目の冒頭に記載されていますので、ご確認ください。
※素材データを実行した結果については、著者および株式会社エムディエヌコーポレーションは一切の責任を負いかねます。お客様の責任においてご利用ください。
※本書に掲載されているソースコードのコメントや改行位置は、紙面掲載用として加工していることがあります。素材データとは異なる場合がありますので、あらかじめご了承ください。

【使用許諾範囲について】

・本サイトからダウンロードできる素材データは(以下単に「素材データ」といいます)、本製品の購入者に限り、下記に該当する使用を除き、個人・法人を問わず、そのままもしくは翻案・加工して何度でも使用できます。

(1) 公序良俗に反する態様で素材データを使用すること
(2) その一部であるか全部であるか、あるいは加工(組み合わせも含みます)の有無を問わず、素材データを再配布すること。なお、本項の「再配布」とは、有償・無償を問わず、書籍・CD・DVD等の媒体を利用する配布、インターネット等の通信手段を利用する配布等を意味します。また、素材データをサーバー等にアップロードして送信可能化する場合も含みます
(3) 素材データに関し、著作権登録、意匠登録および商標登録など知的財産権の登録を行うこと

・上記の禁止事項に該当せず、当社が許諾する方法で素材データを使用する場合は、個別に許諾申請をしていただく必要はありません。また、著作権料や二次使用料を別途お支払いいただく必要もありません。
・素材データの著作権その他一切の権利は、当社または著作者に留保されるものとします。
・素材データの使用または使用に関連して、ユーザー様に直接または間接的に生ずる一切の損害
および第三者からなされる請求について、当社および著作者ないし制作者は一切責任を負担しません。
・ご利用にあたってご不明な点がございましたら、エムディエヌカスタマーセンターまでお問い合わせください。

制作の基本からデザイン業界の最新状況まで! MdNのデザイン・グラフィック書8選

デザイン・制作・マーケティング Webでもう困らない! わかりやすくて知識が身につく8冊