次のおさらいを実施しました

事前準備

ページ：colors/index.html

  1. titleタグは「カラーメニュー」とする
  2. 一番大きい見出しで「カラーメニュー」と作成する
  3. リストを4項目作成する
  4. 項目は一番上から「グレースケール」「レッド」「グリーン」「ブルー」とする

ページ：colors/grayscale.html

  1. titleタグは「カラーメニュー｜グレースケール」とする
  2. セル数1*17の表を作成する
  3. linkタグを使用して、「grayscale.css」を読み込むように設定する

ページ：colors/grayscale.css

  1. クラス「.color0」を作成し、プロパティと値は「background-color:#000000」と設定する
  2. クラス「.color1」を作成し、プロパティと値は「background-color:#111111」と設定する
  3. 上記の要領で「.colorF」まで作成する

ページ：colors/grayscale.html

  1. 作成した表のセルにそれぞれ0〜9、a〜fまで一個ずつ入力する
  2. （文字の色が"#000000"のままだと、見えなくなるセルがあるため、色を調整している）

その後

  1. 「red.html」「red.css」→赤色のグラデーション
  2. 「blue.html」「blue.css」→青色のグラデーション
  3. 「green.html」「green.css」→緑色のグラデーション


common.cssを使用して、設定をすべてまっさらにする

HTMLの各要素には、デフォルトでパディングやマージンが設定されているものがある。
それらを一番初めに「0」にすることによって、設計者の想定どおりのデザインをより表現しやすくなる。