結論: リンクは a、画像は img。「行き先」と「ファイル名」を書くだけ

POINTリンク＝<a href="行き先">文字</a>、画像＝<img src="ファイル名" alt="説明文">。覚えるのはこの2つの形だけ。

前回作ったページは、見出し・段落・箇条書きだけの「文字のページ」でした。そこに今回足すのは、リンクと画像の2つです。リンクはページとページをつなぐ糸で、これがあるからHTMLで作ったページのつながり全体を「くもの巣＝Web」と呼びます。画像は、同じフォルダに入れたファイルの名前を書くだけで表示できます。

どちらも「どこにあるか」を書くという点は同じです。リンクは行き先のアドレス（URL）、画像はファイルの名前。この考え方がつかめると、あとは形を覚えるだけになります。

今日のコードと猫の画像（コピーして使えます）

動画の最後にできあがったコードです。右上の「コードをコピー」ボタンを押すと全文がクリップボードに入ります。前回のコードに、リンク1行と、リンク付きの画像を足した形です。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのページ</title>
</head>
<body>
  <h1>はじめてのページ</h1>
  <h2>自己紹介</h2>
  <p>IT業界をやさしく案内します。</p>
  <p>これは1行目。<br>
  これは2行目。</p>
  <ol>
    <li>開発の流れ</li>
    <li>職種図鑑</li>
    <li>用語集</li>
    <li>学び方</li>
  </ol>
  <a href="https://it-nyumon.com/">サイトへ</a>
  <a href="https://it-nyumon.com/">
    <img src="neko.png" alt="ねこ" width="200">
  </a>
</body>
</html>
座っている灰色のしま猫のイラスト

猫の画像（neko.png）は、動画で使ったものと同じです。ダウンロードして、index.html と同じフォルダに入れてください。ファイル名は neko.png のままにします。

neko.png をダウンロード

試し方は前回と同じです。コードをメモ帳に貼って index.html という名前で保存し、猫の画像を同じフォルダに置いて、index.html をダブルクリックすると、リンク付きの猫が表示されます。保存のコツ（ファイルの種類・文字コード）は第1回の「試し方」を見てください。

POINTa は「アンカー（いかり）」の頭文字。href（行き先）に https:// から全部書いたアドレスを入れ、押してほしい文字を挟む。
<a href="https://it-nyumon.com/">サイトへ</a> 行き先（https://から全部） 画面に出る文字 閉じる
a タグの形。href が「行き先」、挟んだ文字が「押せる文字」になる。

リンクを入れると、ブラウザはその文字を青くして下線を引きます。「ここは押せる」という合図です。押すと href に書いた行き先へ移動します。行き先はほかのサイトでも、自分で作った別のページでもかまいません。

アドレスは https:// から全部書くのがコツです。https を省いて it-nyumon.com とだけ書くと、ブラウザは「同じフォルダにあるファイル」を探しに行ってしまい、見つからずにエラーになります。

ちなみに href は「ハイパーテキスト・リファレンス（参照先）」の略ですが、覚えなくて大丈夫です。行き先と思っておけば十分です。

画像 img タグ: src にファイル名、alt に説明文

POINT画像ファイルを index.html と同じフォルダに置き、src にファイル名を書く。img は閉じタグがいらない。
  • src: 画像ファイルの名前。neko.png のように、拡張子まで正確に書きます。同じフォルダにあるものはファイル名だけで指定できます。
  • alt: 画像の説明文。画像が表示できないときに代わりに出るほか、目の不自由な人が読み上げソフトを使うときにも読まれます。必ず書く癖をつけましょう。
  • width: 表示する幅。数字はピクセル（画面の点の数）です。width="200" なら幅200ピクセルで、高さは自動で合わせてくれます。

動画では、わざとファイル名を neco.png と打ち間違えてみました。すると猫は消え、壊れた画像のマークと alt に書いた「ねこ」の文字が表示されます。これが「画像が見つからない」のサインです。名前を直せば元に戻ります。

他人の画像を勝手に使ってはいけません。ネットで見つけた画像には作った人の権利（著作権）があります。自分で撮った写真や、利用ルールで許可されている素材を使いましょう。この記事の猫は「いらすとや」の素材です。

合わせ技: 画像をリンクにする

<img> を <a> と </a> で挟むと、画像そのものがリンクになります。猫を押すとサイトへ飛ぶ、という動きです。バナー広告や、ロゴを押すとトップページに戻る仕組みは、だいたいこの作りです。

画像をリンクにする部分だけ
<a href="https://it-nyumon.com/">
  <img src="neko.png" alt="ねこ" width="200">
</a>

タグは入れ子（タグの中にタグ）にできます。外側の a が「押したらどこへ行くか」、内側の img が「何を表示するか」を担当している、と読むとわかりやすいです。

よくあるつまずき: 画像が出ない・リンクが飛ばない

  • 画像が出ない → src のファイル名と実際のファイル名が違う（大文字小文字・拡張子まで確認）、または画像が index.html と同じフォルダにない。
  • リンクを押してもエラー → href のアドレスが https:// から始まっていない。
  • 画像が大きすぎて画面からはみ出す → width="200" のように幅を指定する。
  • 画像の周りの文字がくっつく → img を <p> で挟むか、前後に <br> を入れる。見た目の整え方は次回の CSS で本格的にやります。

よくある質問

画像が表示されず、代わりに文字や壊れたマークが出ます。

src に書いたファイル名と、実際のファイル名が一致していないか、画像ファイルが index.html と同じフォルダに入っていないのが原因です。大文字と小文字、拡張子（.png と .jpg など）まで同じか確認してください。代わりに出ている文字は alt に書いた説明文です。

リンクを押しても飛びません。

href に書くアドレスは https:// から全部書きます。it-nyumon.com のように省略すると、同じフォルダにあるファイルを探しに行ってしまい、見つからずにエラーになります。

リンクを新しいタブで開くには？

a タグに target="_blank" を足します。例: <a href="https://it-nyumon.com/" target="_blank">サイトへ</a>。外部サイトへのリンクでよく使われる書き方です。

自分で作った別のページにリンクするには？

同じフォルダに about.html などの別ファイルを作り、href="about.html" のようにファイル名だけを書きます。画像の src と同じ考え方で、同じフォルダにあるものはファイル名だけで指定できます。