<link rel="stylesheet" href="">
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | メタデータ・コンテンツ / （body内で利用できる場合：フロー・コンテンツ / フレージング・コンテンツ link要素の本文参照） |
| 利用場所 | メタデータ・コンテンツが置ける場所 / head要素の子要素となるnoscript要素内 / （body内で利用できる場合：フレージング・コンテンツが置ける場所 link要素の本文参照） |
| 内容 | 無し（空要素） |
link要素で、外部のスタイルシートを読み込むことができます。
<link rel="stylesheet" href="example.css">
| 属性 | 値 | ||
|---|---|---|---|
| 必須属性（この設定を行う場合） | |||
rel="" |
現在の文書から見たリンク先の関係 | stylesheet |
スタイルシート |
href="" |
リンク先の指定 | URL | 読み込むスタイルシートファイルを指定 |
| 任意属性 | |||
type="" |
リンク先のMIMEタイプ | text/css |
CSSのMIMEタイプを指定（省略可能） |
disabled |
 リンクの無効化 |
（disabled） |
値は省略可能 |
- 外部スタイルシートファイル（CSSファイル）の拡張子は .css になります。
- disabled属性は、
rel="stylesheet"が指定されている場合に使用することができます。
1つの文書内には、複数の外部スタイルシートを読み込ませることができます。
サイトの規模が大きい場合には、目的別にスタイルシートを分割しておくと管理が楽になります。
<link rel="stylesheet" href="all.css">
<link rel="stylesheet" href="categoryA.css">
<link rel="stylesheet" href="layoutB.css">
- ページの表示スピードを重視する場合は、1つにまとめておいた方が良いかもしれません。
type属性は省略可能ですが、指定する場合は次のように記述します。
<link rel="stylesheet" type="text/css" href="example.css">
disabled属性を指定すると、そのスタイルシートへのリンクを無効にすることができます。
例えば、スクリプトを使ってこの属性の有無を切り替えることで、読み込まれるスタイルシートの種類をコントロールすることができます。
<link rel="stylesheet" href="example.css" disabled>
使用例
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="list.css">
<title>文書のタイトル</title>
</head>
<body>
</body>
</html>
- noscript要素内で使用すると、スクリプトを利用できないブラウザにのみ、そのスタイルを適用させることができます。
<!DOCTYPE html>
<html>
<head>
<noscript>
<link rel="stylesheet" href="noscript.css">
</noscript>
<title>スクリプト未対応向けのスタイル</title>
</head>
<body>
<h1>スクリプト未対応向けのスタイル</h1>
<p>noscript.css 内で、p.msg { visibility: hidden; } を指定しています。</p>
<p class="msg">スクリプトを利用できないブラウザでは、この段落のテキストは表示されません。</p>
...
</body>
</html>
- 表示例
- 一般的にはhead要素内で使用します。
<!DOCTYPE html>
<html>
<head>
<title>body内で読み込まれるスタイル</title>
</head>
<body>
<h1>赤文字で表示されます</h1>
<p>スタイルが適用されると見出し文字が赤色で表示されます。</p>
<link rel="stylesheet" href="inbody.css">
</body>
</html>
- 表示例