【HTML】レッスン1-03：Webページにリンクや画像を挿入しよう

一つ前の章では基本的なHTMLタグについて学習しました。

今回はリンクと画像の挿入方法について見ていきましょう。

Lesson1-0：HTML/CSSの開発環境を無料で整備しよう
Lesson1-1：HTML学習の入り口｜Webページの基本構造を理解しよう
Lesson1-2：基本的なHTMLタグを理解しよう
Lesson1-3：Webページにリンクや画像を挿入しよう◁今回はココ
Lesson1-4：３種類のリストを理解しよう
Lesson1-5：テーブル（表）の基礎を理解しよう
Lesson1-6：フォームを作成しよう
Lesson1-7：セクションタグとメタタグを知ろう

Webページを作成する際、重要な役割を果たすのが「リンク」と「画像」です。

リンクは他のページや外部のリソース、または同じページ内の特定の位置へ移動するための通路となります。一方で画像はページに視覚的な魅力や情報を加えるための要素として欠かせません。

このレッスンではリンクと画像の基本的な使い方について学びます。初心者の方でもわかりやすいように、HTMLのタグの構造や使い方を例を交えながら丁寧に解説します。

この記事を通して、以下のことができるようになることを目指します。

このページの学習者の目標
  • ページ内外を結ぶリンクを作成する方法を理解する。
  • ページ内の特定の位置に移動する「アンカーリンク」を作成できる。
  • 画像を表示し、適切な配置を行う方法を学ぶ。
  • ファイル構造に基づいた相対リンクと絶対リンクの違いを理解する。
  • ダウンロードリンクを設置して、ユーザーに便利な機能を提供する。

リンクと画像を正しく使うことで、ユーザーにとって使いやすく、魅力的なWebページを作成できるようになります。

それでは、基本的なハイパーリンクの構造から始めましょう！

<<前のページ HTML/CSSの記事一覧 次のページ>>

ハイパーリンク

ハイパーリンクはWebページ同士を結びつけるための基本的なHTML要素です。

リンクをクリックすると他のページやリソースに移動したり、同じページ内の特定の位置にジャンプしたりすることができます。

ハイパーリンクの基本構造

ハイパーリンクを作成するには<a> タグを使用します。

このタグにはリンク先を指定するための href 属性が必要です。以下は基本的な構造の例です。

<a href="https://example.com">Exampleサイト</a>

このコードでは「Exampleサイト」というテキストがクリック可能なリンクとなり、クリックすると https://example.com に移動します。

例：Exampleサイト（このサイトのトップページに繋がっています）

リンクの種類

ハイパーリンクには大きく内部リンクと外部リンクの２種類があります。

内部リンク

内部リンクは同じWebサイト内の別のページに移動するためのリンクです。相対パスを使用して指定することが一般的です。

<a href="about.html">Aboutページへ</a>

このコードでは同じフォルダ内にある about.html というファイルにリンクします。

外部リンク

外部リンクは他のWebサイトへ移動するためのリンクです。絶対URLを使用して指定します。

<a href="https://example.com">外部サイトへ</a>

このコードではhttps://example.com というWebサイトに移動します。

相対リンクと絶対リンク

上記の内部リンクと外部リンクのリンク先を指定する方法は、相対リンクと絶対リンクと言い換えることもできます。

相対リンク

相対リンクは現在のファイルの位置を基準にしたパスを指定します。主に同じWebサイト内で使用されます。

htmlファイルを保存したフォルダの中に「image」というフォルダがあり、その中の「photo.jpg」というファイルにリンクする場合は以下のように表記します。

<a href="images/photo.jpg">写真を見る</a>

また、htmlファイルを保存したフォルダの上のフォルダにあるファイルにリンクする場合は、「..」を使用して以下のように表記します。

<a href="../photo.jpg">写真を見る</a>

絶対リンク

絶対リンクはURL全体を指定します。

外部リソースやWebページへのリンクに使用されます。

<a href="https://example.com/images/photo.jpg">写真を見る</a>

ハイパーリンクの注意点

  • リンクテキストはリンク先の内容を正確に表現するようにしましょう。これによりユーザーと検索エンジンにとってわかりやすいリンクになります。
  • 外部リンクを使用する場合、信頼できるサイトを指定することが重要です。

アンカーリンク

アンカーリンクはWebページ内の特定の位置に移動するためのリンクです。

長いページやセクションごとに内容を分けているページで、ユーザーが素早く目的の情報にアクセスできるようにするのに便利です。

たとえば、このページの冒頭にある「もくじ」もアンカーリンクの一種と言えます。

アンカーリンクの基本構造

アンカーリンクを作成するには、リンク先にユニークな id 属性を設定し、リンク元で href 属性を使ってその id を指定します。

  1. リンク先に id 属性を設定
    <h2 id=”section1″>セクション1</h2>
  2. リンク元で id を参照
    <a href=”#section1″>セクション1へ移動</a>

この例では「セクション1へ移動」というリンクをクリックすると、同じページ内の id="section1" を持つ要素（この場合は <h2>）にスクロールします。

例えば、このアンカーリンクはこのページの最初の<H2>タグに繋がっています。またその<h2>タグのすぐ近くにここに戻ってくるアンカーリンクを隠してありますので、探してみて下さい^^

このように、アンカーリンクは<h2>などのヘッダータグやLesson1-2で学習した<section>タグなどに任意のidを付加することで、ページ内のどこからでもそこへ移動できるようにするものです。

アンカーリンクの注意事項

  • id 属性は全て別の単語であること
    ページ内で同じ id が複数存在すると、どの要素にリンクするかが曖昧になり、正しく機能しません。
  • リンクテキストをわかりやすくする
    ユーザーがリンク先を理解できるよう、リンクテキストは具体的かつ適切な内容にすることが大切です。
  • ブラウザの動作を確認する
    アンカーリンクはJavaScriptやCSSの影響を受けることがあります。動作を確認し、正しく機能するようにしましょう。

ダウンロードリンク

ダウンロードリンクはユーザーがファイルを簡単にダウンロードできるようにするためのリンクです。

HTMLでは<a> タグに download 属性を追加することで簡単に実現できます。

この機能はPDFや画像ファイル、ZIPファイルなどを提供したい場合に非常に便利です。

ダウンロードリンクの基本構造

ダウンロードリンクは以下のように作成します。

<a href="document.pdf" download>PDFをダウンロード</a>

このコードでは「PDFをダウンロード」というテキストがリンクとなり、document.pdf というファイルをダウンロードできるようになります。

  • href 属性でダウンロードするファイルのパス（保存場所の相対リンク）を指定します。
  • download 属性を追加することで、ブラウザはそのファイルを直接開かずにダウンロードするようになります。

ダウンロードリンクの注意事項

  1. ファイル形式を確認する
    • 一部のファイル形式（例: HTMLファイル）は、download 属性を指定してもブラウザで表示されることがあります。ダウンロードさせたい場合はファイルをZIP形式に圧縮することを検討してください。
  2. ブラウザの動作
    • download 属性はHTML5対応のブラウザでのみ動作します。非常に古いブラウザでは無効となる可能性があります。
  3. セキュリティに注意
    • ダウンロードリンクで提供するファイルは、安全で信頼できるものであることを確認してください。ユーザーに危害を与えるようなファイルを提供すると、信頼を損なうだけでなく法的な問題にもつながります。

画像の表示とサイズ指定

Webページに画像を表示することで、情報を視覚的に伝えたり、デザインを豊かにすることができます。

HTMLでは<img> タグを使用して画像を表示します。

また、この記事ではまだ紹介しませんが、CSSを使うことで配置を調整することも可能です。（CSSの学習はLesson２にて）

画像の基本構造

画像を表示するには<img> タグを使います。このタグは単独で使用され閉じタグは必要ありません。

画像のソース（ファイルパス）を指定するために src 属性を使用し、代替テキストを指定するために alt 属性を使用します。

<img src="example.jpg" alt="サンプル画像">
  • src: 表示する画像ファイルのパス（保存場所の相対リンク）を指定します。
  • alt: 画像が表示されない場合に代わりに表示されるテキストを指定します（アクセシビリティの向上に重要）。

画像のサイズ指定

画像の幅と高さを指定するにはwidth 属性と height 属性を使用します。これにより画像の表示サイズを簡単に制御できます。

<img src="example.jpg" alt="サンプル画像" width="300" height="200">

このコードでは画像の幅が300ピクセル、高さが200ピクセルに設定されます。

属性でサイズを指定する際、元の画像のアスペクト比が保たれるように注意してください。比率が崩れると画像が歪んでしまいます。

画像のファイル形式

Webページに使用される主な画像形式には、以下のようなものがあります。

  • JPEG (JPG): 写真や多色画像に適しており、圧縮率が高い。
  • PNG: 背景が透明な画像や、品質を損ないたくない画像に適している。
  • GIF: 簡単なアニメーションや低解像度画像に使用される。

CSSの役割を簡単に紹介

画像の詳細な配置やデザインの調整はCSSを使うことでさらに自由度が増します。

例えばボーダーを追加したり、画像をホバリング時に拡大表示するなどの効果を実現できます。

CSSの詳細はLesson２の「CSSの基本編」で詳細に学習します。

まとめ

このレッスンではWebページを作成するうえで重要な「リンク」と「画像」の基本について学びました。

リンクはWebページ間をつなぎ、画像はページの視覚的な魅力を高める要素です。具体的には、以下の内容をカバーしました。

学んだことの振り返り

  1. ハイパーリンクの基本
    • <a> タグを使用してリンクを作成する方法。
    • 内部リンク、外部リンク、相対リンクと絶対リンクの違い。
    • href 属性を正しく設定する重要性。
  2. アンカーリンク
    • 同じページ内の特定の位置に移動するリンクを作成する方法。
    • id 属性の使用とリンク元での href 指定。
  3. ダウンロードリンク
    • download 属性を使用して、ファイルを直接ダウンロードできるリンクの作成。
    • ファイル形式やファイル名の変更の方法。
  4. 画像の表示と配置
    • <img> タグを使用した画像の基本的な表示方法。
    • src や alt 属性の役割。
    • 幅と高さの指定、画像形式（JPEG、PNG、GIF）の選び方。

リンクと画像はHTMLの中でも非常に重要で、基本的ながら奥深い分野です。

これらの知識を活用することで、情報を適切に伝え、ユーザーにとって使いやすく魅力的なWebページを作成する第一歩を踏み出せます。

HTMLの基本を一つずつ理解しながら、自分のWebページにリンクと画像を活用してみてください。

この経験を通じて、HTMLの面白さと可能性を実感できるはずです。

練習問題1-3：リンクと画像挿入を使いこなそう

VSCで「Lesson1-3-1.html」と「Lesson1-3-2.html」の２つのファイルを作って保存してください。

それらのファイルにあなたのことを書いたページのhtmlコードを書き、ブラウザに表示させましょう。

ただし、Lesson1-3-1.htmlの内容は以下の条件に従うこと。

  • 3つの<h2>タグ「自己紹介」「HTMLを勉強する理由」「HTMLの学習状況」を設置すること。
  • 最初の<h2>タグの前に目次をいれ、アンカーリンクを設置すること。
  • 自己紹介の中であなたの顔写真を搭載すること。もしくはこのダウンロードリンクの画像を使用すること。
  • Lesson1-3-1.htmlが入っているフォルダの中に「image」というフォルダを作り、あなたの顔写真はそこに保存すること。
  • 「HTMLを勉強する理由」の部分に内部リンクを設置しLesson1-3-2.htmlへ移動できるようにすること。
  • 「HTMLの学習状況」の部分にこのページへの外部リンクを挿入すること。

Lesson1-3-2.htmlの内容は以下の条件に従うこと。

  • 「HTMLを勉強する理由」の詳細を書くこと。
  • Lesson1-3-1.htmlへ戻る内部リンクを設置すること。

初めてのWebサイトを作ろう1-3

このサイトのLesson1-1からLesson3-9まで順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「HTML/CSSの情報まとめ」

この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。

Lesson1-3の学習内容をまとめよう

VSCを使ってlesson1フォルダの中に「MyWebsite1-3.html」というファイルを作ってください。

また、以下のリンクをクリックし、画像セットをダウンロードして中身をimageフォルダに保存してください。

Lesson1-3-image.zip

その後、MyWebsite1-3.htmlにこのLesson1-3で学習した内容をまとめてみましょう。

自分で記事を見直してまとめることを推奨しますが、模範解答も用意しましたので必要な方はこちらを活用して下さい。

また今回からリンクを張ることが可能となりましたので、トップページやLesson1-1/1-2で作成したページなどともリンクで繋ぎましょう。

模範解答（ブラウザ表示）

Lesson1-3：リンクと画像（h1タグ）

１．ハイパーリンク（h2タグ）

リンクの基本タグ：<a>

href属性：リンク先のURLを指定。

例：<a href=”https://example.com”>Exampleサイト</a>

1-1.内部リンク（h3タグ）

相対リンク：サイト内のファイルに対するパスを記述。

例：<a href=”/about.html”>相対リンク</a>

1-2.外部リング（h3タグ）

絶対リンク：完全なURLを記述。

例：<a href=”https://example.com/page”>絶対リンク</a>

２．アンカーリンク（h2タグ）

id属性：リンクの識別用。

例：<h2 id=”section1″>。

リンク元でidを参照：<a href=”#section1″>アンカーリンク</a>。

３．ダウンロードリンク（h2タグ）

download属性：ファイルを直接ダウンロード可能。

例：<a href=”file.pdf” download>ファイルをダウンロード</a>

４．画像の表示とサイズ指定（h2タグ）

画像の表示タグ：<img>

例：<img src=”image.jpg” alt=”説明文”>

src属性：画像のファイルパスを指定。

alt属性：画像の代替テキスト（アクセシビリティ向上）。

例：<img src=”example.jpg” alt=”サンプル画像”>

width属性：画像の横幅を指定。

height属性：画像の高さを指定。

例：（img src=”example.jpg” alt=”サンプル画像” width=”300″ height=”200″）

５．注意点（h2タグ）

画像のalt属性は必ず設定し、SEOやアクセシビリティを考慮。

相対リンクを使用する際は、ファイルの階層構造に注意。

画像のサイズを適切に設定し、ページの表示速度を最適化。

トップページへ戻る

模範解答（htmlコード）
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Lesson1-3：リンクと画像</title>
</head>
<body>
    <h1>Lesson1-3：リンクと画像</h1>
    <img src="../image/Lesson1-3 Webページにリンクや画像を挿入しよう.jpg" alt="Lesson1-3 Webページにリンクや画像を挿入しよう">

    <h2>１．ハイパーリンク</h2>
    <p>リンクの基本タグ：&lt;a&gt;</p>
    <p>href属性：リンク先のURLを指定。</p>
    <p>例：&lt;a href="https://example.com"&gt;Exampleサイト&lt;/a&gt;</p>
        <h3>1-1.内部リンク</h3>
        <p>相対リンク：サイト内のファイルに対するパスを記述。</p>
        <p>例：&lt;a href="/about.html">相対リンク&lt;/a></p>
        <h3>1-2.外部リング</h3>
        <p>絶対リンク：完全なURLを記述。</p>
        <p>例：&lt;a href="https://example.com/page">絶対リンク&lt;/a></p>

    <h2>２．アンカーリンク</h2>
    <p>id属性：リンクの識別用。</p>
    <p>例：&lt;h2 id="section1">。</p>
    <p>リンク元でidを参照：&lt;a href="#section1">アンカーリンク&lt;/a>。</p>

    <h2>３．ダウンロードリンク</h2>
    <p>download属性：ファイルを直接ダウンロード可能。</p>
    <p>例：&lt;a href="file.pdf" download>ファイルをダウンロード&lt;/a></p>

    <h2>４．画像の表示とサイズ指定</h2>
    <p>画像の表示タグ：&lt;img></p>
    <p>例：&lt;img src="image.jpg" alt="説明文"></p>
    <p>src属性：画像のファイルパスを指定。</p>
    <p>alt属性：画像の代替テキスト（アクセシビリティ向上）。</p>
    <p>例：&lt;img src="example.jpg" alt="サンプル画像"></p>
    <img src="../image/Lesson1-3 Webページにリンクや画像を挿入しよう.jpg" alt="Lesson1-3 Webページにリンクや画像を挿入しよう">
    <img src="存在しない画像.jpg" alt="存在しない画像">
    <p>width属性：画像の横幅を指定。</p>
    <p>height属性：画像の高さを指定。</p>
    <p>例：（img src="example.jpg" alt="サンプル画像" width="300" height="200"）</p>
    <img src="../image/Lesson1-3 Webページにリンクや画像を挿入しよう.jpg" alt="Lesson1-3 Webページにリンクや画像を挿入しよう" width="300" height="181">
    <img src="../image/Lesson1-3 Webページにリンクや画像を挿入しよう.jpg" alt="Lesson1-3 Webページにリンクや画像を挿入しよう" width="220" height="133">
    <img src="../image/Lesson1-3 Webページにリンクや画像を挿入しよう.jpg" alt="Lesson1-3 Webページにリンクや画像を挿入しよう" width="140" height="85">

    <h2>５．注意点</h2>
    <p>画像のalt属性は必ず設定し、SEOやアクセシビリティを考慮。</p>
    <p>相対リンクを使用する際は、ファイルの階層構造に注意。</p>
    <p>画像のサイズを適切に設定し、ページの表示速度を最適化。</p>

    <p>トップページへ<a href="../MyWebSite.html">戻る</a></p>
</body>
</html>

このコードをコピーしてMyWebsite1-3.htmlに張り付けてください。

まとめ

お疲れさまでした！

今回の問題に挑戦して、新たな知識やスキルを身につけることができたかと思います。

この調子でさらに理解を深めるために次のレッスンにもチャレンジしてみましょう。

継続は力なり。少しずつステップアップしていきましょう！

<<前のページ HTML/CSSの記事一覧 次のページ>>

この記事への質問・コメント

この記事を作成するにあたりAIの力を借りています。

問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。






    HTML/CSSのテキスト＆問題集トップへ戻る
    トップページへ戻る