HTMLとCSSの分離

「繰り返し使うものを一つにまとめる」という例で一番先に思いつくのはCSSの利用です。

CSS(カスケーテッド・スタイルシート)はHTML文書の見た目を整えるために使います。

文字の大きさ、色、背景などはHTMLタグを使っても出来ますが、HTMLタグで指定する場合ページの1枚1枚、タグの1つ1つにデザインを指定することになります。

外部にCSSファイルを作り、各ページからリンクしておくと、例えば、「右メニューを左メニューに変更したい」という場合もCSSファイルを書き換えるだけで簡単に変更できます。

具体的な例をあげてみます。

HTMLファイルを「メモ帳」で開き<head>~</head>内に、
<link rel="stylesheet" href="style.css" type="text/css">
と書き込み保存します。

次に新しいファイルを開き、h1{ color:red; font-size:9px;}と書き保存します。このときファイル名は「style.css」とし、HTMLファイルと同じフォルダーに保存します。

ブラウザで先ほどのHTMLファイルを開くとh1タグで指定した文字が赤く小さくなるのが分かります。

このように<link rel="stylesheet" href="style.css" type="text/css">を挿入したファイルはすべてstyle.cssからデザインを指定できます。「href=”~”」の部分のパスを指定すれば同一ディレクトリー内でなくても大丈夫です。