ほんっとにはじめてのHTML5とCSS3：[42-1] link で外部CSSファイルの読み込み・グループ化をしよう

[42-1] link で外部CSSファイルの読み込み・グループ化をしよう

最終更新日：2018年07月17日　（初回投稿日：2012年05月30日）

今回から、メタデータ・コンテンツの1つ、<link>要素を使ってみましょう。
<link>要素は、外部ファイルとのリンクを指定する要素です。

使用する要素	`<link>`（終了タグはありません）

使用する属性	<link>要素の属性一覧へ

<link>要素が一番使われるのは外部CSSファイルの読み込みと、ショートカットアイコンの読み込みです。そのほか、言語によって HTMLファイルを切り替えることもできます。

[42-1] link要素で外部CSSファイルの読み込み・グループ化をしよう　←今日はココ: <link>要素全体の話と、外部CSSファイルの読み込み方法
[42-2] link要素の media属性で外部CSSをメディア別に切り替えよう: media属性で外部CSSファイルを切り替えます。
（ちょっとメモ）CSSの @import と @media（メディアクエリ）: CSSファイル上で CSSを切り替える方法です。
[42-3] link要素の「rel属性」の値（リンクタイプ）: たくさんの言語に対応したサイトの場合、<link>要素で言語の切り替えができます。
[42-4] link要素でショートカットアイコン（favicon）を表示させよう: ショートカットアイコンを設定します。

今回は <link>要素全体の話と「外部CSSファイルの読み込み」についてです。

本日のINDEX

<link>要素のルール
rel=”stylesheet” を使って外部CSSファイルを読み込む
CSSの場合だけ title属性でグループ化され優先度も変わる
<link>要素の属性一覧

<link>要素のルール

また、<link>要素は、<base>と違って複数OK。
1つの <link>要素で読み込ませられる外部ファイルは1個だけなので、読み込ませるファイルが複数なら、複数の<link>要素が必要ってことです。

属性のうち、rel属性 と href属性 は必須。

rel属性は外部ファイルの種類をリンクタイプ で指定します。
rel は「relation」の略。リレーション= 関係・関連といった意味。

リンクタイプについては、[42-3] link要素の「rel属性」の値（リンクタイプ）をご覧ください。

href属性は外部リソースの場所（URL）を指定します。
href は「Hyper Text Reference」の略。「Reference（リファレンス）」は「参照」って意味。

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

また、rel属性で指定するリンクタイプ（リソースファイルの種類）が「body-ok」だったら、<body>内にも書けるようになりました（HTML5.2（2017年11月勧告）から）
参考：4.6.6 Link types | HTML Standard
例えば、リンクタイプが「stylesheet」なら、↑上記の表で「body-ok」ですので、下記のように <body>要素内に書けます。

ブラウザがCSSを読み込んでいるあいだはレンダリングが止まるので、少しでも速くレンダリングさせたい場合、<body>の最後に CSSを置けるので便利です。

</head>
<body>
  <link rel="stylesheet" href="css/style.css">
</body>

そして <link>要素は <head>内にある <noscript>要素の中にも書けます。
<noscript>要素は、JavaScriptを使えないブラウザ（使わないように設定しているブラウザ）のための代替の指定をする要素。これもメタデータ・コンテンツの要素です。

下記は、JavaScriptを利用できないブラウザなら「noscript.css」という外部スタイルシートを読み込むように指示しています。

<head>
  <link rel="stylesheet" href="css/style.css">
  <noscript>
    <link rel="stylesheet" href="css/noscript.css">
  </noscript>
</head>

rel=”stylesheet” を使って外部CSSファイルを読み込む

サンプルHTMLを見てみましょう。

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

最初の「rel属性」は、外部ファイルのこのHTMLにとっての「関係」を示します。
CSSファイルの場合、値は「stylesheet」。
この外部ファイルは、このHTML文書にとってのスタイルシートだと示しています。

「rel属性」の値については、
[42-3] link rel="alternate" で他言語サイトへ導こうをご覧ください。

次の「href属性」で、その CSSファイルの場所（URL）を指定しています。
これは、相対パスでも絶対パスでもOK。

相対パス・絶対パスについては、
[10] 絶対URL と相対URL（絶対パスと相対パス）をご覧ください。

最後の「type属性」は、読み込むファイルの種類を「MIMEタイプ」で書きます。

＊「MIMEタイプ」については「ちょっとメモ：MIMEタイプ」を見てください。

CSSファイルの MIMEタイプは「text/css」です。
ただ、ブラウザは外部ファイルのタイプをチェックする機能があるので、「type属性」の値は単なる参考情報なんだそうです。
「rel="stylesheet"」のデフォルトの MIMEタイプは「text/css」なので、この「type="text/css"」は略してもOKなんだって。
ですので、外部CSSの読み込みは下記のソースで十分です。

<head>
  <link rel="stylesheet" href="css/default.css">
</head>

なお、MIMEタイプを間違えたらブラウザに無視されます。書くなら必ず正しいMIMEタイプを書きましょう。
下記のソースだと、最初の「style-a.css」はブラウザにスキップされます。「text/plain」がスタイルシートの MIMEタイプじゃないから。
「style-b.css」「style-c.css」は正しく読み込まれます。

<head>
  <link rel="stylesheet" href="css/style-a.css" type="text/plain">
  <link rel="stylesheet" href="css/style-b.css" type="text/css">
  <link rel="stylesheet" href="css/style-c.css">
</head>

外部CSSファイルが複数ある場合、<link>要素を複数書きますが、CSSは「カスケード処理」をしますので、後から読み込ませたCSSが前のCSSを上書きします。ですので <link>要素を並べる順番にも注意が必要です。

下記は、3つの CSSファイルを読み込ませた例です。

<head>
  <link rel="stylesheet" href="css/minireset.css">
  <link rel="stylesheet" href="css/default.css">
  <link rel="stylesheet" href="css/top-page.css">
</head>

最初の「minireset.css」は、ブラウザのデフォルトスタイルの一部（ブロックレベル要素の margin や paddingなど）を一旦チャラにして自分の指定をしやすくするもの。
これを最初に置かないと、続く指定（default.css以降）をリセットしてしまう。
CSSは、後に書いたものが優先と覚えておこう。

このCSSの優先度についての詳細は、
【4】CSSの優先度のルール（ブラウザが混乱しないためのルールだよ）をご覧ください。

「外部CSSファイル」の作り方

外部CSSファイルそのものの書き方については、
[12-1] CSSを外部ファイルにしようをご覧ください。

CSSの場合だけ title属性でグループ化され優先度も変わる

最初に指定したものと異なるグループ名（「title属性」の値）の CSSファイルは、読み込まれても表示に使われません。

一部のブラウザ（IE と Firefox）では「メニューバー」からこのグループ名をユーザーが選択して、スタイルを切り替えることができます。

サンプルを作りましたので、試してみてください。
＊メニューバーでスタイル変更できないブラウザでも、セレクトメニューで切り替えられるようにしています。

サンプルを開く（クリックで別ウィンドウで開きます）

サンプルファイルでは、こんなかんじで外部CSSを読み込んでいます。

<head>
  <link rel="stylesheet" href="css/default.css">
  <link rel="stylesheet" href="css/style-a.css" title="test1">
  <link rel="stylesheet" href="css/style-b.css" title="test2">
  <link rel="stylesheet" href="css/style-c.css" title="test2">
</head>

ページを読み込んだときは、「default.css」（title属性がない）と「style-a.css」（最初の title「test1」）のみが読み込まれます。
この後に記述した異なる title名のグループの CSSファイル2つは、初回には表示に使われません。これはどのブラウザでも同じ現象。

一部のブラウザでは、ユーザーがメニューバーで「test2」を選択でき、このタイトルが付いた「style-b.css」と「style-c.css」が適用されます。
このとき最初に読み込んだ「default.css」「style-a.css」は無効（表示に使われない）になります。

「title属性」の値によって、適用される・されないの違いが出るんですね。

サンプルファイルのように JSでも CSSを切り替えられるので、「文字のサイズ」などの選択肢を作ることができます。（その場合は「title属性」はあんまり関係ないかもね..）

＊サンプルの JSによる CSSの切り替えのソースコードは、サンプルファイルの下のほうに記載しています。

<link>要素の属性一覧

属性名	概要と値
href	外部リソースのURL
rel	HTMLと外部リソースの関係（relation）をリンクタイプで表す。リンクタイプの値は「stylesheet」「alternate」「icon」など。値の一覧は [42-3] link rel="alternate" で他言語サイトへ導こうに。
type	外部リソースの MIMEタイプ MIMEタイプの値は「text/css」「text/html」「application/pdf」など。 MIMEタイプの値の一覧は（ちょっとメモ）MIMEタイプに。
media	外部リソースのメディアタイプメディアタイプの値は「print」「screen」などメディアタイプの値の一覧は [42-2] link要素の media属性で外部CSSをメディア別に切り替えように。
hreflang	外部リソースの言語コードを、ISO 639-1 形式で指定し、必要に応じて地域を ISO 3166-1 の alpha-2形式で指定。詳細は [42-3] link rel="alternate" で他言語サイトへ導こうで。
sizes	「rel="icon"」の場合のみ、アイコンのサイズを示す。詳細は [42-4] link要素でショートカットアイコン（favicon）を表示させようで。
title	外部リソースのタイトル
title	外部リソースが「CSSファイル」のときだけ CSSファイルのグループ名詳細は本記事のCSSの場合だけ title属性でグループ化され優先度も変わるで。
crossorigin	HTML5.1 から<link>要素でも使えるようになった。 CORS（Cross-Origin Resource Sharing = クロスドメイン通信）設定属性で、そのHTML文書と異なるオリジンのリソース（同じドメインじゃないところのファイルってこと）を読み込む時のルールの指定をする。値は「anonymous（ユーザ認証情報不要）」か「use-credentials（ユーザ認証情報が必要）」値を略して crossorigin だけ書けばデフォの「anonymous」に。
rev	HTML5 で廃止になり、HTML5.1 で復活。（ただし WHATWG の仕様にはありません） rev は「reverse（リバース）」の略で、rel属性と逆のリバースリンクの関係をリンクタイプで表す。下は書籍の例。この記述のあるHTMLファイルは「chapter2.html」 `<head> <link href="chapter1.html" rel="prev" rev="next"> <link href="chapter3.html" rel="next" rev="prev"> </head>`

次回予告

次回は<link>要素の「media属性」を使って、外部CSSをパソコン画面用と印刷用に切り替えてみましょう。また、HTMLをPDFに切り替える方法もやってみましょう。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2018-07-17（Tue）│
投稿日：2012-05-30（Wed）│
カテゴリ：はじめてのHTML

Pagetop ↑

« next ホーム prev »

コメントの投稿