May 6th,2016
“type”属性、“accept”属性
サンプルコード
埋め込まれる外部リソースのデータの種類を示す
<link rel="stylesheet" type="text/css" href="style.css">
リンク先のデータの種類を示す
<a href="sample.pdf" type="application/pdf">リンク</a>
フォームで送信可能なファイルの種類を示す
<input type="file" name="sample" accept="image/jpeg,image/gif,image/png">
“type”属性はリンク先、もしくは埋め込まれる外部リソースのデータの種類を示します。
“accept”属性はフォームで送信可能なファイルの種類を示します。
属性値はMIMEタイプを利用します。
使用できる要素
“type”属性
| 要素 | 説明 |
|---|---|
| <a> | リンク先のデータの種類を示す |
| <area> | リンク先のデータの種類を示す |
| <embed> | 埋め込むアプリケーション、コンテンツの種類を示す |
| <link> | 関連付ける外部リソースのデータの種類を示す |
| <object> | 埋め込む外部リソースの種類を示す |
| <script> | 埋め込むスクリプトの種類を示す |
| <source> | 埋め込むメディアファイルの種類を示す |
以下の要素も“type”属性が指定できますが、値にはMIMEタイプではなくそれぞれ定義された値を使用します。
“accept”属性
| 要素 | 説明 |
|---|---|
| <input> | フォームで送信可能なファイルの種類を示す |
MIMEタイプ
MIMEタイプとは？
“MIMEタイプ”はインターネット上で転送されるデータやコンテンツの形式を識別するための識別子です。“MIME”とは“Multipurpose Internet Mail Extensions”の略で規格上テキストしか使用できないインターネットの電子メールで画像、動画、音声などテキスト以外のデータを扱えるようにするための規格です。MIMEタイプはこのMIMEにおいてデータ形式を識別するためのコードの体系のことを指し、ブラウザでインターネットを閲覧するのに使用されるHTTP通信でもデータの種類を表すコードとして使用されます。
“MIME”はもともと“IETF”によって策定された技術仕様であるRFC 2045により定義されていたもので、HTTP通信やHTML文書で使用される“MIMEタイプ”は最初はRFC 2048によって定義され、現在はRFC 6838に定義されています。
“IETF(The Internet Engineering Task Force)”は各種インターネット技術の標準化を推進する為に設立された団体です。IETFによって策定された技術仕様は“RFC(Request For Comments)”として発行されます。
“MIMEタイプ”は“IANA”によって管理されており、新しい“MIMEタイプ”はIANAの手続きを経て登録されます。
“IANA(Internet Assigned Numbers Authority)”はインターネットに関連する番号を管理する為に設立された団体です。インターネット上で使用されるドメイン名やIPアドレスを管理する“ICANN(Internet Corporation for Assigned Names and Numbers)”の下部組織です。
“MIMEタイプ”は“メディアタイプ”や“コンテンツタイプ”と呼ばれることもあります。
MIMEタイプの書式
MIMEタイプは“/(スラッシュ)”で区切られた“type(タイプ)”と“subtype(サブタイプ)”で構成されます。
- “type(タイプ)”
- データの大まかな種類を指定します。“text(テキスト)”、“image(画像)”、“audio(音声)”、“video(動画)”、“application(アプリケーション固有)”などがあります。
- “subtype(サブタイプ)”
- “type”で指定した種類の詳細な形式を指定します。
MIMEタイプは大文字小文字は区別しませんが、一般的にはすべて小文字で記述されます。
データの種類が“MP4動画”であることを示す場合は“type”に“video(動画)”、“subtype”に“mp4(MP4動画)”を指定します。
<source src="samplemovie.mp4" type="video/mp4">
大文字小文字は区別しませんが、一般的にすべて小文字で記述されます。
主なMIMEタイプの一覧
以下は主なMIMEタイプです。
| MIMEタイプ | ファイル形式 |
|---|---|
| テキスト・HTML | |
| text/plain | テキスト |
| text/html | HTML |
| application/xhtml+xml | XHTML |
| text/xml | XML |
| スクリプト・CSS | |
| text/javascript | JavaScript |
| text/css | CSS |
| application/x-httpd-cgi | CGI |
| application/x-httpd-php | PHP |
| 画像 | |
| image/bmp | BMP |
| image/gif | GIF |
| image/jpg | JPEG |
| image/png | PNG |
| image/svg+xml | SVG |
| image/x-icon | ICO |
| 音声 | |
| audio/mpeg | MP3 |
| audio/webm | WebM |
| audio/ogg | OGG |
| audio/aac | AAC |
| audio/midi | MIDI |
| audio/wav | WAVE |
| 動画 | |
| video/mp4 | MP4 |
| video/webm | WebM |
| video/ogg | OGG |
| video/mpeg | MPEG |
| video/avi | AVI |
| video/quicktime | Quicktime |
| フォント | |
| font/otf | OpenType Font |
| font/woff | Web Open Font Format |
| font/woff2 | Web Open Font Format |
| font/ttf | TrueType Font |
| その他 | |
| application/zip | ZIP |
| application/pdf | |
| application/ld+json | JSON-LD |
使用例
リンク先のデータの種類を示す
<a href="report-set.zip" type="application/zip" download>報告書(全部)</a>
<a href="report-1.pdf" type="application/pdf">報告書(第1部)</a>
スタイルシートの種類を示す
“link”要素で外部スタイルシートを読み込む
<link rel="stylesheet" type="text/css" href="style.css">
“link”要素でスタイルシートを読み込む場合はHTML文書に使用されるスタイルシートの記述言語は“Cascading Style Sheets”(“text/css”)のみであるため“type”属性は通常省略されます。
埋め込むスクリプトの種類を示す
<script type="text/javascript" src="sample.js"></script>
“script”要素で埋め込まれるのがモジュールスクリプトでない従来のJavaScriptである場合は“type”属性の初期値が“text/javascript”なので“type”属性を省略することが推奨されます。
フォームで送信可能なファイルの種類を指定
<input type="file" name="sample" accept="image/jpeg,image/gif,image/png">
“,(カンマ)”で区切ることで複数のファイル形式を指定することができます。
“image/*”、“audio/*”、“video/*”とすることで大まかなファイル形式のみ指定することもできます。
