CSSの基本

セレクタ

セレクタの構造は、セレクタ/プロパティ/値からなっている。
基本の形はセレクタ { プロパティ: 値; }となり、セレクタ構造を示すために{}を、
プロパティの値を指定する場合は、 :（コロン）を使い、値の最後には;（セミコロン）を書く。

p {
  color: black;
}

class属性

HTML要素に対して個別に名前を付けることができる機能。
例えば、＜p＞...＜/p＞に対して"message"というclass名を付与する場合は、以下のように記載。

<p class="message">
  aaa
</p>

classセレクタ

HTMLで指定したclass名をセレクタとして使用することができる。
classセレクタを指定する場合は、.クラス名のような形で指定。

.message {
  color: black;
}

id属性

class属性同様に、HTML要素に対して個別に名前を付けることができる機能。
例えば、＜p＞...＜/p＞に対して"message"というid名を付与する場合は、以下のように記載。

<p id="message">
  aaa
</p>

idセレクタ

HTMLで指定したid名をセレクタとして使用することができる。
idセレクタを指定する場合は、#id名のような形で指定。

#message {
  color: red;
}

classとidの使いどころの違い

class
同じclass名のものを複数回使用できる
一般的なセレクタとして使用できる

id
同じid名のものは複数回使用できない
ある特徴的な部分など、ここぞというタイミングで使用するセレクタ

コメントアウト

プログラムの中に、「メモ」を埋め込むための機能。
コメントアウトされた文字列は、コードとしては認識されない。

リセットCSS

インターネットを閲覧するためのブラウザにはいくつかの種類があるが、それぞれ独自のCSSをデフォルトで持っている。つまり、同じ＜h1＞...＜/h1＞で指定しても、ブラウザごとに文字の大きさが異なったり上下の幅が異なったりする。
何らかのトラブルで、Webページ作成者が用意したCSSファイルが読み込まれなかった時、
ブラウザ側で最低限の見た目を保障するために、各ブラウザが独自のデフォルトCSSを持っている。
しかし、これが時に、Webページ作成者が用意したCSSファイルと影響しあって見た目を崩してしまうことがある。
これを防ぐため通常、各ブラウザが用意しているデフォルトのCSSを上書きするCSSを書いておく。

body {
  background-color: #f0f0f0;
  font-size: 14px;
  color: #333;
  margin: 0 auto;
}
h1,h2,h3,h4,h5,h6,p {
  padding: 10px 0;
  margin: 0;
}