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

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

上から順に優先されます。

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

従って、これらの方法で、同じプロパティが設定されていた場合、優先度の高い方法の設定値が有効になります。

なお、スタイルシートの優先度を変えることもできます。

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

スタイルシートを複数用意して、ユーザにスタイルシートを選ばせることもできます。

指定方法など詳しくは、「複数スタイルシートの切り替え」を参照してください。

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

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

以下を参考にしてください。

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

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

CSS/HTMLサンプル

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

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!