購入前に目次をご確認ください
MdN Web Mook 現場で役立つCSS3デザインパーツライブラリ
エムディエヌコーポレーション / 2013年05月17日 / 全314ページ
【デザイン性にすぐれ、スマホやWeb制作にそのまま使えるデザインパーツを厳選して掲載。CSS3で制作したWebパーツ素材集！】
ボタンやアイコン、ナビゲーション、ぱんくずリストやローディングメニュー、背景パターンなど約120点。デザイン性にすぐれ、スマートフォンやWeb制作の現場ですぐに使えるデザインパーツを厳選して、カスタマイズするためのポイントを解説しました。CSS3で制作した今までにないWebパーツ素材集！Webパーツのデータは専用サイトからダウンロードできます！
ボタンやアイコン、ナビゲーション、ぱんくずリストやローディングメニュー、背景パターンなど約120点。デザイン性にすぐれ、スマートフォンやWeb制作の現場ですぐに使えるデザインパーツを厳選して、カスタマイズするためのポイントを解説しました。CSS3で制作した今までにないWebパーツ素材集！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 スマートフォンサイトで使用する縦・横ストライプの背景
- 扉
- 免責事項
- はじめに
- 本書の使い方
- 目次
- サンプルダウンロードと使用許諾
- ■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 スマートフォンサイトで使用する縦・横ストライプの背景
- 02 スマートフォンサイトで使用する斜めストライプの背景
- 03 スマートフォンサイトで使用するひし型のパターン背景
- 04 背景色が透過したチェック模様
- 05 色鮮やかなマルチボーダー柄
- 06 背景パターンに半透明マスクをかける
- 07 領域を半透明にして背景写真が見えるようにする
- 08 領域に微妙なグラデーションを設定する
- 09 背景に円形グラデーションを設定する
- 10 内側にシャドウを設定したボックス
- 11 エンボス風のシャドウを設定したボックス
- 12 フルスクリーンのスライドショー
- ■CHAPTER 3 タイポグラフィ
- 01 カラフルな見出し
- 02 立体感を増したカラフルな見出し
- 03 立体的なアイコン付き見出
- 04 角丸を使用したタブ風見出し
- 05 リボン型の見出し
- 06 吹き出し型の見出し
- 07 タイトル付きの角丸テキストボックス
- 08 仕切り線が入った角丸テキストボックス
- 09 グラデーション状の仕切り線
- 10 メモ帳のようなテキストボックス
- 11 紙の端が折れたようなコンテンツ枠
- 12 装飾した番号付きリスト
- 13 グラデーションを使用したロゴテキスト
- 14 大胆に傾けて立体的な影を付けたロゴ
- 15 文字ごとに角度や大きさで変化を付けたタイトル
- 16 アニメーションしながら出現するテキスト
- 17 文字ごとにカラフルな装飾を施したロゴ
- 18 Webフォントとテクスチャで作るかすれた文字
- ■CHAPTER 4 ナビゲーション
- 01 立体的なボタン
- 02 立体的なアイコンボタン
- 03 黒い立体的なボタン
- 04 矢印型の「戻る／次へ」ボタン
- 05 立体的なトグルボタン
- 06 2つセットの切り替えボタン
- 07 2トーンのグラデーションを使用したカラフルなボタン
- 08 クリック時にくぼんだように見えるボタン
- 09 アイコン付きのカラフルなボタン
- 10 ふんわりとアニメーションするボタン
- 11 表紙がめくれて中身が見えるボタン
- 12 マウスオーバーでモーフィングするボタン
- 13 マウスオーバーでアイコンが回転するボタン
- 14 CSSのみで作るグローバルナビゲーション
- 15 CSSで作るアイコンナビゲーション
- 16 エンボス風の縁を付けたアイコンナビゲーション
- 17 シンプルなアンダーラインナビゲーション
- 18 横幅100%のアイコン付きナビゲーション
- 19 立体感のある横幅100%のアイコン付きナビゲーション
- 20 横幅100%のヘッダー固定のナビゲーション
- 21 ボタンが端に来る横幅100%のヘッダー固定ナビゲーション
- 22 吹き出し型ナビゲーション
- 23 マウスオーバーで上下に画像が表れるナビゲーション
- 24 マウスオーバーで吹き出しが出るナビゲーション
- 25 マウスオーバーでサブメニューが現れる円形ナビゲーション
- 26 リストを使用した縦型ナビゲーション
- 27 説明テキスト付きの縦型ナビゲーション
- 28 ボタン付きの縦型ナビゲーション
- 29 サムネイル付きリストナビ
- 30 タブ風のナビゲーション
- 31 コンテンツがフェードインで切り替わるタブ
- 32 ページネーション
- 33 クリックでプルダウンメニューを展開させるナビゲーション
- 34 レスポンシブWebデザインのヘッダーナビゲーション
- 35 パンくずリスト
- ■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を使用してメニューを作成する
- 索引
- 著者紹介
- 奥付
- カバー
※このデジタル雑誌には目次に記載されているコンテンツが含まれています。それ以外のコンテンツは、本誌のコンテンツであっても含まれていません のでご注意ください。
※電子版では、紙の雑誌と内容が一部異なる場合や、掲載されないページがある場合があります。
