リンクは、異なるWebサイト間、または同じサイト内の異なるページ間で移動するための手段です。
今回はリンクの貼り方と画像の挿入の仕方について学習します。また、初学者が躓きがちな絶対パス・相対パスの書き方についても解説しています。
他のHTML関連記事はこちらからご覧ください
パスの書き方
HTMLでリンクや画像の挿入を行うためには、まず初めに「パス」を理解しなければいけません。パスとは、ファイルやフォルダの場所を示す文字列で、書き方が2種類あります。まずは、パスの記述に必要な用語を覚えてから書き方を学習します。
ルートディレクトリ
ルートディレクトリは、言い換えると「一番上のディレクトリ（フォルダ）」です。Webサイトを作成するとき、ページを複数作成しますが、そのファイルはフォルダにまとめて保存しますね。その、Webサイトに関わるファイルを全てまとめたフォルダがルートディレクトリです。下の画像ではWeb_01フォルダがルートディレクトリです。
この形で見ると、ルートディレクトリが一番上のディレクトリという意味が分かりますね。
絶対パス
1つ目のパスの書き方が絶対パスです。考え方は簡単で、ルートディレクトリからそのファイルの位置までの道のりをたどっていけば見出すことができます。
ルートディレクトリ内のフォルダ・ファイル構成をツリー構造で見て考えます。例えば、「ルートディレクトリからindex.ntmlまでのパスを絶対パスで書く」としたらこのルートを文字列で表せばOKです。
パスを書く際には、
・ルートディレクトリは「/」で表します。
・フォルダやファイルの各区切りを「/」で表します。
それを踏まえて書くとこのようになります。
/html/index.html
カレントディレクトリ
カレントディレクトリは言い換えると現在自分が作業しているファイルがあるディレクトリです。例えば、自分が作業しているファイルがindex.htmlだった場合、カレントディレクトリはhtmlです。
相対パス
2つ目のパスの書き方が相対パスです。考え方は、カレントディレクトリからそのファイルの位置までの道のりです。
ルートディレクトリ内のフォルダ・ファイル構成をツリー構造で見て考えます。例えば現在index.htmlを自分が編集しているとしましょう。そこから「カレントディレクトリから hoge.jpeg までのパスを相対パスで書く」としたらこのルートを文字列で表せばOKです。
パスを書く際には、
・カレントディレクトリを「./」で表します（省略可）
・1階層上のディレクトリを「../」で表します
・フォルダやファイルの各区切りを「/」で表します
それを踏まえて書くとこのようになります。
../img/hoge.jpeg
リンクタグ（aタグ）
リンクを設定する場合には <a></a>（エータグ）を使用します。開始タグと終了タグの間に記入したテキストや画像をクリックすることで、指定したリンク先に移動することができます。
href属性
リンク先の指定はhref属性（エイチレフ属性）で行います。属性なので、必ず開始タグの中に記述します。これを忘れると、普段見るリンクのように「青文字＋下線」の見た目にならず、押下しても他のページに飛びません。
<a href="リンク先">aタグの中</a>に入れた文字や画像がリンクになります【実行結果】
外部サイトにリンクする
外部サイトへリンクを貼る場合は、リンク先に指定したいページのURLをそのままhref属性の中に記述します。手順は以下の通りです。
①リンク先に指定したいwebページのURLをコピーする
②href属性内に①でコピーしたリンクを張り付ける
<a href="https://google.co.jp"></a>③リンクにしたい文字を書き込む
今すぐ<a href="https://google.co.jp">Google</a>で検索！上記のコードをブラウザで開くと以下の通り表示され、リンクになっている青文字部分を押下するとhref属性で指定した「https://google.co.jp」にページが移動します。
同サイト内部にリンクする
同サイト内部にリンクする際は、絶対パスか相対パス、どちらかを使用してhref属性にリンク先のファイルまでのパスを記述します。
<a href="home.html">homeページへ移動</a>画像タグ（imgタグ）
画像を挿入する場合には <img>（イメージタグ）を使用します。開始タグのみで構成されたタグです。必要な属性は以下の2つです。
href属性とalt属性
どの画像を挿入するかはsrc属性（エイチレフ属性）で行います。この属性は必ず書く必要があります。属性値には、画像のパスを記述します。相対パスでも絶対パスでもOKです。画像にはさまざまな拡張子があるので間違わないよう気を付けましょう。
画像に対しての説明をalt属性（オルト属性）で行います。これは、視覚障がい者がwebサイトの音声読み上げ機能を使用した際や、検索エンジンのクローラーがwebサイトを読み込む際に使用されます。必須ではないですが、特別な理由がない場合は記述するように心がけましょう。「誰にでもわかりやすい」はwebサイトの大事な要素です。
<img src="../img/sample.jpg" alt="HTMLのイメージ画像">【実行結果】
もし、パスが間違っていたり、通信環境の悪さで画像が読み込めなかった場合はalt属性の属性値が表示されます。
【表示例】
画像の種類について
画像には「jpg」や「png」「gif」などいろいろな種類があります。一番なじみがあるのは「jpg」画像だと思いますが、「jpg」画像は非可逆圧縮と呼ばれる方法で圧縮されており、呼び出すたびに少しずつ画像が劣化していきます。
そのため、たくさん人が集まることが予想されるWebサイトの顔となるメイン画像を「jpg」画像にすることはお勧めできません。「png」などの劣化することのない画像を使用することを心がけてください。
画像にリンクを付ける
リンクと画像を組み合わせることで、画像をリンクにすることも設定することも可能です。記述は、aタグの開始タグと終了タグの間にimgタグを使用して画像を挿入するだけです。
<p>画像を押下するとリンク先へ移動します</p>
<a href="https://google.co.jp"><img src="img/sample.jpeg" alt="HTMLイメージ画像"></a>上記のコードをブラウザで表示すると以下のようになり、画像をクリックすることで設定したリンク先へと移動することができます。
ポイントのまとめ
リンクや画像はHTML自体の難易度は高くないものの、パスの書き方に慣れないうちは難しいと感じる方も多いです。ポイントのおさらいをしておきましょう。
| 起点 | 起点の記述方法 | その他の記号 | |
| 絶対パス | ルートディレクトリ | / | |
| 相対パス | カレントディレクトリ | ./（省略可） | ../（1つ上のディレクトリ） |
こうして表にしてみると覚える項目は意外と少ないです。パスはHTMLだけでなく他の言語でも様々な場面で使用します。何度も書いて記述に慣れていきましょう。
他のHTML関連記事はこちらからご覧ください
コメント