はじめてのCSS

CSSの文は、いつも同じ形をしています。「どこを(セレクタ)」「どうする(プロパティ: 値)」の2つだけです。

h1 {
  color: red;
}

• h1 … どこを? → すべての h1 見出しを
• color … 何を? → 文字の色を
• red … どうする? → 赤にする

波かっこ { } で囲み、プロパティと値の間は :(コロン)、行の終わりは ;(セミコロン)。この3つの記号さえ守れば、CSSは怖くありません。

色の指定には2つの書き方があります。ここから先のCSSコードは、すべて style.css に書き足していきます (書いたら Ctrl + S で保存 → ブラウザで確認、はHTMLと同じです)。

h1 {
  color: tomato;            /* ① 色の名前で */
  background-color: #fff8e1; /* ② カラーコードで */
}

• color は文字の色、background-color は背景の色です。
• ① 色の名前: red、blue、tomato、gold など、140種類くらい使えます。
• ② カラーコード: # で始まる6けたの英数字で、約1,678万色を正確に指定できます。プロは主にこちらを使います。
• /* ... */ はコメント(メモ書き)で、画面には影響しません。

見やすいページの秘密は、色よりも「大きさと余白」にあります。

p {
  font-size: 18px;     /* 文字の大きさ */
  line-height: 1.8;    /* 行と行の間隔(1.8倍) */
  margin: 16px;        /* 外側の余白 */
  padding: 16px;       /* 内側の余白 */
}

• px(ピクセル)は画面の点の数です。16px が標準くらい。
• margin と padding のちがいは、額縁で考えます。padding は「絵と額縁のあいだ」(内側)、margin は「額縁と壁のあいだ」(外側)。
• 背景色をつけると、padding の効果が見えやすくなります。background-color と一緒に実験してみましょう。

p { ... } と書くと、すべての段落が変わってしまいます。「この段落だけ変えたい」ときは、HTML側にクラス(名札)をつけます。

HTML側:  <p class="taisetsu">ここが大事です</p>

CSS側:   .taisetsu {
           color: crimson;
           font-weight: bold;   /* 太字 */
         }

• HTMLの class="名前" が名札、CSSの .名前(先頭にピリオド)がその名札への指示です。
• 同じクラスは何か所でも使えます。「大事なところは全部 taisetsu」のように使い回せるのが便利なところです。