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

最終更新日:2018年07月17日  (初回投稿日:2012年05月30日)

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

使用する要素 <link>(終了タグはありません)
使用する属性 <link>要素の属性一覧へ

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

<link>要素は内容が多いため 記事を数回に分けます。

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

<link>要素のルール

<link>要素は、そのHTML文書全体に対して外部リソースを読み込むための要素です。リソースとは、ここではデータファイル(HTML・CSSファイルなど)のこと)

<link>要素は <base>要素と同様に終了タグは無し

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

属性のうち、rel属性href属性必須

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

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

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

<link>要素は基本的には <head>内に書きます。
下記のように「属性」で 読み込むファイルの「種類」や「URL」を指定します。
(これ↓は 外部CSSファイルを読み込んだ例)

<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ファイル を読み込む

<link>要素で最もよく使うのは この 外部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属性でグループ化され 優先度も変わる

<link>要素の「title属性」は、外部リソースのタイトルを示します。
ですが、外部CSSファイルの場合だけ「title属性」はCSSのグループ名(セット名)を示します。

最初に指定したものと異なるグループ名(「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 外部リソースのタイトル
外部リソースが「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 が使えます。
初心者が始めやすいサーバだと思います。

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

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archive
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.