書籍『HTML5&CSS3デザインレシピ集』(狩野祐東著/技術評論社)

HTML5&CSS3
デザインレシピ集

収録サンプル一覧

狩野祐東 著/技術評論社/¥ 2,970/ISBN-13: 978-4774187808

書籍『HTML5&CSS3デザインレシピ集』(狩野祐東著/技術評論社刊)に収録されているサンプルデータを公開しています。なお、全体の雰囲気を確認したい方は、Chapter11以降のサンプルからご覧になることをおすすめします(Chapter 2など、前半に掲載されているサンプルの中には、その性格上Webページになにも表示されないものがあるため)。

ダウンロード可能な公式のサンプルデータは、出版社の技術評論社で公開しています。また、最新版(開発版、修正版)サンプルデータはGitHubでも公開しています。

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バッジが小刻みに揺れるアニメーションを設定したい