HTML 【メタデータ】2 ~ link要素(1)MIMEタイプ一覧と属性一覧

Web development concept: Link on advertising billboard background, 3D rendering

メタデータ・コンテンツの要素の1つであるlink要素は、外部CSSを組み込んだり、プリント用にCSSやPDFを切り替えたり、他言語版やモバイル版のHTMLがあればそちらにリンクさせたり、ショートカットアイコンを表示させたり、など様々なことができてWebサイトを作る際に欠かせない要素です。
このような重要な要素であるlink要素について、数回に分けて少し詳しく見ていきたいと思います。
(メタデータ・コンテンツの概要についてはHTML 【 metadata 】1 ~ メタデータ・コンテンツの概要とbase要素をご参照下さい。)

今回は、link要素に関連のあるMIMEタイプとlink要素の属性についてまとめます。

目次

1.MIMEタイプ一覧
2.link要素で使用する属性

1.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(動画ファイル)

▲目次へ戻る

2.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のグループ名になる

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です