これまでに、お店の位置情報を示す「マップ」や「紹介動画」等があるWebサイトを見かけたことはないでしょうか。WebサイトはHTMLドキュメント（※HTML文書）を使用して画像や動画を表示することが出来ます。Webブラウザに表示する方法はファイルサーバ内にあるファイルを使用する方法と、外部のWebページから必要なコンテンツを読み込み、使用する方法があります。本章ではコンテンツの参照方法および表示方法について説明していきます。

HTMLドキュメントに画像を追加

HTML文書は<img>タグを使用することで、Webブラウザに画像を表示することが出来ます。

<img>

インライン要素　
終了タグ：無し
概要：imgは「Image」の略称で、HTML文書内に画像を表示することが出来ます。<img>タグは「src」属性に表示したい画像のパスを指定します。また「alt」属性は画像を見ることができない場合に、代わりに画像内容を説明する役割を持ちます。画像を見ることが出来ない場合とは、「ブラウザが画像を読み込めない時」や「視覚の不自由なユーザーのために、スクリーンリーダー（音声読み上げソフト）が代わりに画像の説明を行う時」等が挙げられます。

上記例では、src属性に「logo.png」という画像ファイル名を記述しています。なお、パスは「相対パス」で指定しており、<img>タグを記述したHTML文書と画像が同じフォルダに配置されている状態になります。パスの指定方法には「相対パス」「ルートパス」「絶対パス」があり、それぞれパスの記述方法が異なります。

相対パス

相対パスは現在作業しているフォルダを基準として、参照ファイルの位置を指定する方法です。指定方法は以下の3つに分類できます。

1. 現在作業しているフォルダと参照するファイルが同じ階層の場合
   ファイル名のみ記述することで参照することが出来ますが、「./ファイル名」と記述することも出来ます。
   
   
2. 下の階層にあるフォルダに参照するファイルがある場合
   「フォルダ名/ファイル名」と記述します。
   
   
3. 上の階層にあるファイルを参照する場合
   「../ファイル名」と記述し、更に１つ上の階層ファイルを参照する場合は「../../ファイル名」と記述します。

■記述例

<img src="../../○○○.png" alt="えるすた画像">

ルートパス

ルートパスは主にドキュメントルートから目的となるファイル迄の位置を指定する方法です。ルートパスは「/」から始まり、それ以降は絶対パスと同じ記述方法を取ります。

■記述例

<img src="/×××/◇◇◇/▲▲▲/▲▲▲.png" alt="えるすた画像">

<img src="https://○○○.com/×××/logo.png" alt="えるすた画像">

初めてパスの種類や指定方法について学ぶ方は難しく感じるかもしれませんが、Web制作を行う上で必ず取り扱う内容です。図と記述例を見比べて、それぞれの特徴を把握しましょう。

画像の種類

Webブラウザに表示できる画像のファイルタイプにはいくつか種類があり、「JPEG（JPG）」、「PNG」、「GIF」、「SVG」等があります。この項目では、各ファイルタイプについて説明していきます。

JPEG（JPG）

拡張子：.jpeg（.jpg）
概要：扱える色数が多く、グラデーションの細かな写真（カメラで撮影した写真）等のファイルの保存に適しています。

PNG

拡張子：.png
概要：JPEGと同様に扱える色数が多く、背景を透過することが出来るため、Webサイトのロゴ等に利用されます。

GIF

拡張子：.gif
概要：アニメーションが行える画像形式です。扱える色数が少なく（256種類）、写真の保存には不向きですが、SNS等で簡単なアニメーションを行う際に使用されます。

SVG

拡張子：.svg
概要：ベクターファイル形式を持ち、画像サイズを変更しても画質が劣化しない特徴を持ちます。（※JPEG、PNG、GIFはビットマップ形式です。）

音声、動画、その他ページの埋め込みについて

HTML文書は画像ファイル以外にも、音声ファイルや動画ファイルを表示したり、外部のWebページをHTML文書内に埋め込むことも出来ます。基本的な使い方は<img>タグと同じで、src属性でファイルの場所を指定します。<audio>タグや<video>タグで囲んだ要素は、Webブラウザがsrc属性に指定したファイルに対応していない場合に、その代替として表示されます。

<audio>

インライン要素
終了タグ：</audio>
概要：HTML文書内にオーディオファイルを表示する為のタグです。src属性でファイルのパスを指定します。また「controls」属性を使用すると、シーク機能（再生、一時停止、巻き戻し、音量調整等の操作パネル）を追加することが出来ます。

■記述例

<audio controls src=""><p>これは代替テキストです</p></audio>

<video>

インライン要素
終了タグ：</video>
概要：HTML文書内にビデオファイルを表示する為のタグです。src属性でファイルのパスを指定します。<audio>タグと同様に「controls」属性を指定すると、シーク機能を追加することが出来ます。

■記述例

<video controls src=""><p>これは代替テキストです</p></video>

<iframe>

インラインフレーム要素
終了タグ：</iframe>
概要：iframeは「Inline Frame」の略称で、HTML文書内に他のページを埋め込むことが出来ます。外部ページの表示は横幅（width属性）と縦幅（height属性）を指定します。<iframe>タグは主に「マップ」や「youtube等の動画」の埋め込みに使用されます。

■記述例

<iframe width="450" height="400" src="https://l-study.arcjp.com/lpic/">
    <p>これは代替テキストです</p>
</iframe>

これらのタグは<img>タグと共通点が多いですが、いくつか異なる特徴もあるので注意しましょう。

リソースへのリンク

リンク（ハイパーリンク）は異なるページやコンテンツ間を紐づけ、簡単に移動出来るようにする仕組みです。リンクは大きく分けて「ページ外リンク」と「ページ内リンク」のカテゴリに分けることが出来ます。

アンカーリンク（ページ外リンク）　

<a>タグはURLを指定し、ページ外リンクへ遷移することが出来ます。前回記事で<a>タグの紹介を行いましたが、本項目ではリンクについて、より詳細に説明していきます。

<a>

インライン要素
終了タグ：</a>
概要：<a>タグはリンクを作成する為のタグで、<a>タグに「target」属性を指定すると、リンク先の表示方法を指定することが出来ます。ちなみに、<a>タグの「a」は、anchor（アンカー）が語源となるため、アンカーまたはアンカーリンクと呼ぶ事があり、リンク、アンカー、アンカーリンクはほぼ同義と考えて問題ありません。

target=”_self”

概要：属性値に「_self」を使用すると、現在Webブラウザで開いているページからリンク先にページが切り替わります。<a>タグにtarget属性を記述しない場合はデフォルトとして「_self」が指定されています。

target=”_blank”

概要：属性値に「_blank」を使用すると、リンク先のページが別タブで表示されます。リンク元のページは現在のウィンドウでそのまま表示されます。

target=”_top”

概要：下記の例では「Aファイル」に<iframe>タグを使って「Bファイル」を埋め込み、同様に「Bファイル」に<iframe>タグを使って「Cファイル」を埋め込んだ例です。「Cファイル」には<a>タグで囲まれた文言「リンク」が記述されています。属性値に「_top」を使用すると、リンクをクリックした際に親（Cファイルから見たBファイル）や祖先（Cファイルから見たAファイル）に関わらず、「Aファイル」がリンク先のページに切り替わります。

target=”_parent”

概要：下記は「target=”_top”」で説明した例と同じですが、属性値を「_parent」に変更しています。「Cファイル」には<a>タグで囲まれた文言「リンク」が記述されており、リンクをクリックすると、親（CファイルからみたBファイル）の<iframe>タグが解除されて、参照先のparentファイルが「Bファイル」全体に表示されます。このように属性値に「_parent」を使⽤すると、1つ上のフレームが解除されて参照先に置き換わります。

アンカーリンク（ページ内リンク）

<a>タグはURLを指定して外部リンクに画面遷移するだけでなく、ページ内の特定の位置へリンクすることも出来ます。ページ内リンクには移動したい位置（要素）に「id」属性を記述し、<a>タグの「href」属性のURLの末尾にハッシュ記号（＃）を記述する必要があります。

id属性

概要：id属性は要素を一意に識別するための属性です。属性値は任意ですが、同じページ内に同じid名を記述することは出来ません。（※下記では<p>タグを用いてid属性について説明していますが、基本的にどの要素でもid属性は使用することが出来ます。）

■記述例

<p id="status">任意のidを指定しています</p>

上記例の記述が任意のファイル「index.html」にある場合、下記のように記述することで、内部または外部ファイルから「index.html」要素内の特定位置に移動することが出来ます。

■記述例

<a href="./index.html#status">「status」に移動します</a>

また、同じファイル内で使用する場合はファイル名（index.html）は省略し、ハッシュ記号だけで要素への遷移を行うことが出来ます。

■記述例

<a href="#status">「status」に移動します</a>

ページ内リンクはid属性とハッシュ記号（＃）を組み合わせて使う必要があるので、記述例の通りに書式を覚えておきましょう。

それでは、今回はここまで〜。