HTML5&CSS3
デザインレシピ集

Chapter 2
ページの基本となるHTML

1. 007HTMLの基本マークアップ
2. 008DOCTYPE宣言を書き換えたい
3. 009ページの主要な言語を設定したい
4. 010ページの文字コードセットを設定したい
5. 011ページのタイトルを設定したい
6. 012ページの概要を記述したい
7. 013ページのキーワードを設定したい
8. 014CSSファイルを読み込みたい
9. 015CSSファイルの文字コードセットを指定したい
10. 016CSSをHTMLに直接書きたい
11. 017CSSをタグに直接書きたい
12. 018JavaScriptファイルを読み込みたい
13. 019JavaScriptをHTMLに直接書きたい
14. 020JavaScriptが動作しないときのコンテンツを記述したい
15. 021HTMLにコメントを残したい
16. 022CSSにコメントを残したい

Chapter 3
テキストの整形とデザインテクニック

1. 023段落をマークアップしたい
2. 024見出しを表示したい
3. 025段落内で改行したい
4. 026テキストの一部を強調したい
5. 027テキストの一部を太字にしたい
6. 027テキストの一部を太字にしたい
7. 028プログラムのソースコードを表示したい
8. 029連絡先を表示したい
9. 030上付き文字や下付き文字を表示したい
10. 031まとまった量のテキストを引用して表示したい
11. 032短いテキストを文中で引用して表示したい
12. 033時刻や日付を表現したい
13. 034テキストの一部にマーカーをつけたい
14. 035読みがなのルビを振りたい
15. 036略語であることを表現したい
16. 037テキストの一部を訂正したことを示したい
17. 038テキストを新たに挿入したことを示したい
18. 039短いソースコードを表示したい
19. 040ツールチップを表示したい
20. 041コピーライトを表示したい
21. 042HTMLで使用できない記号を表示したい
22. 043テキスト色を変更したい（16進数）
23. 044テキスト色を変更したい（RGB）
24. 045半透明なテキスト色を指定したい（RGBA）
25. 046font-sizeプロパティの値の単位にemを使ってはいけない例
26. 046要素ごとにフォントサイズを指定したい
27. 047ページ全体のフォントサイズを相対的に指定したい
28. 048行間を広くしたい・狭くしたい
29. 049リード文を太字にしたい
30. 050見出しのテキストを通常の太さにしたい
31. 051イタリックで表示される要素を通常のテキストに戻したい
32. 052テキストの行揃えを変更したい
33. 053文字と文字の間隔を広くしたい・狭くしたい
34. 054テキストに字消し線を引きたい
35. 055好きな色のマーカーをつけたい
36. 056段落の前後のスペースをなくしたい
37. 057段落ごとに字下げ（インデント）したい
38. 057text-indentの応用例：マークの位置を揃える
39. 0581文字目だけ大きくしたい
40. 059段落の1行目だけ見た目を変えたい
41. 060引用の前後にテキストを挿入したい
42. 061テキストの前後に記号を挿入したい
43. 062引用符を自由に指定したい

Chapter 4
リストのデザインテクニック

1. 063箇条書きを表示したい
2. 064番号付きの箇条書きを表示したい
3. 065箇条書きを1以外の数からスタートさせたい
4. 066「キーワード」と「説明」をセットで表示したい
5. 067「キーワード」と「説明」のレイアウトを変えたい
6. 068箇条書きのマークを変更したい
7. 069箇条書きのナンバリングを変更したい
8. 070箇条書きのマークを画像にしたい❶
9. 071箇条書きのマークを画像にしたい❷
10. 072箇条書きのマークでランキングを表現したい

Chapter 5
リンクと画像のテクニック

1. 073サイト内のほかのページにリンクしたい（contact.html）
2. 073サイト内のほかのページにリンクしたい（index.html）
3. 074別のサイトへリンクしたい
4. 075リンク先を別タブで開くようにしたい
5. 076ページ内リンクを設定したい
6. 077ページ内リンクで移動した先の見た目を変化させたい
7. 078メールアドレスをリンクにしたい
8. 079電話番号をリンクにしたい
9. 080PDFファイルをダウンロードさせたい
10. 081リンクテキストのスタイルを指定したい
11. 082マウスがホバーしたときにテキストを半透明にしたい
12. 083リンクの下線を点線にしたい
13. 084マウスがホバーしたときに背景色をつけたい
14. 085マウスがホバーしたときに枠線をつけたい
15. 086スマートフォンのハイライト色を変更したい
16. 087画像を表示したい
17. 088base64のデータで画像を表示したい
18. 089SVG形式の画像ファイルを表示したい
19. 090SVGのデータを直接埋め込みたい
20. 091画像にリンクをつけたい
21. 092画像を半透明にしたい

Chapter 6
ページ全体に適用するデザインのテクニック

1. 093ウィンドウ外周のマージンをなくしたい
2. 094ページ全体の背景色を設定したい
3. 095ページ全体のフォントを設定したい
4. 096ページ全体に背景画像を敷き詰めたい
5. 097ページ全体に適用した背景画像の位置を固定したい
6. 098ページの上から下にグラデーションをかけたい
7. 099リセットCSSを読み込みたい
8. 099比較用：CSSを適用しない通常のHTML
9. 100ノーマライズCSSを読み込みたい
10. 101サニタイズCSSを読み込みたい

Chapter 7
ボックスの整形とデザインテクニック

1. 102基本のボックスを作成したい
2. 103「記事」「セクション」のボックスを作成したい
3. 104そのページの中心的なコンテンツが含まれるボックスを作成したい
4. 105ボックス全体をリンクにしたい
5. 106図とキャプションを表示したい
6. 107ページの一部分にほかのHTMLを表示したい（1）
7. 108ページの一部分にほかのHTMLを表示したい（2）
8. 109ボックスにボーダーをつけたい
9. 110ボーダーとコンテンツの間にスペースを作りたい
10. 111ボックスとボックスの距離を離したい
11. 112見出しに下線をつけたい
12. 113枠線で見出しをデザインしたい
13. 114ボックスの幅と高さを指定したい
14. 115ボックスの高さを固定してスクロールバーを表示させたい
15. 116ボックスの高さを固定してコンテンツを非表示にしたい
16. 1171行で収まらないテキストを省略したい
17. 118アイコンとテキストの位置を揃えたい
18. 119ボックスと画像の下に空くスペースをなくしたい
19. 120ボックスの背景色を指定したい
20. 121ボックスの背景に画像を適用したい
21. 122ボックスの背景に線状グラデーションをかけたい
22. 123ボックスの背景に放射状グラデーションをかけたい
23. 124背景画像を横方向にだけ繰り返したい
24. 125背景画像を縦方向にだけ繰り返したい
25. 126背景画像が繰り返さないようにしたい
26. 127背景画像をボックスの真ん中に表示したい
27. 128背景画像の表示位置を数値で指定したい
28. 129背景画像のサイズをボックスに合わせて変化させたい❶
29. 130背景画像のサイズをボックスに合わせて変化させたい❷
30. 131複数の背景画像を表示させたい
31. 132ボーダーを画像にしたい
32. 133ボックスを角丸四角形にしたい
33. 134ボックス全体を半透明にしたい
34. 135ボックスにドロップシャドウをつけたい
35. 136ボックスの内側にシャドウをつけたい

Chapter 8
テーブルのデザインテクニック

1. 137テーブルの基本マークアップ
2. 138テーブルに標準的な罫線をつけたい
3. 139テーブルの見出しセルを作成したい
4. 140セルを横方向に結合したい
5. 141セルを縦方向に結合したい
6. 142テーブル行をヘッダー、ボディ、フッターに分けたい
7. 143テーブル上部にキャプションをつけたい
8. 144テーブル下部にキャプションをつけたい
9. 145セル内のテキストの行揃えを変更したい
10. 146セル内のコンテンツと罫線の間にスペースを作りたい
11. 147テーブルの各行に下線を引きたい
12. 148セルのサイズを固定したい
13. 149テーブル全体の幅を指定のサイズで固定したい
14. 150セルの幅を均等にしたい
15. 151テーブル全体の背景を設定したい
16. 152見出し行にだけ背景を設定したい
17. 153テーブルの背景色を奇数行と偶数行で塗り分けたい
18. 154マウスが重なった行の背景色を変更したい
19. 155テキストが折り返さないセルを指定したい

Chapter 9
フォームのデザインテクニック

1. 156フォームの基本マークアップ
2. 157テキストフィールドを表示したい
3. 158フォーム部品にラベルをつけたい（1）
4. 159フォーム部品にラベルをつけたい（2）
5. 160メールアドレス入力用テキストフィールドを表示したい
6. 161電話番号入力用テキストフィールドを表示したい
7. 162パスワード入力のテキストフィールドを表示したい
8. 163テキストフィールドに入力のヒントを表示したい
9. 164最初のフォーム部品を自動で選択したい
10. 165必須入力項目にしたい
11. 166コピーはできるけれども入力はできないテキストフィールドを作りたい
12. 167ファイルをアップロードできるようにしたい
13. 168ラジオボタンを表示したい
14. 169チェックボックスを表示したい
15. 170プルダウンメニューを表示したい
16. 171複数の項目を選択できるリストを表示したい
17. 172プルダウンメニューの項目をグループ化して見やすくしたい
18. 173テキストエリアを表示したい
19. 174非表示データを埋め込みたい
20. 175フォームの一部をグループ化したい
21. 176送信ボタンを表示したい
22. 177送信ボタンを画像にしたい
23. 178汎用的なボタンを作成したい
24. 179テキストフィールド・テキストエリアのスタイルを調整したい
25. 180テキストフィールド・テキストエリアの余白を調整したい
26. 181選択されたらテキストフィールドの色を変えたい
27. 182入力チェックで引っかかったテキストフィールドのスタイルを変更したい
28. 183送信ボタンの見た目を変更したい
29. 184ラベルとテキストフィールドを横に並べて整列させたい

Chapter 10
メタデータと外部サイトとの連携テクニック

1. 185ファビコンを設定したい
2. 186印刷用のCSSを読み込みたい
3. 187Font Awesomeを使いたい
4. 188Webフォント「Google Fonts」を使用したい
5. 189ページが検索されないようにしたい
6. 190アクセスキーを設定したい
7. 191タブキーの選択順序を設定したい
8. 1925秒後に別のページに移動したい

Chapter 11
パーツ作成のテクニック

1. 193タイトルとサブタイトルを表示したい
2. 194キーボードの字をキーボードらしく見せたい
3. 195リンク先が別ウィンドウで表示される場合にアイコンを表示したい
4. 196PDFなど特定のファイルへのリンクだけアイコンや囲みを表示したい
5. 197テキストをカプセル型に囲みたい
6. 198テキストに太いペンで引いたような下線をつけたい
7. 199<button>タグのスタイルを変更したい
8. 200パンくずリストを作成したい
9. 201記事に付属するキーワードやタグを表示をしたい
10. 202アイコンとテキストが上下に並ぶボタンを作りたい
11. 203画像にテキストを回り込ませたい
12. 204図にテキストを回り込ませたい
13. 205フロートを解除したい：パターン1（clear）
14. 206ボックスを横に並べたい（float）
15. 207フロートを解除したい：パターン2（overflow）
16. 208フロートを解除したい：パターン3（clearfix）
17. 209ボックスの上部だけ角を丸くしたボタンを作りたい
18. 210引用ブロックに装飾された「“」「”」を表示したい
19. 211縦に並んだナビゲーションを作りたい
20. 212縦に並んだナビゲーションの各項目に矢印のマークを表示したい
21. 213見出しがついたボックス（パネル）を作成したい
22. 214タブボタンを作成したい
23. 215ページネーションを作成したい
24. 216サムネイル画像とテキストを横に並べたい
25. 217写真に枠線をつけたい
26. 218正方形の画像を円形に切り抜きたい
27. 219画像の上に別の画像を重ねて表示したい
28. 220画像の上にテキストを重ねたい
29. 221バッジを重ねて表示したい
30. 222実際のサイズとは異なる大きさで画像を表示したい
31. 223ウィンドウ幅いっぱいに背景画像を表示したい❶
32. 224ウィンドウ幅いっぱいに背景画像を表示したい❷
33. 225ウィンドウ幅に合わせて伸縮するキービジュアルを作成したい
34. 226カレンダーを表示したい
35. 227検索フィールドの中に虫眼鏡アイコンを表示させたい
36. 228テキストフィールドのすぐ横に送信ボタンを配置したい
37. 229プルダウンメニューの見た目を変えたい
38. 230ローディングサインを表示したい

Chapter 12
ナビゲーションのデザインテクニック

1. 231一般的なナビゲーションのマークアップ（HTML5版）
2. 232一般的なナビゲーションのマークアップ（XHTML版）
3. 233スマートフォン向けのグローバールナビゲーションを作成したい
4. 234パソコン向けのグローバルナビゲーションを作成したい（float版）
5. 235いま閲覧しているページのナビゲーションリンクをハイライトさせたい
6. 236画像を使ったナビゲーションを作成したい（float版）
7. 237パソコン向けのグローバルナビゲーションを作成したい（flexbox版）
8. 238ナビゲーションの各項目を右揃えにしたい（flexbox版）
9. 239ナビゲーションの各項目を中央揃えにしたい（flexbox版）
10. 240ナビゲーションの各項目を均等に配置したい❶（flexbox版）
11. 241ナビゲーションの各項目を均等に配置したい❷（flexbox版）
12. 242ナビゲーションの各項目を同じ大きさにしたい（flexbox版）
13. 243「ナビゲーションの最後の項目だけ右に配置したい（flexbox版）
14. 244サイトや企業のロゴをヘッダーに表示させたい
15. 245ヘッダーに検索フォームをつけたい

Chapter 13
レイアウトのテクニック

1. 246伸縮するシングルコラムレイアウトを作成したい
2. 247固定幅で中央揃えのシングルコラムレイアウトを作成したい
3. 248伸縮する2コラムレイアウトを作成したい（float版）
4. 2492コラムレイアウトの左右を入れ替えたい（float版）
5. 250幅が固定された2コラムレイアウトを作成したい（float版）
6. 251伸縮する2コラムレイアウトを作成したい（flexbox版）
7. 2522コラムレイアウトの左右を入れ替えたい（flexbox版）
8. 253伸縮する3コラムレイアウトを作成したい（float版）
9. 254幅が固定された3コラムレイアウトを作成したい（float版）
10. 255伸縮する3コラムレイアウトを作成したい（flexbox版）
11. 2563コラムレイアウトの位置を入れ替えたい（flexbox版）
12. 257伸縮するレイアウトの上限幅を決めたい
13. 258ナビゲーションをウィンドウ上部に固定したい
14. 259ページ下部にキャンペーンブロックを表示したい
15. 260サイドバーがスクロールしない2コラムレイアウトを作成したい
16. 261コピーライトと住所表記をそれぞれ左揃え、右揃えにしたい（float版）
17. 262コピーライトと住所表記をそれぞれ左揃え、右揃えにしたい（flexbox版）
18. 263イメージの上にロゴを重ねたい
19. 264背景画像をスクロールしないようにしたい
20. 265フッターにサイトマップを掲載したい
21. 266ボックスを整列して並べたい（float版）
22. 267ボックスを整列して並べたい（flexbox版）
23. 268多数のボックスを整列して並べたい（float版）
24. 269多数のボックスを整列して並べたい（flexbox版）

Chapter 14
レスポンシブWebデザインに対応するテクニック

1. 270レスポンシブWebデザインに対応するための基本マークアップ
2. 271画面サイズに合わせてCSSを切り替えたい
3. 272電話番号がリンクにならないようにしたい
4. 273スマートフォン向けのファビコンを設定したい
5. 274スマートフォンとパソコンでページ全体のフォントサイズを変更したい
6. 275シングルコラムレイアウトを2コラムレイアウトに切り替えたい（float版）
7. 276シングルコラムレイアウトを3コラムレイアウトに切り替えたい（flexbox版）
8. 277ナビゲーションのデザインを変えたい（float版）
9. 278ナビゲーションのデザインを変えたい（flexbox版）
10. 279画面幅が広いときだけ、画像にテキストを回り込ませたい
11. 280スマートフォンのときはテーブルを横スクロールできるようにしたい
12. 281テーブルの見た目を見出し＋本文に切り替えたい
13. 282フォーム部品を伸縮させたい

Chapter 15
アニメーションとエフェクトのテクニック

1. 283区切り線を引きたい
2. 284区切り線のスタイルを変更したい
3. 285区切り線の途中にテキストを表示したい
4. 286区切り線をグラデーションで表現したい
5. 287テキストにドロプシャドウをつけたい
6. 288テキストの選択ハイライト色を指定したい
7. 289動画ファイルを表示したい
8. 290動画をキービジュアルにしたい
9. 291テキストを斜めにしたい
10. 292ホバーしたときにテキストの傾きを変えたい
11. 293画像にホバーしたとき透明度を徐々に変化させたい
12. 294画像にホバーしたとき徐々に拡大させたい
13. 295画像にホバーしたときに明度が上がる効果をつけたい
14. 296画像にホバーしたときにセピア色にする効果をつけたい
15. 297画像にホバーしたときに浮きあがるような効果をつけたい
16. 298画像にホバーしたときに裏返すような効果をつけたい
17. 298transform: rotateZ(-80px)
18. 298transform: translateZ(-80px)
19. 298transform: scaleZ(-80px)
20. 298transform: translateZ(-80px)
21. 298transform: translateZ(-80px)
22. 298transform: translateZ(-80px)
23. 299画像の色が変化するアニメーションを設定したい
24. 300バッジが小刻みに揺れるアニメーションを設定したい