[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ファイルの読み込み」についてです。
<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」
|
次回予告
次回は<link>要素の「media属性」を使って、外部CSSをパソコン画面用と印刷用に切り替えてみましょう。また、HTMLをPDFに切り替える方法もやってみましょう。
- 関連記事
-
- [45-1] meta要素で基本情報(メタデータ)を指定しよう
- [44] script要素で HTMLにスクリプトを読み込む or 直接書く
- [43] style要素で CSS を HTML文書内に書こう
- [42-4] link要素で ショートカットアイコン(favicon)を表示させよう
- [42-3] link要素の「rel属性」の値(リンクタイプ)
- (ちょっとメモ)CSSの @import と @media(メディアクエリ)
- [42-2] link要素の media属性で 外部CSSをメディア別に切り替えよう
- [42-1] link で外部CSSファイルの読み込み・グループ化をしよう
- (ちょっとメモ)MIMEタイプ
- [41] base でベースの URL を示そう
- [40] メタデータ・コンテンツって何?
- (ちょっとメモ)HTML5の文法チェックサイト
- [39] 全要素に使える「HTML5グローバル属性」を見てみよう
- [38-2] 「コンテンツ・モデル」一覧
- [38-1] 「コンテンツ・モデル」で要素のルールを見てみよう
初心者にも使いやすい(と思う)レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバーや ロリポップ!
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク