HTML 【メタデータ】２ ～ link要素（１）MIMEタイプ一覧と属性一覧
メタデータ・コンテンツの要素の1つであるlink要素は、外部CSSを組み込んだり、プリント用にCSSやPDFを切り替えたり、他言語版やモバイル版のHTMLがあればそちらにリンクさせたり、ショートカットアイコンを表示させたり、など様々なことができてWebサイトを作る際に欠かせない要素です。
このような重要な要素であるlink要素について、数回に分けて少し詳しく見ていきたいと思います。
今回は、link要素に関連のあるMIMEタイプとlink要素の属性についてまとめます。
メタデータ・コンテンツについては、こちらのページもご参照下さい。
HTML 【メタデータ】１ ～ メタデータ・コンテンツの概要とbase要素
HTML 【メタデータ】２ ～ link要素（１）MIMEタイプ一覧と属性一覧（本ページ）
HTML 【メタデータ】２ ～ link要素（２）CSSファイルの読み込み
HTML 【メタデータ】２ ～ link要素（３）media属性
HTML 【メタデータ】２ ～ link要素（４）@importと@media
HTML 【メタデータ】２ ～ link要素（５）rel属性
HTML 【メタデータ】３ ～ style要素
HTML 【メタデータ】４ ～ meta要素
目次
１．MIMEタイプ一覧
２．link要素で使用する属性
１．MIMEタイプ一覧
link要素の内容に入る前に、MIMEタイプについて紹介します。
<link rel=”stylesheet” href=”column.css” type=”text/css” />のようなリンクの指定をした場合など、「 text/css 」のような書き方を目にしたことがあると思います。
上記の書き方（タイプ名 /（スラッシュ）サブタイプ名）をMIMEタイプといいます。
主なMIMEタイプは、以下の通りです。
| MIMEタイプ |
拡張子 |
ファイルの概要 |
| application/msexcel |
.xls |
マイクロソフト Excel |
| application/mspowerpoint |
.ppt |
マイクロソフト PowerPoint |
| application/msword |
.doc |
マイクロソフト Word |
| application/pdf |
.pdf |
PDFファイル |
| application/rss+xml |
（.rdf または .xml） |
RSSファイル |
| application/atom+xml |
（.xml） |
Atomファイル |
| application/x-httpd-cgi |
.cgi |
CGIスクリプト |
| application/x-httpd-php |
.php |
PHPスクリプト |
| application/x-shockwave-flash |
.swf |
フラッシュファイル |
| application/x-java-vm |
.class |
JAVAアプレット |
| application/zip |
.zip |
ZIPファイル（圧縮ファイル） |
| audio/mpeg |
.mp3 |
MP3（音声ファイル） |
| audio/aac |
.m4a |
AAC（音声ファイル） |
| audio/ogg |
.ogg |
Ogg（音声ファイル） |
| audio/midi |
.mid .midi |
MIDI（音声ファイル） |
| audio/vnd.rn-realaudio |
.ra |
RealAudio（音声ファイル） |
| audio/wav |
.wav |
WAVE（音声ファイル） |
| image/gif |
.gif |
GIF画像ファイル |
| image/jpeg |
.jpg .jpeg |
JPEG画像 |
| image/png |
.png |
PNG画像 |
| image/svg+xml |
.svg .svgz |
SVG 形式画像 |
| text/css |
.css |
スタイルシート |
| text/html |
.html .htm |
HTMLファイル |
| text/javascript |
.js |
Javascriptファイル |
| text/plain |
.txt |
テキストファイル |
| text/xml |
.xml .xsl |
XMLファイル |
| video/mpeg |
.mpeg .mpg |
MPEG（動画ファイル） |
| video/avi |
.avi |
AVI（動画ファイル） |
| video/mp4 |
.mp4 |
MP4（動画ファイル） |
| video/webm |
.webm |
WebM（動画ファイル） |
| video/ogg |
.ogv |
Ogg（動画ファイル） |
| video/quicktime |
.qt .mov |
Quick Time（動画ファイル） |
▲目次へ戻る
２．link要素で使用する属性
link要素で使用する属性は、次の通り6個あります。これらを組み合わせてリンクの指定をします。
| 要素 |
link |
| 属性 |
rel属性、href属性、hreflang属性、type属性、sizes属性、media属性 |
| 注意点 |
●たいてい<head>内に書きます。
●終了タグはありません。
●rel属性とhref属性は必須です。
●外部ファイルの種類はrel属性で、外部ファイルの場所（URL）はhref属性で指定します。 |
各属性とその値については、下の表の通りです。
| 属性 |
概要 |
値 |
| rel |
HTMLと外部ファイルの関係（relation）を示す |
（値） |
（値の概要） |
| stylesheet |
スタイルシート
(alternateとの併用で代替スタイルシートを示す) |
| alternate |
代替え文書
(hreflang属性との併用で翻訳版を、media属性との併用で別メディア版を示す) |
| icon |
ショートカットアイコン |
| search |
検索ページ |
| help |
ヘルプ |
| prev |
前へ |
| next |
次へ |
| prefetch |
リンクを事前に読み込む |
| license |
著作権 |
| author |
作者 |
| href |
外部ファイルのURLを示す |
外部ファイルのURL |
| type |
外部ファイルのMIMEタイプを示す |
text/css（CSS）、text/html（HTML）、application/pdf（PDF）など |
| media |
外部ファイルが対象とするメディア（出力機）を示す |
all |
すべての機器 |
| screen |
パソコンのディスプレイ |
| tv |
テレビ画面 |
| handheld |
携帯電話などの端末 |
| print |
プリンタ |
| projection |
プロジェクタ |
| tty |
文字幅が固定された機器（テレタイプなど） |
speech
（以前のaural） |
音声出力機 |
| braille |
点字ディスプレイなど |
| embossed |
点字プリンタ |
| aural |
音声出力機器 |
| hreflang |
外部ファイルの言語コードを示す |
ja (日本語)、en (英語)、es (スペイン語)、fr (フランス語)、ko (韓国語)、zh (中国語) など |
| sizes |
「rel=”icon”」の場合のアイコンのサイズを示す |
数字で「sizes=”16×16″」
または「sizes=”any”」
アイコンの普通サイズは16×16
他の数字を使う場合、先頭に0を付けないこと |
| title |
外部ファイルのタイトルを示す |
グローバル属性の title と違って、これを書かなくても、親要素のtitleは継承されない |
| 外部CSSのグループ化を示す |
リンクがCSSの場合、titleをつけるとCSSのグループ化ができ読込み優先度が変わる
また「rel=”alternate stylesheet”」とすることで、代替えCSSのグループ名になる |
▲目次へ戻る
