デザイン目次
本書で紹介しているデザインのコードをご案内します。
解説で理解したコードの表示確認用としてご利用ください。
Prologue 本書を読む前に
Chapter 1背景・画像・写真
- 01写真下背景色のずらし装飾
- 02写真の背景斜線ずらし装飾
- 03写真のドットパターン背景ずらし装飾
- 04被写体の影ずらし装飾
- 05写真に斜線枠
- 06角に三角装飾
- 07角に切り込み
- 08ロゴ画像の白背景を透過させる
- 09写真フィルター
- 10画像の形状を変える
- 11画像をテキストのかたちにクリッピング
Chapter 2見出しやテキストの装飾
- 01見出し
- 2色の線を重ねた見出し - 疑似要素
- 2色の線を重ねた見出し - linear-gradient
- 左右に線を配置した見出し
- 吹き出しの見出し
- 手書き風英字を背景にした見出し
- 英字と線を組み合わせた見出し
- 数字と線を組み合わせた見出し
- シンプルなあしらいを施した見出し
- 02テキスト装飾
Chapter 3ボタンデザイン
- 01ずらした斜線背景と背景色
- 02ずらした枠線と背景色
- 03斜線枠と背景色
- 04グラデーション
- 05背景色と線
- 06背景色と点と線
- 07背景色とシンプル矢印
- 08背景色とシンプル矢印に丸背景
- 09背景色と矢印
- 10背景色と別窓
- 11背景色と角に三角矢印
- 12円とシンプル矢印
- 13歪んだ円とシンプル矢印
- 14テキストに重ねた円とシンプル矢印
- 15円と線
Chapter 4レイアウト
- 01Flexboxレイアウト
- 横並び1行レイアウト
- 横並び複数行レイアウト
- グローバルナビゲーションアクセシビリティ
- ヘッダーレイアウトアクセシビリティ
- パンくずリストアクセシビリティ
- ページネーションアクセシビリティ
- 横並びコンテンツの上下中央配置
- 横並びコンテンツの偶数番目のレイアウト変更
- フォームレイアウトアクセシビリティ
- 定義リストレイアウト
- カードレイアウトのボタンのみ下部揃えに配置
- 02写真だけ画面いっぱいに配置
- 03Pinterest風カードレイアウト
- 04モダンな上下左右中央配置
- 05簡易カルーセルスライダー
- 06簡易アコーディオンアクセシビリティ
Chapter 5お問い合わせフォーム
Chapter 6現場で使えるWebツールと素材配布サイト
- 01Webツール
- 02写真
- 2-1Pexels
- 2-2Free Stock Photos - BURST
- 2-3GIRLY DROP
- 2-4O-DAN
- 03イラスト
- 3-1ソコスト
- 3-2Loose Drawing
- 3-3ちょうどいいイラスト
- 3-4shigureni free illust
- 3-5イラストナビ
- 3-6Linustock
- 3-7Open Peeps