静的サイトの成り立ち②：HTMLを装飾をするCSS

　HTMLが文章構造を規定するための記法だとすると、CSSと呼ばれる「Cascading Style Sheets」はWebページを装飾するための記述方法です。指定したHTMLタグの要素に関して、独自の記法で色やフォントの大きさなどを指示することができます。

　どのタグで囲まれた要素をターゲットにするかは、「CSSセレクタ」と言う指定方法を使います。例えば、class属性が「header」の「h1」タグ要素が以下のようにHTML内にあるとします。

<h1 class="header">見出し</h1>

　このh1タグの内容である「見出し」というテキストのフォントサイズを変更したい！とすると、CSSでは以下のように書きます。

h1.header { font-size: 24px; }

　「h1.header」という部分がCSSセレクタで、「class属性がheaderのh1タグ要素」を指定しています。後に続く「font-size: 24px;」という部分がCSSの装飾プロパティである「font-size」を「24px」という値にするという指示を出しています。

　CSSセレクタで活躍するのは、HTMLタグのclass属性とid属性です。class属性の場合は「.クラス属性の値」、id属性の場合は「#id属性の値」とすることで、タグ要素を指定することができるのです。

　ただし、id属性の値は基本的には、ひとつのHTML文書の中で重複は許されていません。つまり、

<h1 id="header">章その1</h1>

<h2 id="header">章その2</h2>

　とするとid属性の値「header」が2つ出てきてしまうので、この場合はclass属性を使います。

<h1 class="header">章その1</h1>

<h2 class="header">章その2</h2>

　上記のclass属性の値が「header」である要素全てに対してCSSで装飾を施したければ、以下のように記述すればよいでしょう。

.header { color:#333333; }

　CSSは、今回説明したCSSセレクタとその装飾ルールである「プロパティとその値」を記載しつつ、Webページの見た目を整えるものです。最近ではCSS3と呼ばれる新しい表現手法が各種ブラウザで対応しているので、今までは画像をつかって実現していた、角丸のボタンのようなものを簡単にCSSだけで再現できるようになりました。

　現在のWebページ制作にCSSは必須になっている感もあるので、こうした基本的な記述方法は覚えておいて損はないでしょう。