HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


外部スタイルシートを読み込み、一括指定する1

書き方

<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つのスタイルシートの優先度は、以下のようになります。上から順に優先されます。

  1. 各要素ごとに個別にスタイルシートを適用する方法
  2. HTMLファイルごとにスタイルシートを記述する方法
  3. 外部スタイルシートを読み込み、一括指定する方法 (本解説)

従って、これらの方法で、同じプロパティが設定されていた場合、優先度の高い方法の設定値が有効になります。なお、スタイルシートの優先度を変えることもできます。

参考:スタイルシートの切り替えを可能にする

スタイルシートを複数用意して、ユーザにスタイルシートを選ばせることもできます。指定方法など詳しくは、「複数スタイルシートの切り替え」を参照してください。

参考:OSやブラウザごとにCSSを読み込む

OS(WindowsやMacなど)やブラウザを判別して、これらにより適したCSSを読み込ませることも可能です。以下を参考にしてください。

参考:外部ファイルとして読み込む利点

スタイルシートを外部ファイルとして読み込むと、HTMLとCSSが完全に独立しながら、互いに連携がとれるので、各ページのデザインを統一できるだけでなく、デザインの更新の面からも優位性があります。

CSS/HTMLサンプル

<link rel="stylesheet" href="css/style.css" type="text/css">

次のページへ >>