CSS入門

HTML入門書いたのでせっかくですし、CSS入門も書くことにしました。

CSSはHTMLを彩るもの

HTMLは文章に意味づけをする言語でした。ではCSSはというと、CSSは文章を彩りデザインするものです。

実はすでにCSSを体験している

HTMLで見出し(h1、h2などのタグ)を作ると自動的にフォントサイズが大きくなりますよね。実はこれはブラウザが自動的に「デフォルトCSS」を適用しているからです。デフォルトCSSがないとブラウザで開いても見出しはフォントサイズが大きくなりませんし、bタグで囲んだ部分も太字になりません。

自分では書いてなくてもCSSによる恩恵をすでに受けていたというわけです。

CSSの書き方

ではCSSの書き方に入っていきます。CSSでは「セレクタ」と「プロパティ」「値」という三つで構成されているといって過言ではありません(実際にはMediaや@importなど、もうちょい色々ありますが今は触れません)。

「セレクタ」でデザインしたい対象を選んで、対象の「プロパティ」の「値」を変更します。実際の例を見てみましょう。

body {
  background-color: red;
}

bodyはbody要素を、background-colorは背景色を意味します。redは...さすがにわかりますよね。赤色です。

つまり、「body要素の背景色を赤色にする」というCSSです。

プロパティにはどんなものがあるのか

プロパティには背景色の他に、文字色(厳密にはちょっと違います)、枠線、文字サイズ、フォントの種類などなど様々なものがあります。

body {
  color: blue; /* 文字を青色にします(厳密には文字以外の色も指定しています) */
  border: 1px solid gray; /* 1px(pxは長さの単位)の幅の灰色の実線の枠線を引きます。普通ならbodyに枠線は引きませんが。 */
  font-size: 32px; /* 文字サイズを32px(pxは長さの単位)にします。 */
  font-family: san-self; /* san-selfというフォントに変更します。 */
}

まだまだたくさんあります。

セレクタの種類

要素セレクタ、クラスセレクタ、idセレクタなどが代表的なセレクタです。

上の例で示した body は要素を指定しているので、要素セレクタです。

クラスセレクタでは、あるクラスを持った要素を指定します。

idセレクタでは、あるidを持った要素を指定します。

クラスセレクタとidセレクタはよく似ていますね。どう違うのでしょうか。クラスセレクタはたくさんあるもの(独自のデザインのボタンなど)に対して、idセレクタは1ページにひとつしかないもの(ナビなど)に対して指定します。