<link rel="stylesheet" href="">

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 メタデータ・コンテンツ
利用場所 メタデータ・コンテンツが置ける場所 / head要素の子要素となるnoscript要素
内容

link要素で、外部のスタイルシートを読み込むことができます。


<link rel="stylesheet" href="example.css">

属性
必須属性
rel="" 現在の文書から見たリンク先の関係 stylesheet スタイルシートのリンクタイプを指定
href="" リンク先の指定 URL 読み込むスタイルシートファイルを指定
任意属性
type="" リンク先のMIMEタイプ text/css CSSMIMEタイプを指定(省略可能)
  • 外部スタイルシートファイル(CSSファイル)の拡張子は .css になります。

1つの文書内には、複数の外部スタイルシートを読み込ませることができます。

サイトの規模が大きい場合には、目的別にスタイルシートを分割しておくと管理が楽になります。

<link rel="stylesheet" href="all.css">
<link rel="stylesheet" href="categoryA.css">
<link rel="stylesheet" href="layoutB.css">

type属性は省略可能ですが、指定する場合は次のように記述します。

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

使用例

複数の外部スタイルシートファイルを読み込んだ例

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="list.css">

<title>文書のタイトル</title>

</head>
<body>



</body>
</html>

noscript要素内で使用した例
  • 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>

表示例

サンプル画面へ新規ウィンドウで表示