月影

日々の雑感

HTMLのリンクと画像を完全攻略！ブロガー向け基礎ドリル【全40問クイズ付】

ブログ改良

 

【HTMLドリル】記事を世界と繋げる「リンク」と「画像」

文字だけの記事は少し退屈です。しかし、「リンク」と「画像」を使えば、あなたの記事は一気に華やかになり、読者にとって有益な情報源へと生まれ変わります。

今回は、Webの醍醐味であるこの2大要素の正しい使い方を、クイズ形式で楽しくマスターしましょう！

1. ハイパーリンク (aタグ) の基本

Webページ同士を繋ぐ「どこでもドア」、それが <a> タグです。行き先を指定する href 属性と、新しいタブで開く target 属性の使い分けを確認しましょう。

やってみよう！リンクの基礎クイズ（10問）

  1. ハイパーリンクを作成するためのタグは ( 　 ) です。
    答えを見る

    <a>

    （Anchorの略です。）

  2. <a> タグの「a」は何という英単語の略ですか？
    答えを見る

    Anchor (アンカー)

    （船の「錨」や「基点」という意味です。）

  3. リンク先のURL（住所）を指定するために必ず必要な属性は ( 　 ) です。
    答えを見る

    href 属性

    （Hypertext Referenceの略です。）

  4. リンクをクリックした際、新しいタブで開くようにする属性設定はどれですか？
    答えを見る

    target="_blank"

  5. 外部サイトを紹介する際に target="_blank" を使う主な理由（メリット）は何ですか？
    答えを見る

    読者の離脱を防ぐため

    （「おもてなし」として、元の記事を残しておきます。）

  6. <a>ここをクリック</a> のように、タグに挟まれた「ここをクリック」の部分は画面上でどうなりますか？
    答えを見る

    リンクテキストとして表示される

    （クリックできる文字になります。）

  7. Webページ上のあらゆる場所に繋がることができるリンクの機能を「Webの ( 　 )」と例えました。
    答えを見る

    どこでもドア

  8. href 属性の値として指定するのは、リンク先の ( 　 ) です。
    答えを見る

    URL (またはパス/住所)

  9. target="_blank" のアンダースコア ( _ ) は必要ですか？
    答えを見る

    必要

    （blank だけでは正しく動作しません。）

  10. リンクタグは、テキストだけでなく ( 　 ) を囲んでリンクにすることもできます。
    答えを見る

    画像

    （画像をクリックすると別ページに飛ぶようにできます。）

2. 絶対パスと相対パスの使い分け

リンク先の住所の書き方には、変わらない「絶対パス」と、今いる場所からの道順を示す「相対パス」があります。この2つの使い分けは、メンテナンスしやすいブログ作りの鍵です。

やってみよう！パスの書き方クイズ（10問）

  1. 「https://」から始まる、誰がどこから見ても同じ場所を指す住所の書き方を ( 　 ) パスと呼びます。
    答えを見る

    絶対パス

    （Absolute Path）

  2. 今いるページを基準にして、目的のファイルへの「道順」を示す書き方を ( 　 ) パスと呼びます。
    答えを見る

    相対パス

    （Relative Path）

  3. 「自分のブログ以外の外部サイト」へリンクを貼る場合、必ず使うのはどちらですか？
    答えを見る

    絶対パス

    （外部サイトへの道順は作れないため、完全な住所が必要です。）

  4. 「自分のブログ内の別記事（内部リンク）」を貼る場合、推奨されるのはどちらですか？
    答えを見る

    相対パス

    （ドメイン変更などの将来的な変更に強くなります。）

  5. 相対パスで、同じ階層（同じフォルダ）にあるファイル「page.html」を指定する場合の書き方は？
    答えを見る

    page.html (または ./page.html)

    （ファイル名だけでOKです。）

  6. 相対パスで、「一つ上の階層（フォルダ）」に移動することを表す記号は？
    答えを見る

    ../ (ドット・ドット・スラッシュ)

  7. 絶対パスを、現実世界の住所に例えると ( 　 ) から書く完全な住所です。
    答えを見る

    郵便番号 (または国名)

  8. 相対パスを、家の中での移動に例えると「( 　 ) へ行く」のような道案内です。
    答えを見る

    隣の部屋 (または上の階)

  9. もしブログのドメイン（例: .com → .net）が変わった時、すべての内部リンクを「絶対パス」で書いていたらどうなりますか？
    答えを見る

    すべて書き直しになる

    （相対パスなら、内部の関係性は変わらないので修正不要です。）

  10. 「外部リンクは絶対パス、内部リンクは ( 　 ) パス」。これが鉄則です。
    答えを見る

    相対

3. 画像 (img) と alt属性の重要性

画像は記事に彩りを与えますが、ただ貼れば良いわけではありません。alt 属性を使って、Googleや目の不自由な方への「思いやり」を示すことが、プロのブロガーへの第一歩です。

やってみよう！画像とalt属性クイズ（10問）

  1. 画像をページに埋め込むためのタグは ( 　 ) です。
    答えを見る

    <img>

  2. 表示したい画像ファイルの場所を指定する、必須の属性は ( 　 ) です。
    答えを見る

    src 属性

    （Sourceの略です。）

  3. 画像の内容を説明するテキストを指定する属性は ( 　 ) です。
    答えを見る

    alt 属性

    （Alternative Textの略です。）

  4. <img> タグには、終了タグ（</img>）はありますか？
    答えを見る

    ない

    （空要素なので、単独で使います。）

  5. 画像が通信エラーなどで表示されなかった時、alt 属性のテキストはどうなりますか？
    答えを見る

    画像の代わりに表示される

    （「保険」としての役割です。）

  6. 検索エンジン（Googleなど）は画像そのものを見ることはできませんが、何を読んで画像の内容を理解しますか？
    答えを見る

    alt属性のテキスト

    （SEOにおける「説明書」の役割です。）

  7. 目の不自由な方が利用する「スクリーンリーダー」は、画像の何を読み上げますか？
    答えを見る

    alt属性のテキスト

    （アクセシビリティにおける「音声ガイド」の役割です。）

  8. 良い alt テキストを書くコツは、「画像を ( 　 ) で説明するなら何と言うか？」を想像することです。
    答えを見る

    電話 (口頭)

    （具体的かつ簡潔に伝えることが大切です。）

  9. 「dog.jpg」というファイル名の画像に対して、alt="dog.jpg" と設定するのは良いことですか？
    答えを見る

    良くない

    （ファイル名ではなく、「どんな犬が何をしているか」を説明すべきです。）

  10. alt 属性を適切に設定することは、ブロガーとしての「思いやり」と ( 　 ) の証です。
    答えを見る

    プロ意識 (または信頼性)

4. コード完成クイズ：正しいのはどっち？

最後は実践編です！リンクや画像のコードを書く場面を想定して、正しい属性や値を選んでください。

やってみよう！コード穴埋めクイズ（10問）

  1. Googleへのリンクを作りたい（リンク先を指定したい）。

    <a [ ? ]="https://google.com">検索</a>

    選択肢： A. src / B. href / C. url

    答えを見る

    正解： B. href

    解説： リンク先（Reference）は href です。src は画像などに使います。

  2. トップページの画像を表示したい（画像の場所を指定したい）。

    <img [ ? ]="top.jpg" alt="トップ画像">

    選択肢： A. href / B. link / C. src

    答えを見る

    正解： C. src

    解説： 画像のソース（Source）は src です。

  3. リンクを「新しいタブ」で開きたい。

    <a href="..." target="[ ? ]">外部サイトへ</a>

    選択肢： A. _blank / B. _new / C. _tab

    答えを見る

    正解： A. _blank

    解説： 空白（blank）のウィンドウを開く、という意味です。

  4. 画像が表示されない時のための説明文を入れたい。

    <img src="cat.png" [ ? ]="眠る猫">

    選択肢： A. title / B. alt / C. text

    答えを見る

    正解： B. alt

    解説： 代替（Alternative）テキストは alt です。

  5. 絶対パスでリンクを指定しているのはどっち？

    <a href="[ ? ]">リンク</a>

    選択肢： A. https://example.com / B. ../about.html

    答えを見る

    正解： A. https://example.com

    解説： https:// から始まる完全な住所が絶対パスです。

  6. 相対パスで「一つ上の階層」にあるファイルを示したい。

    <a href="[ ? ]index.html">戻る</a>

    選択肢： A. ./ / B. ../ / C. /

    答えを見る

    正解： B. ../

    解説： ドット2つ（..）で「親フォルダ」を表します。

  7. 正しい画像タグの書き方はどっち？（終了タグに注目）

    [ ? ]

    選択肢： A. <img src="..."> / B. <img src="..."></img>

    答えを見る

    正解： A. <img src="...">

    解説： imgタグは空要素なので、終了タグ </img> は不要です。

  8. 画像の幅を300ピクセルに指定したい。

    <img src="..." [ ? ]="300">

    選択肢： A. size / B. width / C. long

    答えを見る

    正解： B. width

    解説： 幅は width、高さは height です。

  9. クリックできる画像を作りたい。正しい入れ子（サンドイッチ）の順序は？

    [ ? ]

    選択肢： A. <a><img></a> / B. <img><a></a>

    答えを見る

    正解： A. <a><img></a>

    解説： リンク（a）の中に画像（img）を入れることで、画像がクリック可能になります。

  10. 自分のブログ内の記事へのリンク（内部リンク）に適しているパスは？

    <a href="[ ? ]">次の記事</a>

    選択肢： A. page2.html (相対パス) / B. https://... (絶対パス)

    答えを見る

    正解： A. page2.html (相対パス)

    解説： 内部リンクはメンテナンス性を考慮して相対パスが推奨されます。

まとめ

全40問、お疲れ様でした！

「リンク」と「画像」は、ブログ記事を構成する上で欠かせない要素です。href と src の違いや、alt 属性の大切さ、そしてパスの使い分けを理解していれば、より使いやすく、より多くの人に届くブログを作ることができます。

実際のブログ執筆でも、これらのタグを意識して使ってみてくださいね！