メタデータ・コンテンツの要素の1つであるlink要素は、外部CSSを組み込んだり、プリント用にCSSやPDFを切り替えたり、他言語版やモバイル版のHTMLがあればそちらにリンクさせたり、ショートカットアイコンを表示させたり、など様々なことができてWebサイトを作る際に欠かせない要素です。
このような重要な要素であるlink要素について、数回に分けて少し詳しく見ていきたいと思います。
今回は、link要素に関連のあるMIMEタイプとlink要素の属性についてまとめます。
HTML 【メタデータ】1 ～ メタデータ・コンテンツの概要とbase要素
HTML 【メタデータ】2 ～ link要素（1）MIMEタイプ一覧と属性一覧（ 本ページ ）
HTML 【メタデータ】2 ～ link要素（2）CSSファイルの読み込み
HTML 【メタデータ】2 ～ link要素（3）media属性
HTML 【メタデータ】2 ～ link要素（4）@importと@media
HTML 【メタデータ】2 ～ link要素（5）rel属性
HTML 【メタデータ】3 ～ style要素
HTML 【メタデータ】4 ～ meta要素
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
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ファイル | |
| 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要素で使用する属性は、次の通り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 | 携帯電話などの端末 | ||
| プリンタ | |||
| 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のグループ名になる |
||
INTERNOUS,inc. All rights reserved.
