HTML/CSS：リンクと画像
1学習の目的
- リンクでページ同士をつなげるようになる。Webが「Web（クモの巣）」と呼ばれる理由そのものである、この仕組みを理解する。
- 画像を正しく表示できるようになる。alt属性の重要性を理解し、目の見えない人にも伝わるページが作れるようになる。
2基礎解説
| やりたいこと | 書き方 | 備考 |
|---|---|---|
| リンクを作る | <a href="URL">文字</a> | href が行き先 |
| 画像を載せる | <img src="画像.jpg" alt="説明"> | 閉じタグ不要 |
| 別タブで開く | target="_blank" rel="noopener" | 外部サイト向け |
| ページ内リンク | href="#id名" | 同じページ内へ移動 |
- a は anchor（錨）の略。href に行き先を書く。同じフォルダのファイルなら href="about.html"、外部サイトなら https:// から書く。
- img の alt は必須。画像が表示できないときに代わりに出る文字であり、目の見えない人が読み上げソフトで聞く文章でもある。省略してはいけない。
- 別タブで開くなら rel="noopener" も一緒に書く。これが無いと、リンク先のページから元のページを操作できてしまう安全上の問題がある。
- ページ内リンクは # と id の組み合わせ。href="#price" と id="price" が対応し、その位置までスクロールする。
- メールや電話にもリンクできる。href="mailto:…" でメール作成画面が、href="tel:…" でスマホなら発信画面が開く。
現場使用例：ナビゲーションメニュー、商品画像、外部サイトへの参照、目次から本文へのジャンプ、問い合わせ先の電話番号。
<!-- 同じフォルダの別ページへ --> <a href="about.html">会社概要</a> <!-- 外部サイトへ（別タブで開く） --> <a href="https://example.com" target="_blank" rel="noopener"> 公式サイト </a> <!-- 画像（alt は必ず書く） --> <img src="photo.jpg" alt="店内の様子" width="600"> <!-- 画像に説明を付ける --> <figure> <img src="menu.jpg" alt="人気のパンケーキ"> <figcaption>当店一番人気のパンケーキ</figcaption> </figure> <!-- ページ内リンク --> <a href="#price">料金を見る</a> ... <h2 id="price">料金</h2> <!-- メール・電話 --> <a href="mailto:info@example.com">お問い合わせ</a> <a href="tel:0312345678">03-1234-5678</a> <!-- 画像をリンクにする --> <a href="product.html"> <img src="thumb.jpg" alt="商品の写真"> </a>
3基本ドリル（10問）
a の href と中身が正しい
<a href="URL">文字</a> の形。
<a href="https://example.com">公式サイト</a>
href が行き先、タグで囲んだ文字がクリックできる部分。リンクは既定で青色＋下線になる。
A. 画像の大きさ B. 画像が表示できないときの代替文字・読み上げ用の説明 C. 画像の場所 D. 装飾 選択★☆☆無料
解答 == B
alternative（代替）の略。
B
alt は目の見えない人にとっての「画像そのもの」。読み上げソフトはこの文字を読む。省略すると情報が伝わらない。
img の src と alt が正しい
<img src="…" alt="…"> と書く。閉じタグは不要。
<img src="photo.jpg" alt="店内の様子">
img は閉じタグを書かない。src で画像の場所を、alt で内容の説明を指定する。
<a ____="contact.html">お問い合わせ</a>
href が contact.html
hypertext reference の略。4文字。
href
href が無いとリンクとして機能しない。クリックしても何も起きない、ただの文字になってしまう。
A. rel="noopener" B. class="link" C. id="external" D. 何も要らない 選択★☆☆無料
解答 == A
安全上の理由で推奨されている属性。
A
これが無いと、リンク先から元のページを操作できてしまうという脆弱性がある。外部リンクには必ず付ける習慣を持つ。
target と rel が正しい
target="_blank" と rel="noopener" の両方を書く。
<a href="https://example.com" target="_blank" rel="noopener">詳細はこちら</a>
外部リンクの標準形。自サイト内のリンクは同じタブで開き、外部サイトは別タブで開くのが一般的な使い分け。
<a href="#price">料金へ</a> <h2 ____="price">料金</h2>
h2 の id が price
要素に固有の名前を付ける属性。2文字。
id
href の # とid名が対応する。href="#price" なら id="price" の位置へ移動する。
A. href="https://about.html" B. href="about.html" C. href="/about" D. href="about" 選択★★☆広告解放
解答 == B
同じ場所にあるファイルは、ファイル名だけで指定できる。
B
同じフォルダならファイル名だけでよい。これを相対パスと呼ぶ。https:// から書くのは外部サイトの場合。
figure内のimgとfigcaptionが正しい
<figure> の中に img と figcaption を入れる。
<figure> <img src="menu.jpg" alt="パンケーキ"> <figcaption>当店一番人気</figcaption> </figure>
figure は「図表」を表すタグ。画像と説明文をひとまとまりとして扱えるので、単に img と p を並べるより意味が明確になる。
mailto と tel のリンクが正しい
href="mailto:…" と href="tel:…" を使う。tel はハイフンを除いて書く。
<a href="mailto:info@example.com">お問い合わせ</a> <a href="tel:0312345678">03-1234-5678</a>
スマホで tel リンクをタップすると発信画面が開く。店舗サイトでは必須の機能で、電話番号をただの文字にしておくのは機会損失になる。
4実践シナリオ（5問）
a が3個、それぞれの href が正しい
同じフォルダのファイルなのでファイル名だけでよい。
<a href="index.html">ホーム</a> <a href="service.html">サービス</a> <a href="contact.html">お問い合わせ</a>
これがナビゲーションメニューの中身。実際には nav タグで囲み（HT05）、CSSで横並びにする（HT13）。
a の中に img がある
a タグで img を囲む。画像全体がクリックできるようになる。
<a href="detail.html"> <img src="product.jpg" alt="ノートPC"> </a>
a は文字だけでなく画像も囲める。ECサイトの商品一覧では、この形が標準になっている。
a が2個、h2 の id が正しい
href="#price" と id="price" を対応させる。
<a href="#price">料金へ</a> <a href="#access">アクセスへ</a> <h2 id="price">料金</h2> <p>基本プラン 月額5,000円</p> <h2 id="access">アクセス</h2> <p>東京都渋谷区1-2-3</p>
長いページでは目次が有効。クリックすると該当箇所までスクロールするので、読者が探す手間が省ける。
h3・img・p・a がそれぞれ正しい
見出し→画像→価格→リンク の順に並べる。
<h3>ノートPC</h3> <img src="pc.jpg" alt="ノートPCの外観"> <p>128,000円</p> <a href="pc.html">詳しく見る</a>
商品カードの最小構成。実際にはこれを div や article で囲み（HT05）、CSSで枠線や余白を付ける（HT11）。
1つ目は target なし、2つ目は target と rel あり
内部リンクには target を付けない。
<a href="about.html">会社概要</a> <a href="https://example.com" target="_blank" rel="noopener">参考サイト</a>
自サイト内は同じタブ、外部は別タブ——これが一般的な使い分け。すべて別タブにするとタブが増えすぎて使いにくくなる。
5仕上げ課題
body の内容（この順序で）
① h1：ゼロカラカフェ
② ページ内リンク2つ：メニューへ（#menu）、アクセスへ（#access）
③ 画像：shop.jpg（alt：店内の様子）
④ h2：メニュー（id="menu"）
⑤ figure：画像 cake.jpg（alt：季節のケーキ）＋ figcaption 季節限定のケーキ
⑥ h2：アクセス（id="access"）
⑦ 段落：電話リンク 03-1234-5678（tel:0312345678）
⑧ 段落：外部リンク 地図を見る（https://example.com/map、別タブ・安全な形で）
要素の数：h1×1、h2×2、img×2、a×4、figure×1、figcaption×1 総合★★★広告解放
すべての要素・属性が一致
ページ内リンクは href="#menu" と id="menu" を対応させる。外部リンクには target="_blank" rel="noopener" を両方付ける。a は②で2つ、⑦⑧で1つずつの計4つ。
<h1>ゼロカラカフェ</h1> <a href="#menu">メニューへ</a> <a href="#access">アクセスへ</a> <img src="shop.jpg" alt="店内の様子"> <h2 id="menu">メニュー</h2> <figure> <img src="cake.jpg" alt="季節のケーキ"> <figcaption>季節限定のケーキ</figcaption> </figure> <h2 id="access">アクセス</h2> <p><a href="tel:0312345678">03-1234-5678</a></p> <p><a href="https://example.com/map" target="_blank" rel="noopener">地図を見る</a></p>
4種類のリンクが1ページに揃った。ページ内リンク（#menu）、電話リンク（tel:）、外部リンク（別タブ）——それぞれ行き先の性質が違い、書き方も変わる。「リンク」と一口に言っても、用途に応じた書き分けが必要だ。
alt="店内の様子" と alt="季節のケーキ" にも注目してほしい。もしこれを alt="画像" や alt="" と書いたら、目の見えない人にとってこのページは「見出しと電話番号だけのページ」になる。altは装飾ではなく、情報そのものだ。
外部リンクの rel="noopener" も忘れてはいけない。これが無いと、リンク先のページがJavaScriptで元のページを操作できてしまう。「別タブで開く」と決めた瞬間に、セットで書くと覚えておく。
次章ではリストと表を学ぶ。箇条書きと表組みが使えるようになると、情報の整理がぐっと楽になる。