ITコラム

Web development concept: Link on billboard background

ITコラム

2017.01.20

#HTML入門

HTML【メタデータ】2～link要素（1）MIMEタイプ一覧と属性一覧

メタデータ・コンテンツの要素の1つであるlink要素は、外部CSSを組み込んだり、プリント用にCSSやPDFを切り替えたり、他言語版やモバイル版のHTMLがあればそちらにリンクさせたり、ショートカットアイコンを表示させたり、など様々なことができてWebサイトを作る際に欠かせない要素です。
このような重要な要素であるlink要素について、数回に分けて少し詳しく見ていきたいと思います。
今回は、link要素に関連のある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は継承されない
title	外部CSSのグループ化を示す	リンクがCSSの場合、titleをつけるとCSSのグループ化ができ読込み優先度が変わるまた「rel=”alternate stylesheet”」とすることで、代替えCSSのグループ名になる