MDNとはHTMLで何ですか？

HTMLにおけるMDNとは？

Webサイト制作に携わっていると、HTML、CSS、JavaScriptなど、様々な技術情報が必要になります。そんな時、頼りになるのがMDN Web Docsです。

MDN Web Docsとは

MDN Web Docs（旧称：Mozilla Developer Network）は、Web開発者向けの情報を提供するウェブサイトです。HTMLやCSS、JavaScriptといったWeb標準技術に関する、信頼性の高いドキュメントが網羅的にまとめられています。

MDN Web Docsが提供する情報は多岐に渡り、以下のような内容が含まれています。

技術リファレンス：各技術の仕様、要素、属性、プロパティなどを詳細に解説
チュートリアル：Webサイト制作の基礎から応用まで、実践的な学習コンテンツを提供
最新技術情報：Web標準技術の最新動向や、ブラウザの対応状況などを紹介
コミュニティフォーラム：他の開発者と交流したり、質問したりできる場を提供

MDN Web Docs は、Web 開発者にとって欠かせない情報が網羅的にまとめられた、巨大なオンラインドキュメントです。HTML、CSS、JavaScript といった基本的な技術はもちろんのこと、Web API、アクセシビリティ、セキュリティなど、多岐にわたる分野の情報が掲載されています。

MDN の歴史は、Mozilla が開発者向けにドキュメントを公開したことから始まります。2017 年には Google、Microsoft、W3C なども参画し、Web 標準のリファレンスとして一本化されました。

MDN Web Docs が開発者に支持される理由:

信頼性の高さ: 各技術のスペシャリストが執筆し、最新情報が常に反映されています。
網羅性の高さ: Web 開発に必要な情報がほとんど揃っているため、他のサイトを探す手間が省けます。
分かりやすさ: 初心者にも理解しやすいように、分かりやすい言葉で解説されています。
豊富なサンプルコード: 実際のコード例が豊富に掲載されているため、すぐに実践に活かせます。
多言語対応: 日本語を含む多くの言語に翻訳されています。

HTML要素リファレンスの例

例えば、<a>要素について調べたい場合、MDN Web Docsでは以下のように情報が掲載されています。

項目	説明
説明	ハイパーリンクを作成する要素
属性	href, target, download, rel, hreflangなど
使用例	`<a href="https://www.example.com">リンクテキスト</a>`
ブラウザ対応状況	主要ブラウザ全てで対応

このように、MDN Web Docsでは各要素について、詳細な説明、属性一覧、使用例、ブラウザ対応状況などが分かりやすくまとめられています。

<img> タグ

ウェブページにおいて、画像は欠かせない要素です。画像はウェブページのコンテンツを豊かにし、ユーザーエクスペリエンスを向上させます。そして、<img> タグは、画像をHTMLドキュメントに埋め込むための重要な役割を果たします。

1. 概要

<img> タグの役割は非常にシンプルです: 画像をHTMLドキュメントに埋め込むことです。これは空要素であるため、終了タグはありません。

例えば、以下のコードは "example.jpg" という名前の画像をウェブページに埋め込みます。

<img src="example.jpg" alt="サンプル画像">

2. 属性

<img> タグには多くの属性があり、画像の表示方法や動作を制御するために使用できます。

必須属性

src: 画像ファイルのURLアドレスを指定します。これは <img> タグで唯一必須の属性です。

オプション属性

alt: 画像の代替テキストを指定します。画像が読み込めない場合に表示され、ウェブページのアクセシビリティにとっても重要です。
width: 画像の幅をピクセル単位で指定します。
height: 画像の高さをピクセル単位で指定します。
usemap: クライアント側のイメージマップを指定し、画像の異なる領域を異なるリンクに関連付けます。
ismap: サーバー側のイメージマップを指定します。<a> タグと組み合わせて使用する必要があります。
srcset: 異なる解像度またはデバイスピクセル密度の画面に異なる画像バージョンを提供し、ページの読み込み速度と表示効果を向上させます。
sizes: srcset 属性と組み合わせて使用し、異なるビューポート幅での画像の表示サイズを指定します。
crossorigin: クロスオリジンリソースシェアリング（CORS）の動作を制御し、ブラウザが他のドメインからの画像を読み込むことを許可または禁止します。
referrerpolicy: 画像の読み込み時に送信される Referer ヘッダー情報を制御し、ユーザーのプライバシーを保護します。
fetchpriority: 画像の読み込み優先度を設定します。高、低、または自動にすることができます。
decoding: ブラウザが画像をデコードする方法を指定します。同期デコードまたは非同期デコードを選択できます。
loading: 画像の読み込みタイミングを制御します。すぐに読み込むか、遅延読み込みするかを選択できます。

alt、width、height、srcset、sizes、referrerpolicy、decoding、loading、usemap 属性の詳細については、関連ドキュメントを参照してください。

3. 代替テキストの指定

alt 属性は、画像の代替テキストを指定するために使用されます。画像が読み込めない場合、ブラウザはこのテキストを表示します。また、alt 属性はスクリーンリーダーが画像の内容を理解するのに役立ち、ウェブページのアクセシビリティを向上させます。

例えば、以下のコードでは、"photo.jpg" が読み込めない場合、ブラウザは "逗子海岸で私の犬と散歩" というテキストを表示します。

<img src="photo.jpg" alt="逗子海岸で私の犬と散歩">

4. 画像の表示サイズの指定

width と height 属性は、画像の表示幅と高さをピクセル単位で指定するために使用されます。例えば、以下のコードは画像の幅を300ピクセル、高さを200ピクセルに設定します。

<img src="example.jpg" alt="サンプル画像" width="300" height="200">

5. レスポンシブ画像の設定（画像サイズの最適化）

srcset と sizes 属性を使用すると、ブラウザは異なるビューポート幅またはデバイスピクセル密度に基づいて、読み込むのに最適な画像バージョンを選択できます。これにより、ページの読み込み速度と表示効果が向上します。

srcset 属性は、使用可能な画像バージョンとその対応する幅記述子またはピクセル密度記述子のリストを指定し、sizes 属性は、異なるビューポート幅での画像の表示サイズを指定します。

6. 画像の読み込み時にリファラーポリシーを指定する

referrerpolicy 属性は、画像の読み込み時に送信される Referer ヘッダー情報を制御し、ユーザーのプライバシーを保護するために使用できます。例えば、referrerpolicy="no-referrer" を設定すると、ブラウザが Referer 情報を送信するのを防ぐことができます。

7. 画像のデコード方法の指定

decoding 属性は、ブラウザが画像をデコードする方法を指定します。同期デコード（sync）または非同期デコード（async）を指定できます。非同期デコードを使用すると、画像のデコードタスクをバックグラウンドスレッドで実行できるため、メインスレッドがブロックされるのを防ぎ、ページのパフォーマンスを向上させることができます。

8. 画像の読み込みタイミングの指定

loading 属性は、画像の読み込みタイミングを制御します。すぐに読み込む（eager）か、遅延読み込み（lazy）かを選択できます。遅延読み込みを使用すると、ブラウザはビューポート内の画像のみを読み込むため、ページの初期読み込み速度を向上させることができます。

9. イメージマップの定義

usemap 属性は、画像をイメージマップに関連付けます。これにより、画像の異なる領域をユーザーのクリック操作に対応させることができます。イメージマップは、<map> タグと <area> タグを使用して作成できます。

10. 画像の埋め込み方法

HTMLドキュメントに画像を埋め込むには、<img> タグを使用し、src 属性で画像ファイルのURLを指定します。

例えば、以下のコードは "sample.gif" という名前の画像をウェブページに埋め込みます。

<img src="sample.gif" alt="サンプル画像">

画像に枠線を追加する場合は、CSSスタイルを使用できます。例えば、以下のコードは画像の周りに1ピクセル幅の赤い枠線を追加します。

<img src="sample.gif" alt="サンプル画像" style="border: 1px solid red;">

11. 画像フォーマットについて

一般的に使用されるウェブページの画像フォーマットは3つあります：JPEG、GIF、PNG。

JPEG（拡張子 .jpg）: 写真など、色数の多い画像に適しています。
GIF（拡張子 .gif）: アニメーションや色数の少ない画像に適しています。
PNG（拡張子 .png）: 透明な画像や高画質が必要な画像に適しています。

12. alt 属性について

alt 属性は、画像の代替テキストを提供し、ウェブページのアクセシビリティを向上させるため、非常に重要です。すべての <img> タグで alt 属性を使用することをお勧めします。

例えば、以下のコードは画像に "京都の庭園" という代替テキストを追加します。

<img src="garden.jpg" alt="京都の庭園">

13. 古い HTML からの変更点

HTML5 以降のバージョンでは、<img> タグにいくつかの変更が加えられました。属性の追加、廃止、変更などです。例えば、longdesc、name、align、border、hspace、vspace 属性は廃止され、crossorigin、srcset、sizes、referrerpolicy、decoding、loading 属性が追加されました。

まとめ

MDN Web Docsは、Web開発者にとって必須とも言える情報サイトです。HTMLの学習を始め、Webサイト制作を行う際には、ぜひMDN Web Docsを活用してみてください。