レシピ

  1. HTMLページの文字コードを設定する
  2. HTMLページの説明文(概要)を設定する
  3. ページにキーワードを設定する
  4. テキストの一部を重要なものとして強調させる
  5. HTMLで計算式や単位、元素記号、注釈のテキストを表記する
  6. HTMLページでの引用作法と書き方
  7. 日付や時刻をHTMLでマークアップする
  8. テキストに読み方(ルビ)を表記する
  9. 略語と正式名称の組み合わせをマークアップする
  10. テキストの訂正箇所をマークアップする
  11. テキストに新しい文言を追加した箇所をマークアップする
  12. ツールチップの表示を設定する
  13. HTMLで記号や特殊文字を通常文字として表記する
  14. テキストを半透明にする
  15. 要素を透過させる
  16. テキストの行間や字間を調節する
  17. テキストの行揃えを調節する
  18. テキストに段落を設定する
  19. テキストの1文字目だけCSSを適用する
  20. テキストの1行目だけCSSを適用する
  21. ::beforeと::afterを使って要素の前後に文字を追加する
  22. リスト(箇条書き)のマークアップ
  23. リスト(箇条書き)のアイコンを画像にする
  24. リスト(箇条書き)の番号を設定する
  25. リストのアイコンを変更する
  26. 定義リストを使って、キーワードと説明をマークアップする
  27. リンクにスタイルを設定する
  28. バナーなど画像にリンクを設定する
  29. IEでSVGファイルが豆粒みたいになる現象を回避する
  30. スマートフォン/タブレットでリンクをタップしたときのスタイルを指定する
  31. サイト内リンクと外部リンクの設定
  32. メールアドレスや電話番号のマークアップ
  33. 連絡先をマークアップする
  34. ファイルをダウンロードするリンクを設定する
  35. SVG形式の画像を表示する
  36. viewport(ビューポート)の設定について
  37. Webフォントを使う
  38. メディアクエリを使って画面サイズごとにCSSを切り替える
  39. CSSでグラデーションを設定する
  40. リセットCSSを活用する
  41. article要素とsection要素の使い方
  42. どの環境でも綺麗なゴシック体、明朝体のフォントを指定する
  43. Font Awesomeを使う
  44. ブロックレベルのリンクを作成する
  45. ブラウザの開発ツールを活用する
  46. 写真や図(グラフ)とキャプションをマークアップする
  47. CSSで枠線(ボーダー)をデザインする
  48. ページの中に他のHTMLを読み込んで表示する
  49. 画像を使ってボーダーをデザインする
  50. ボーダーを使って見出しをデザインする
  51. サイズを指定した要素内にスクロールバーを表示する
  52. ブロックレベル要素内でコンテンツを完結させる
  53. テキストとアイコン画像の表示位置を揃える
  54. 画像を設置した時にできる隙間を無くす
  55. 背景画像の表示位置を指定する
  56. 背景画像のサイズを要素の幅に合わせて調整する
  57. 複数の背景画像を設定する
  58. 複数の背景画像を使って、引用のコンテンツにデザインを適用する
  59. 要素を角丸にする
  60. 要素に影(ドロップシャドウ)を設定する
  61. 1つの要素に複数の影(ドロップシャドウ)を設定する
  62. テキストに影(ドロップシャドウ)を設定する
  63. テーブル(表)のセルのサイズを指定する
  64. テーブルの奇数行、偶数行ごとに背景色を設定する
  65. テーブルのセルごとにスタイルを適用する
  66. テーブルの見出し、フッターにのみスタイルを適用する
  67. テーブルの行やセルにマウスカーソルが乗っているときにスタイルを変える
  68. テーブルの幅が狭くなってもテキストをできるだけ自動改行させないようにする
  69. placeholder(プレースホルダー)属性のテキストカラーを変える
  70. フォームの入力欄に入力ヒントを表示する
  71. WindowsのChromeでテキストエリアの文字が小さくなるのを防ぐ
  72. 通常のテキストを入力するフォームを作る
  73. フォームの項目にラベル(項目名)をつける
  74. 複数行のテキストを入力するフォームを作る
  75. メールアドレスを入力するためのフォームを作る
  76. 電話番号を入力するためのフォームを作る
  77. パスワードを入力するためのフォームを作る
  78. 最初に入力してほしい入力欄(フィールド)に自動フォーカスする
  79. フォームの必須入力項目を指定する
  80. 入力できないフォームを設定する
  81. 非表示のデータ入力欄を設置する
  82. ラジオボタンを設置する
  83. チェックボックスを設置する
  84. プルダウンメニューを設置する
  85. プルダウンメニューの項目をグループで分ける
  86. ファイルをアップロードするためのフォームを作る
  87. 送信ボタンを設置する
  88. 検索キーワード入力欄とボタンが横並びになった検索ボックスを作る
  89. ブラウザによって異なる送信ボタンの余白やサイズを揃える
  90. 画像を使った送信ボタンを設置する
  91. 汎用的なボタンを設置する
  92. 入力状態のフィールドにスタイルを適用する
  93. フォームの入力チェックでエラーになったフィールドのスタイルを変える
  94. 電話番号の自動リンク設定を解除する
  95. 選択したテキストの選択範囲の色を変える
  96. ファビコンを設定する
  97. スマホ向けのファビコンを設定する
  98. ヘッダーに画像を使ったロゴを表示する
  99. 横並びのメニューを作成する
  100. 「display:flex;」によるフレックスボックスでナビゲーションを等幅に並べる
  101. ナビゲーションのメニューボタンの余白を等幅で表示する
  102. 印刷用のCSSを設定する
  103. 特定のページをGoogleなどの検索結果に表示されないようにする
  104. 要素にアクセスキーを設定する
  105. Tab(タブ)キーで要素の移動順序を設定する
  106. 特定の時間が経過したら自動的にページ遷移(リダイレクト)する
  107. キーボードの入力例をマークアップする
  108. 外部サイトへのリンクにアイコンをつける
  109. ファイルのダウンロードリンクにアイコンをつける
  110. パンくずリストを作成する
  111. テキストにペンで線を引いたようなスタイルを指定する
  112. 画像に対してテキストを回り込ませる
  113. 図やグラフに対してテキストを回り込ませる
  114. floatプロパティによる回り込みを途中で解除する
  115. floatプロパティでボックスを横に並べる
  116. フレックスボックス「display:flex;」を使って記事一覧を作成する
  117. CSSスプライトを使ってアイコンを表示する