一つ前の章では基本的な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でリンクを作成する方法を学ぼう
ハイパーリンクはWebページ同士を結びつけるための基本的なHTML要素です。
リンクをクリックすると他のページやリソースに移動したり、同じページ内の特定の位置にジャンプしたりすることができます。
ハイパーリンクの基本構造と<a>タグの使い方
ハイパーリンクを作成するには <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>
リンク作成時の注意点
- リンクテキストはリンク先の内容を正確に表現するようにしましょう。これによりユーザーと検索エンジンにとってわかりやすいリンクになります。
- 外部リンクを使用する場合、信頼できるサイトを指定することが重要です。
HTMLでアンカーリンクを作成しよう
アンカーリンクはWebページ内の特定の位置に移動するためのリンクです。
長いページやセクションごとに内容を分けているページで、ユーザーが素早く目的の情報にアクセスできるようにするのに便利です。
たとえば、このページの冒頭にある「もくじ」もアンカーリンクの一種と言えます。
ページ内ジャンプを実現するアンカーリンクの基本
アンカーリンクを作成するには、リンク先にユニークな id 属性を設定し、リンク元で href 属性を使ってその id を指定します。
例えば、特定の<h2>タグにidを付け、別の場所からそこへリンクすることができます。
- <h2>タグに「section1」という名前の
id属性を設定
<h2 id=”section1″>セクション1</h2> - リンク元で
idを参照
<a href=”#section1″>セクション1へ移動</a>
この例では「セクション1へ移動」というリンクをクリックすると、同じページ内の id="section1" を持つ要素（この場合は <h2>）にスクロールします。
idの名前は何でも任意に決めることができます。
例えば、このアンカーリンクはこのページの最初の<H2>タグに繋がっています。またその<h2>タグのすぐ近くにここに戻ってくるアンカーリンクを隠してありますので、探してみて下さい^^
このように、アンカーリンクは<h2>タグなどに任意のidを付加することで、ページ内のどこからでもそこへ移動できるようにするものです。
アンカーリンクを使う際の注意点
id属性は全て別の単語であること
ページ内で同じidが複数存在すると、どの要素にリンクするかが曖昧になり、正しく機能しません。- リンクテキストをわかりやすくする
ユーザーがリンク先を理解できるよう、リンクテキストは具体的かつ適切な内容にすることが大切です。 - ブラウザの動作を確認する
アンカーリンクはJavaScriptやCSSの影響を受けることがあります。動作を確認し、正しく機能するようにしましょう。
ダウンロードリンクの作成方法
ダウンロードリンクはユーザーがファイルを簡単にダウンロードできるようにするためのリンクです。
HTMLでは<a> タグに download 属性を追加することで簡単に実現できます。
この機能はPDFや画像ファイル、ZIPファイルなどを提供したい場合に非常に便利です。
ダウンロードリンクを作るdownload属性の使い方
ダウンロードリンクは以下のように作成します。
<a href="document.pdf" download>PDFをダウンロード</a>
このコードでは「PDFをダウンロード」というテキストがリンクとなり、document.pdf というファイルをダウンロードできるようになります。
href属性でダウンロードするファイルのパス（保存場所の相対リンク）を指定します。download属性を追加することで、ブラウザはそのファイルを直接開かずにダウンロードするようになります。
ダウンロードリンクの注意事項
- ファイル形式を確認する
一部のファイル形式（例: HTMLファイル）は、download属性を指定してもブラウザで表示されることがあります。ダウンロードさせたい場合はファイルをZIP形式に圧縮することを検討してください。 - ブラウザの動作
download属性はHTML5対応のブラウザでのみ動作します。非常に古いブラウザでは無効となる可能性があります。 - セキュリティに注意
ダウンロードリンクで提供するファイルは、安全で信頼できるものであることを確認してください。ユーザーに危害を与えるようなファイルを提供すると、信頼を損なうだけでなく法的な問題にもつながります。
HTMLで画像を挿入してサイズを指定しよう
Webページに画像を表示することで、情報を視覚的に伝えたり、デザインを豊かにすることができます。
HTMLでは<img> タグを使用して画像を表示します。
また、この記事ではまだ紹介しませんが、CSSを使うことで配置を調整することも可能です。（CSSの学習はLesson２にて）
画像表示の基本｜<img>タグと必須属性
画像を表示するには<img> タグを使います。このタグは単独で使用され閉じタグは必要ありません。
画像のソース（ファイルパス）を指定するために src 属性を使用し、代替テキストを指定するために alt 属性を使用します。
<img src="example.jpg" alt="サンプル画像">
src: 表示する画像ファイルのパス（保存場所の相対リンク）を指定します。alt: 画像が表示されない場合に代わりに表示されるテキストを指定します。
画像サイズを指定するwidthとheight属性
画像の幅と高さを指定するにはwidth 属性と height 属性を使用します。これにより画像の表示サイズを簡単に制御できます。
<img src="example.jpg" alt="サンプル画像" width="300" height="200">
このコードでは画像の横幅が300ピクセル、高さが200ピクセルに設定されます。
画像ファイル形式（JPEG・PNG・GIF・WebP）の選び方
Webページに使用される主な画像形式には、以下のようなものがあります。
- JPEG (JPG): 写真や多色画像に適しており、圧縮率が高い。
- PNG: 背景が透明な画像や、品質を損ないたくない画像に適している。
- GIF: 簡単なアニメーションや低解像度画像に使用される。
- WebP: 高い圧縮率を持ち、透明度やアニメーションにも対応できるため、ウェブでの使用に最適。
特にこだわりが無ければ、WebPが最もお勧めです。
画像スタイルを変えるCSSの役割を簡単に紹介
画像の詳細な配置やデザインの調整はCSSを使うことでさらに自由度が増します。
例えばボーダーを追加したり、画像をホバリング時に拡大表示するなどの効果を実現できます。
CSSの詳細はLesson２の「CSSの基本編」で詳細に学習します。
基本的なリンクと画像のまとめ
このレッスンではWebページを作成するうえで重要な「リンク」と「画像」の基本について学びました。
リンクはWebページ間をつなぎ、画像はページの視覚的な魅力を高める要素です。具体的には、以下の内容をカバーしました。
今回学んだHTMLタグとポイントの復習
- ハイパーリンクの基本
<a>タグを使用してリンクを作成する方法。- 内部リンク、外部リンク、相対リンクと絶対リンクの違い。
href属性を正しく設定する重要性。
- アンカーリンク
- 同じページ内の特定の位置に移動するリンクを作成する方法。
id属性の使用とリンク元でのhref指定。
- ダウンロードリンク
download属性を使用して、ファイルを直接ダウンロードできるリンクの作成。- ファイル形式やファイル名の変更の方法。
- 画像の表示と配置
<img>タグを使用した画像の基本的な表示方法。srcやalt属性の役割。- 幅と高さの指定、画像形式（JPEG、PNG、GIF）の選び方。
リンクと画像はHTMLの中でも非常に重要で、基本的ながら奥深い分野です。
これらの知識を活用することで、情報を適切に伝え、ユーザーにとって使いやすく魅力的なWebページを作成する第一歩を踏み出せます。
HTMLの基本を一つずつ理解しながら、自分のWebページにリンクと画像を活用してみてください。
この経験を通じて、HTMLの面白さと可能性を実感できるはずです。
練習問題1-3：リンクと画像挿入を使いこなそう
VSCで「training1-3.html」と「training1-3-2.html」の２つのファイルを作って保存してください。
それらのファイルにあなたのことを書いたページのhtmlコードを書き、ブラウザに表示させましょう。
ただし、training1-3.htmlの内容は以下の条件に従うこと。
- 3つの<h2>タグ「自己紹介」「HTMLを勉強する理由」「HTMLの学習状況」を設置すること。
- 最初の<h2>タグの前に目次をいれ、アンカーリンクを設置すること。
- 自己紹介の中であなたの顔写真を搭載すること。もしくはこのダウンロードリンクの画像を使用すること。
- training1-3.htmlが入っているフォルダの中に「image」というフォルダを作り、あなたの顔写真はそこに保存すること。
- 「HTMLを勉強する理由」の部分に内部リンクを設置しLesson1-3-2.htmlへ移動できるようにすること。
- 「HTMLの学習状況」の部分にこのページへの外部リンクを挿入すること。
Lesson1-3-2.htmlの内容は以下の条件に従うこと。
- 「HTMLを勉強する理由」の詳細を書くこと。
- training1-3.htmlへ戻る内部リンクを設置すること。
初めてのWebサイトを作ろう1-3
このサイトの Lesson1-1（HTML学習の入り口） から順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。
サイトのタイトルは「自分で作る！HTML＆CSSの学習サイト」
この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。
- Webサイト制作に挑戦する人はここをクリック！
-
自分だけのWebサイト制作にはベースとなる基本セットが必要になります。
まだ入手していない人はLesson1-1の記事下部からダウンロードして下さい。
Lesson1-3のまとめノートと練習問題を追加しよう
このLessonのまとめノートと練習問題の解答を、MyWebsiteフォルダに追加しましょう。
１．練習問題の解答を保存
練習問題1-3で作成した「training1-3.html」と「training1-3-2.html」を、ダウンロードした「lesson1（学習フォルダ）」の中に保存してください。
トップページからリンクで飛べるようになりますので確認しましょう。
２．まとめノートを作成・保存
下記のHTMLコードは、このLesson1-3で紹介した内容を端的にまとめてブラウザ表示するためのコードです。
これをコピーして「MyWebsite1-3.html」という名前で保存し、「lesson1（学習フォルダ）」の中に保存してください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lesson1-3</title> <link rel="stylesheet" href="style/styles-lesson1.css"> </head> <body> <main class="container"> <h1>Lesson1-3：ページにリンクや画像を挿入しよう</h1> <h2>目的・要点</h2> <p>このレッスンでは、HTMLにおけるリンクと画像の基本的な使い方を学びました。リンクはWebページ間の移動を可能にし、画像はページに視覚的な魅力を与えます。リンクには内部リンクと外部リンクがあり、相対パスと絶対パスの違いを理解することが重要です。また、画像の表示やサイズの指定、ダウンロードリンクの作成方法についても学習しました。</p> <h2>このレッスンで学習した内容</h2> <h3>ハイパーリンク（<code><a></code>タグ）</h3> <ul> <li><code>href</code> 属性を使ってリンクを作成する。</li> <li>内部リンク（相対リンク）と外部リンク（絶対リンク）の違いを理解する。</li> <li>アンカーリンクを利用し、ページ内の特定位置にジャンプできるようにする。</li> </ul> <h3>ダウンロードリンク</h3> <ul> <li><code>download</code> 属性を使用して、ファイルをダウンロード可能にする。</li> <li>セキュリティやファイル形式の考慮が必要。</li> </ul> <h3>画像の表示（<code><img></code>タグ）</h3> <ul> <li><code>src</code> 属性で画像のファイルパスを指定する。</li> <li><code>alt</code> 属性で代替テキストを設定し、アクセシビリティを向上させる。</li> <li><code>width</code> と <code>height</code> 属性を使い、画像のサイズを指定する。</li> </ul> <h3>画像形式の選択</h3> <ul> <li><strong>JPEG</strong>（写真向け、高圧縮）</li> <li><strong>PNG</strong>（透明背景対応、高画質）</li> <li><strong>GIF</strong>（アニメーション対応）</li> <li><strong>WebP</strong>（高圧縮、高品質、Web向け推奨）</li> </ul> <h2>トピック・豆知識</h2> <ul> <li><strong>SEOにおけるリンクの役割：</strong> 適切なリンク構造を作ることで検索エンジンがサイトを理解しやすくなり、ランキング向上につながる。</li> <li><strong>アンカーリンクの活用：</strong> 目次リンクなどを活用すると、長いページでもユーザーが目的の情報にアクセスしやすくなる。</li> <li><strong>画像の遅延読み込み（Lazy Load）：</strong> 画像がページの読み込み速度に与える影響を軽減するために、<code>loading="lazy"</code> 属性を使用すると効果的。</li> </ul> <h2>まとめ</h2> <p>リンクと画像はWebページの基本要素であり、適切に活用することでユーザーにとって便利で魅力的なサイトを作成できます。次のレッスンでは、Webページのレイアウトを整えるためのリストタグについて学びます。</p> <p><a href="../MyWebsite.html">トップページへ戻る</a></p> </main> <footer> <p>© 初心者のためのプログラミングテキスト＆問題集</p> </footer> </body> </html>※ MyWebsite1-3.htmlは先ほどのtraining1-3.htmlと違い、少しだけCSSを使用して見た目を整理しています。
これでLesson1-3の作業は完了です。
継続は力なり。次のLessonも、引き続き頑張ってください^^
<<前のページ
記事一覧
次のページ>>
FAQ｜HTMLでリンクと画像を挿入する際によくある質問
- Q1. <a>タグでリンクを作成しても、クリックできないのはなぜですか？
-
<a>タグの中にリンク先のURLを指定するhref属性がないと、リンクとして機能しません。hrefを正しく指定しましょう。また
href="#"などダミーのURLを指定していないかも確認してください。
- Q2. 内部リンクと外部リンクの違いがいまいち理解できません。具体的に教えてください。
-
内部リンクは自分のWebサイト内の別ページに移動するリンクで、
href="about.html"のように指定します。一方、外部リンクは他のWebサイトに移動するリンクで、
href="https://example.com"のようにURLをフルで書きます。初心者は特に
httpやhttpsの有無で混乱しやすいので、リンク先をよく確認しましょう。
- Q3. 相対リンクと絶対リンクのどちらを使えばいいですか？
-
自分のサイト内でページを行き来するなら相対リンク（例：
href="contact.html"）を使うのがおすすめです。外部サイトへリンクする場合は絶対リンク（例：
href="https://example.com"）を使います。ファイルを整理する際は相対リンクの方が便利ですが、どちらも場面に応じて使い分ける必要があります。
- Q4.タグで画像を表示できません。何が間違っていますか？
-
画像が表示されない場合は、以下のポイントを確認してください：
src属性に指定した画像のパスが正しいか（例：src="images/photo.jpg"）。- 画像ファイルが正しい場所にあるか。
- ファイル名にスペルミスがないか。
- 画像形式（例：
.jpg,.png）を間違えていないか。
- Q5. 画像サイズを指定するwidthやheightやは必ず使うべきですか？
-
必須ではありませんが、使うことをおすすめします。
widthやheightを指定しないと画像の表示が遅くなったり、レイアウトが崩れることがあります。例えば
<img src="image.png" width="400" height="300">のように指定すると、ページの表示がスムーズになります。
この記事への質問・コメント
この記事を作成するにあたりAIの力を借りています。
問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。