<link>要素の使い方・サンプルコード
<link>
<link> 要素は、CSS ファイルやアイコン画像などの外部ファイルを指定するために使います。
属性
crossorigin
オリジンをまたいでリクエストを送信する CORS (Cross-Origin Resource Sharing) を行う時に、ユーザ認証を必要とするかどうかを指定します。
<link rel="stylesheet" href="https://sample.com/style.css" crossorigin="anonymous">| 値 | |
|---|---|
| anonymous | ユーザ認証は不要 |
| use-credentials | Cookie, 証明書などの送信が必要 |
href
参照するファイルの URL を指定します。*必須
<link href="style.css" rel="stylesheet">media
外部ファイルが適用されるメディアを指定します。,（カンマ）区切りで複数のメディアを指定することができます。
all
全てのデバイスを指定します。media 属性を指定しない場合は、デフォルトで all となります。
<link rel="stylesheet" href="style.css" media="all">プリンターのプレビュー画面、印刷時を指定します。
<link rel="stylesheet" href="print.css" media="print">screen
一般的なウェブブラウザを指定します。and と組み合わせてスマートフォンへの対応によく使用されます。
例１）画面の幅が768px以下の場合に sp.css を読み込む
<link rel="stylesheet" href="sp.css" media="screen and (max-width: 768px)">例２）画面の幅が600px以上の場合に desktop.css を読み込む
<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 600px)">speech
音声合成のためのものです。
その他のメディアタイプ
その他のメディアタイプ tty, tv, projection, handheld, braille, embossed, aural は非推奨となっています。
参考：メディアクエリの使用
rel
href 属性で指定した URL の使用法・関係性を指定します。*必須
属性値はたくさんあるので、ここではよく使われるものを紹介します。
その他の属性値は「HTML リンク種別まとめ」を参照してください。
stylesheet
スタイルシートを読み込む時に指定します。
<link rel="stylesheet" href="style.css">icon
サイトのアイコン（ファビコン）の設定するときに指定します。
<link rel="icon" href="favicon.png" sizes="32x32">alternate
パソコン用・スマートフォン用など、同じ内容の HTML 文書でスタイルシートを切り替える場合などに指定します。
<link rel="stylesheet" href="default.css" title="Default">
<link rel="alternate stylesheet" href="special.css" title="Special">sizes
rel 属性が icon の時にサイズを指定します。
<link rel="icon" href="favicon.png" sizes="32x32">title
外部ファイルのタイトルを指定します。
<link rel="stylesheet" href="default.css" title="Default">type
参照するファイルを MIME タイプで定義します。rel 属性の値を参考にするので省略することができます。
例えば <link rel=”stylesheet” href=”style.css”> と書いている場合、type 属性を省略しても text/css として扱われます。
グローバル属性
全ての HTML 要素に共通して使用できるグローバル属性はこちら
使用例
<!DOCTYPE >
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="sp.css" media="screen and (max-width: 768px)">
<link rel="stylesheet" href="print.css" media="print">
<link rel="icon" href="favicon.png" sizes="32x32">
</head>
<body>
</body>
</html>対応ブラウザ
関連するタグ
- <head>：HTML文書のヘッダ情報
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィールはこちら
>> 書籍を出版しました！
>> お問い合わせはこちら
