<link rel=”stylesheet” href=”URI” type=”text/css”>
書き方
<link rel=”stylesheet” href=”URI” type=”text/css”>
解説
スタイルシートを一括で記述したCSSファイルを別途用意し、外部ファイルとしてHTMLで読み込ませ、HTMLのデザインをまとめて制御する方法です。
この方法が最もスタイルシートを効率よく利用する方法で、スタイルシートの特徴を最大限に引き出す使い方です。
URIはCSSのファイル名
URIには読み込むスタイルシートのアドレスを書き入れます。
相対パス、絶対パスどちらでも構いません。
また、スタイルシートファイル(拡張子は*.css)にはセレクタとプロパティ、値を列挙しておきます。
link要素はヘッダー部に
スタイルシートのURIを指定したら、link要素をHTMLファイルの冒頭に挿入します。
具体的には、HTMLの<head>〜</head>間に挿入します。
スタイルシートは複数読み込むことも可能
1つのHTMLにスタイルシートを複数読み込むことも可能です。
この場合は、URIごとにlink要素をその都度挿入すればOKです。
また、読み込まれたCSSで指定されているプロパティは、そのHTMLですべて有効になります。
複数のスタイルシートで同じプロパティを設定していた場合、後に読み込んだスタイルシートのプロパティが優先されます。
スタイルシートの優先度
スタイルシートをHTMLに読み込む手段は、『各要素ごとに個別にスタイルシートを適用する方法』、『HTMLファイルごとにスタイルシートを記述する方法』、そしてこの『外部スタイルシートを読み込み、一括指定する方法』の3つがありますが、この3つのスタイルシートの優先度は、以下のようになります。
上から順に優先されます。
- 各要素ごとに個別にスタイルシートを適用する方法
- HTMLファイルごとにスタイルシートを記述する方法
- 外部スタイルシートを読み込み、一括指定する方法 (本解説)
従って、これらの方法で、同じプロパティが設定されていた場合、優先度の高い方法の設定値が有効になります。
なお、スタイルシートの優先度を変えることもできます。
参考:スタイルシートの切り替えを可能にする
スタイルシートを複数用意して、ユーザにスタイルシートを選ばせることもできます。
指定方法など詳しくは、「複数スタイルシートの切り替え」を参照してください。
参考:OSやブラウザごとにCSSを読み込む
OS(WindowsやMacなど)やブラウザを判別して、これらにより適したCSSを読み込ませることも可能です。
以下を参考にしてください。
参考:外部ファイルとして読み込む利点
スタイルシートを外部ファイルとして読み込むと、HTMLとCSSが完全に独立しながら、互いに連携がとれるので、各ページのデザインを統一できるだけでなく、デザインの更新の面からも優位性があります。
CSS/HTMLサンプル
<link rel=”stylesheet” href=”css/style.css” type=”text/css”>