スタイルシートの基本CSSを理解しよう

CSSの定義場所と効果

CSSはHTMLに足りない機能を補い、またHTMLのタグそのものを上書きできるまさにスタイルを定義するための機能です。CSSの定義はHTMLの中に直接記述するか、CSS定義ファイルを別に作成し、HTMLの中でCSSを読み込む方法があります。HTMLの中に直接記述する場合は、<head>内にstyleタグを入れることで定義します。
<style type="text/css"> body { background : #FFFFFF } </style>
と書くことでbodyタグの背景色設定がCSSで上書きされて真っ白になります。しかし、ホームページのデザインは全体で統一が取れていたほうが見やすくなります。なのにすべてのHTMLにCSSを書いていては例えば文字サイズを変更するときに大変です。そこでCSSを外部ファイルとして作成し、head内の定義を
<link rel="stylesheet" href="CSSファイル名.css" type="text/css" />
とすることで全てのHTMLでひとつのCSSを共有できます。この状態でCSSを書き換えれば全てのHTMLに反映されるので作業効率がぐんと上がります。

idを利用して独自設定を定義

さて、前項ではbodyタグを上書きしていましたが、bodyならともかくdivタグなど色々な設定で利用するタグは逆に全てCSSで上書きされても困ってしまいます。そんな場合のためにCSSにはidという概念があります。スタイルの定義で
.honbun { color : black; font-size: 100% }
と頭にピリオドをつけて好きな名称をつけるとidとして定義することができます。idはタグのオプションとして自由に使用できるので
<div class="honbun">本文のテキスト</div>
のようにすることで、見出し用のスタイルや本文、注釈用のスタイルと使い分けることができます。
さらに応用として「要素タイプ#id」と定義するidセレクタや、spanタグという見た目には何もしないグループ化向けのタグなど様々な利用法があり、習得すればホームページのデザイン管理がぐっと楽になります。