CSS(スタイルシート)講座：各ブラウザの互換性を考慮したCSSを学びたい人にオススメ！
CSSを外部ファイルとして読み込む方法は？
スタイルシートの使用方法
スタイルシートの使用方法は２通りあります。
- 「HTML内に直接記述する」方法
- 「外部ファイルとしてスタイルシートを読み込む」方法
ひとつめの「HTML内に直接記述する」方法はオススメできません。何故かというとスタイルシートの使い回しが出来ないからです。一つのスタイルシートで複数のページの見栄えを定義できるという最大のメリットを台無しにしてしまいます。HTML内にCSSを記述することは百害あって一利なしなので、CSSは外部ファイルとして扱うことをおすすめします。
外部スタイルシートの読込方法
外部スタイルシートを読み込むには<head>タグ内に以下の１行を記述するだけでOK！！
<link href="ファイル名.css" rel="stylesheet" type="text/css" />
relはこのファイルから見てリンク先はどのような内容かを指し、typeはリンク先の文書型を指します。
※終了タグの手前のスラッシュはXHTML固有の記述方法です。HTMLの場合は必要ありません。
ちなみに以下のように記述することで複数のCSSファイルを読み込むことが可能です。
<link href="header.css" rel="stylesheet" type="text/css" />
<link href="content.css" rel="stylesheet" type="text/css" />
<link href="footer.css" rel="stylesheet" type="text/css" />
例のようにCSSファイルをヘッダー用、コンテンツ用、フッター用と分けると管理がしやすくなるのでオススメです。それとTOPページは他のページとレイアウトが異なる場合が多いので、TOPページ用にCSSファイルを用意するのも良いかと思います。 また、大規模なサイトの場合はコンテンツのカテゴリごとにスタイルシートを用意したほうが良いかもしれません。
また、以下のようにmedia属性を指定すると、CSSを適用するメディアを指定できます。
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
この例では「print」すなわち印刷物に対してスタイルを適用しています。media属性を指定しない場合は全てのメディアに対してスタイルが適用されます。
