このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
Content-Type ヘッダー
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
HTTP のContent-Type は表現ヘッダーで、コンテンツへのエンコードが適用される前の、リソースの元のメディア種別を示すために使用します。
レスポンスにおいては、Content-Type ヘッダーはクライアントに返されたコンテンツの実際の種類を伝えます。POST やPUT などのリクエストにおいては、クライアントはContent-Type ヘッダーを使用してサーバーに送信しようとしているコンテンツの種類を指定します。サーバーの実装や設定がコンテンツの種別の扱いに関して厳密な場合、415 クライアントエラーレスポンスが返る可能性があります。
Content-Type ヘッダーはContent-Encoding とは異なります。Content-Encoding は、受信者がもとの形にデコードする方法を得るのに役立ちます。
メモ:この値は、ブラウザーがレスポンスに対してMIME スニッフィング（またはコンテンツスニッフィング）を行う場合に無視されることがあります。ブラウザーが MIME スニッフィングを行うことを防止するためには、X-Content-Type-Options ヘッダーの値をnosniff に設定してください。詳しくはMIME タイプの検証を参照してください。
| ヘッダー種別 | 表現ヘッダー |
|---|---|
| 禁止リクエストヘッダー | いいえ |
| CORS セーフリストレスポンスヘッダー | はい |
| CORS セーフリストリクエストヘッダー | はい* |
* 値には、CORS 危険リクエストヘッダーバイトである"():<>?@[\]{},、削除コード0x7F、制御文字0x00 から0x19 （0x09 を除く）を含むことはできません。また、 MIME タイプの解釈値（引数を除いたもの）がapplication/x-www-form-urlencoded,multipart/form-data,text/plain のいずれかである必要があります。
構文
Content-Type: <media-type>
例を示します。
Content-Type: text/html; charset=utf-8Content-Type: multipart/form-data; boundary=ExampleBoundaryStringディレクティブ
<media-type>リソースやデータのMIME タイプです。以下の引数を付けることができます。
charset: 標準で使用する文字エンコーディングを示します。この値は大文字小文字を区別しませんが、小文字を推奨します。boundary: 本文がマルチパートである場合、boundaryディレクティブが必要です。メッセージの複数のパートの境界を区切るために使用します。これはさまざまなシステム（メールゲートウェイなど）を通過しても大丈夫だと知られている文字の中から 1～70 文字で構成されます（ホワイトスペースで終了しません）。ふつう、ヘッダーの境界は 2 本のダッシュで始まり、最後の境界には最後にも 2 本のダッシュが入ります。
例
正しいコンテンツタイプで資産を提供
例えば、次の 2 つのレスポンスの例では、JavaScript および CSS の資産が、JavaScript にはtext/javascript を、CSS にはtext/css を用いて配信されます。これらのリソースに正しいコンテンツタイプを入力することで、ブラウザーにそれらをより安全に、より高いパフォーマンスで処理してもらうことができます。詳しくはサーバーで MIME タイプを正しく設定するを参照してください。
HTTP/1.1 200content-encoding: brcontent-type: text/javascript; charset=utf-8vary: Accept-Encodingdate: Fri, 21 Jun 2024 14:02:25 GMTcontent-length: 2978const videoPlayer=document.getElementById...HTTP/3 200server: nginxdate: Wed, 24 Jul 2024 16:53:02 GMTcontent-type: text/cssvary: Accept-Encodingcontent-encoding: br.super-container{clear:both;max-width:100%}...HTML フォームにおけるContent-Type
HTML フォームを送信するPOST リクエストでは、リクエストのContent-Type は<form> 要素のenctype 属性で指定します。
<form action="/foo" method="post" enctype="multipart/form-data"> <input type="text" name="description" value="Description input value" /> <input type="file" name="myFile" /> <button type="submit">Submit</button></form>リクエストは次の例のようになります。簡潔にするために一部のヘッダーを除外しています。リクエストでは、説明のためにExampleBoundaryString の境界を使用していますが、実際にはブラウザーは、このようにもっと長い---------------------------1003363413119651595289485765 のような文字列を作成します。
POST /foo HTTP/1.1Content-Length: 68137Content-Type: multipart/form-data; boundary=ExampleBoundaryString--ExampleBoundaryStringContent-Disposition: form-data; name="description"Description input value--ExampleBoundaryStringContent-Disposition: form-data; name="myFile"; filename="foo.txt"Content-Type: text/plain[content of the file foo.txt chosen by the user]--ExampleBoundaryString--URL エンコードのフォーム送信におけるContent-Type
フォームにファイルのアップロードが含まれず、よりシンプルなフィールドを使用している場合、フォームデータがリクエスト本体に記載される場合は、 URL エンコード方式のフォームの方が便利な場合があります。
<form action="/submit" method="post"> <label for="comment">Comment:</label> <input type="text" name="comment" value="Hello!" /> <button type="submit">Submit</button></form>POST /submit HTTP/1.1Host: example.comContent-Type: application/x-www-form-urlencodedContent-Length: 15comment=Hello!REST API で JSON を使用した場合のContent-Type
多くのREST API は、コンテンツタイプとしてapplication/json を使用しており、これはマシン間の通信やプログラムによる操作に便利です。次の例は、リクエストが成功した結果を示す201 Created レスポンスを示しています。
HTTP/1.1 201 CreatedContent-Type: application/json{ "message": "New user created", "user": { "id": 123, "firstName": "Paul", "lastName": "Klee", "email": "p.klee@example.com" }}仕様書
| Specification |
|---|
| HTTP Semantics # status.206 |
| HTTP Semantics # field.content-type |