スタイルシートデザインのネタ帳
プロが教えるCSSデザイン実用テクニック
はじめに
本書について
Chapter1 Typography-タイポグラフィ
[1-1]大見出し-Titleor Major Heading
01 高級感のあるタイトルデザイン
◆背景画像+background-position
02 美しい背景画像と一体化した見出し
◆背景画像+background-position/Image Replacement
03 独特のタッチで表現するカリグラフィのタイトル
◆背景画像+background-image/Image Replacement
[1-2]中見出し-First Sub-heading
04 背景画像を効果的に使ったタイトルバー
◆背景画像+background-image
05 デザイン処理した囲み線で見出しを強調する
◆背景画像+background-image
[1-3]小見出し-Second Sub-heading
06 文字間を広げて可読性を向上させる
◆テキスト+letter-spacing
07 記事の見出しと区切り線を組み合せた表現
◆テキスト(見出し)+border
08 魅力的なアイコン付きの記事見出し
◆背景画像+background-image
[1-4]本文-Text
09 タグクラウド風のリンク表示
◆テキスト+リスト+display[inline]
10 ブラウザのテキストズームに対応した相対単位の文字指定
◆テキスト+相対単位em
[1-5]キャプション-Caption
11 CSSで指定するキャプションの装飾記号
◆テキスト+:before疑似要素+:after疑似要素
12 写真の中に表示するキャプションの指定
◆テキスト+(negative)margin
[1-6]リスト-List
13 読みやすく見栄えのよい箇条書き
◆リスト+リストマーカー+list-style-image
14 クールなリストマーカーのデザイン
◆リスト+リストマーカー+background-image
Chapter2 Color-カラー
[2-1]単色調和-Single Color Harmony
15 鮮やかな色のグルーピングで可愛らしさを表現
◆画像+背景画像+background+color
16 白を基調としたページにアクセントカラーを置く
◆テキスト+border+background+color
[2-2]同系色調和-Similar Color Harmony
17 色相を統一して写真に雰囲気を与える
◆背景画像+background-image[fixed]
18 グレースケールでメカニックな表現
◆背景画像+background-image
[2-3]類似調和-Resemblance Color Harmony
19 背景画像の重ね合わせで表現する透明感のあるレイアウト表現
◆画像+背景画像+background-image
20 寒色系の類似色で落ち着いた印象を与える
◆画像+背景画像+color
[2-4]補色調和-Complementary Color Harmony
21 テクスチャを使ったメリハリある子ども向けのデザイン
◆背景画像+background-image
22 補色を組み合わせたサイケデリックな表現
◆画像+背景画像+background-image
Chapter3 Graphic-グラフィック
[3-1]写真-Photography
23 Webに適した写真補正で見栄えと軽量化を実現
◆画像+背景画像+background-image
24 写真の1点使いでダイナミックにみせる
◆背景画像+background-image
25 ブレた写真を使ったライブ感のあるリアルな表現
◆背景画像+background-image
[3-2]イラストレーション-Illustration
26 ペンで描いたラフなイラストでシンプルな美しさを表現
◆背景画像+background-position
27 墨のテイストを生かした水墨画風のデザイン
◆背景画像+透過PNG+background-image
28 網点や原色で演出するレトロなコミック風グラフィック
◆画像(グラフィック処理)
[3-3]タイポグラフィ-Typography
29 ドカンと飛び出すインパクト重視のタイトル文字
◆画像(グラフィック処理)
30 縦書きの見出しを使って「和」を表現
◆テキスト+writing-mode/CSS3Text Layout Module
[3-4]コラージュ-Collage
31 ボックス内に写真を自由にちりばめた印象的なデザイン
◆画像+position
32 タイトルと写真をランダムに重ね合わせてリズムをつくる
◆画像+背景画像+position+z-index
[3-5]インフォメーション-Information Graphic
33 数値データをビジュアル化したインフォメーショングラフィック
◆画像(グラフィック)
34 見やすくて美しいテーブルのカラーリング
◆画像(グラフィック)+table要素
Chapter4 Layout-レイアウト
[4-1]カバーグラフィック中心レイアウト-Cover-based Layout
35 背景画像のビジュアルがメインのページレイアウト
◆背景画像+background-attachment
36 ぼかした画像を使った奥行き感のあるレイアウト
◆背景画像+background-image
37 背景画像の重ね合わせで表現する透明感のあるレイアウト表現
◆背景画像+透過PNG+background-image
[4-2]テキスト中心レイアウト-Text-based Layout
38 テキストで魅せるニュースペーパー風のレイアウト
◆テキスト+4カラムレイアウト+float
39 縦組みと横組みを混在させたレイアウト
◆テキスト+float+position
[4-3]グリッドモジュールレイアウト-Grid Module Layout
40 余白の美しさを生かすブロックレイアウト
◆画像+背景画像+margin+padding
41 グリッド上に写真をレイアウトした安定感のある表現
◆画像+リスト+float+position
[4-4]マルチカラムレイアウト-Multi-column Layout
42 左右振り分け型の3カラムレイアウトを作成する
◆テキスト+3カラムレイアウト+float+negativemargin
43 インデックスの機能と一覧性を重視した4段組みレイアウト
◆テキスト+リスト+4カラムレイアウト+float
44 背景画像で分割するマルチカラムレイアウト
◆背景画像+3カラムレイアウト+float
Chapter5 Interface-インターフェイス
[5-1]グローバルインターフェイス-Global Interface
45 リストのスタイル指定でつくる定番のナビゲーション
◆画像+リスト+float
46 JavaScriptを使わないCSSのロールオーバー
◆画像+リスト+background-position
[5-2]ローカルインターフェイス-Local Interface
47 CSSによるドロップダウンナビゲーション
◆リスト+float+position+negative margin
48 訪問済みのページを視覚的に表現するアイデア
◆画像+リスト+:visited疑似クラス
49 パンくずリストのデザイン
◆リスト+:before疑似要素
[5-3]アイコン-Icon
50シルエットで表現するアイコンの使い方
◆画像+リスト+:hover疑似クラス
51手描きのアイコンで温かい雰囲気を演出
◆背景画像+background-image
[5-4]コントロール-Control
52使いやすさを優先した入力フォームのデザイン
◆フォーム+form要素
53フォームのボタンをデザインする
◆フォーム+form要素+background-color
著者プロフィール