• このエントリーをはてなブックマークに追加

レシピ

  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. テーブルのセルごとにスタイルを適用する