CSSを理解するには

まず、各ブラウザが勝手にCSSを適用させていることを自覚しましょう。

それは、自分が表現したい形では無いのだと言うことを。

 

次に、どうやったら思い通りになるのか。

とりあえず、その勝手に与えられた値をすべて取り除いたらどうなるのか。

それが、「リセットCSS」です。

 

リセットにも色々段取りがあって、

まず要素の周りにある空きを取り除く。

次に、箇条書きなどの空きと黒丸などの表示をなしにしてみる。

また、画像もリンク時にできる枠線をなしにして、縦揃えもbottomを基準にします。

それ以外にも「擬似クラス」などもまとめてしまう場合もあります。

 

結局は、この方法に慣れるまでは何度も記述する必要があります。

 

また、div要素でのループ化してある場合は、その名前から記述する「子孫セレクタ」の状態で書かないと反映されないということになります。

 

授業では、いろいろな事例を準備してありますから、理解ができるまで何度も入力を繰り返しましょう。



《手順》

  • HTML基本構造の入力
  • body内にテキストをペーストしマークアップする
  • 基本は、見出しと本文の関係
  • 必然性があれば、div要素でグループ化する
  • head内にstyle要素を記述する
  • 使用したセレクタを列挙し、margin: o; padding: 0; line-height: 1.0; としリセットする
  • body要素に文字サイズや文字色を行高を指定する
  • div要素など全体を囲む要素があれば、その幅指定から記述を始める
  • 見出し要素や本文要素に対して、文字色・文字サイズを指定する
  • 背景色が使用されている場合、paddingを調整しながら指定する
  • 画像がimg要素で挿入する場合は、その幅に注意してその周りを指定する
  • 次に、marginで下の空きを整えていく

 

《リセット》

  • リセットは、ブラウザが持っている固有のCSSの値をなしにして指定通りの値を反映しやすくするため