一つ前の章では基本的なHTMLタグについて学習しました。
今回はリンクと画像の挿入方法について見ていきましょう。
Lesson1：HTML入門編
・Lesson1-1：HTMLの概要と基本構造を理解しよう
・Lesson1-2：基本的なHTMLタグを理解しよう
・Lesson1-3：Webページにリンクや画像を挿入しよう ◁今回はここ
・Lesson1-4：３種類のリストを作成しよう
・Lesson1-5：テーブルを作成しよう
・Lesson1-6：フォームを作成しよう
・Lesson1-7：セクションタグとメタタグを知ろう
・Lesson1-☆1：HTMLの『属性』とは何か
・Lesson1-☆2：SEOに強いHTMLの書き方
・Lesson1-☆3：Emmetの使い方完全ガイド
Lesson2：CSS入門編
Lesson3：CSS応用編
Webページを作成する際、重要な役割を果たすのが「リンク」と「画像」です。
リンクは他のページや外部サイト、または同じページ内の特定の位置へ移動するための通路となります。一方で画像はページに視覚的な魅力や情報を加えるための要素として欠かせません。
このレッスンではリンクと画像の基本的な使い方について学びます。
この記事を通して、以下のことができるようになることを目指します。
- ページ内外を結ぶリンクを作成する方法を理解する。
- ページ内の特定の位置に移動する「アンカーリンク」を作成できる。
- 画像を表示し、適切な配置を行う方法を学ぶ。
- ファイル構造に基づいた相対リンクと絶対リンクの違いを理解する。
- ダウンロードリンクを設置して、ユーザーに便利な機能を提供する。
リンクと画像を正しく使うことで、ユーザーにとって使いやすく、魅力的なWebページを作成できるようになります。
それでは、基本的なハイパーリンクの構造から始めましょう！
<<前のページ
記事一覧
次のページ>>
HTMLでハイパーリンクを作成する方法を学ぼう
ハイパーリンク はWebページ同士を結びつけるための基本的なHTML要素です。
リンクをクリックすると他のページやリソースに移動したり、同じページ内の特定の位置にジャンプしたりすることができます。
HTML/CSSの用語集 も活用しながら、学習を進めましょう。
ハイパーリンクの基本構造と<a>タグの使い方
ハイパーリンクを作成するには <a>タグ を使用します。
このタグにはリンク先を指定するための href属性 が必要です。以下は基本的な構造の例です。
<a href="https://example.com">Exampleサイト</a>
このコードの場合、「Exampleサイト」というテキストがクリック可能なリンクとなり、クリックすると https://example.com に移動します。
例：Exampleサイト（このサイトのトップページに繋がっています）
リンクの種類｜内部リンクと外部リンクの違い
ハイパーリンクには大きく内部リンクと外部リンクの２種類があります。
内部リンク（相対リンク）
内部リンクは同じWebサイト内の別のページに移動するためのリンクです。相対パスを使用して指定することが一般的です。
<a href="about.html">Aboutページへ</a>
このコードでは、このコードがかかれたhtml文書と同じフォルダ内に保存された about.html という別のhtml文書にリンクします。
このように、内部リンクは現在のファイルの位置を基準にしたパスを指定し、相対リンクともいいます。主に同じWebサイト内で使用されます。
例えば、MyWebSite.htmlを保存したMyWebSiteというフォルダの中に「image」というフォルダがあり、その中の「photo.jpg」というファイルがあるとします。
MyWebSite/ ├── MyWebSite.html └── image/ └── photo.jpg
この場合、MyWebSite.htmlから画像にリンクする場合は以下のように表記します。
<a href="images/photo.jpg">写真を見る</a>
また、htmlファイルを保存したフォルダの上のフォルダにあるファイルにリンクする場合は、「..」を使用して以下のように表記します。
<a href="../photo.jpg">写真を見る</a>
外部リンク/絶対リンク
外部リンクは他のWebサイトへ移動するためのリンクであり、絶対リンクとも言います。
<a href="https://example.com">外部サイトへ</a>
このコードではインターネット上に公開されたhttps://example.com というWebサイトに移動します。
このように、絶対リンクはURL全体を指定します。
主に外部のリソースやWebページへのリンクに使用されますが、内部のhtmlや画像ファイルなどにリンクすることも可能です。
<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｜リンクや画像を挿入する際によくある質問
今回の記事に関する「よくある質問」とその解答について、以下の内容を参考にしてください。
- Q1. 相対リンクと絶対リンクはどのように使い分けるべきですか？
-
相対リンクは同じサイト内のページ同士を繋ぐときに便利で、URLの構造が変わっても管理しやすい特徴があります。一方、絶対リンクは外部サイトやドメインが異なる場合に使用します。サイト規模や運用方法によって適切に使い分けましょう。
- Q2. alt属性は画像タグ（
<img>）でなぜ重要なのですか？ -
alt属性は画像が表示できない場合の代替テキストとしてだけでなく、アクセシビリティやSEOの観点からも重要です。視覚障害者のためのスクリーンリーダーがaltテキストを読み上げるほか、検索エンジンにも画像の内容を伝える役割があります。
- Q3. テキストリンクと画像リンクの違いや使い分けのポイントは何ですか？
-
テキストリンクは文章内で目立ちやすく、内容を明確に伝えられる利点があります。画像リンクは視覚的に訴求したい場合に有効ですが、何のリンクか分かりにくくなることがあるため、画像にも分かりやすいalt属性を設定し、必要に応じてテキストを併用するとよいでしょう。
よくあるトラブルと解決法｜リンクと画像挿入編
今回の記事に関する「よくあるトラブル」とその原因、解決法について、以下の内容を参考にしてください。
リンクをクリックしても目的のページが表示されない
- トラブルの原因と対処法を見る
-
トラブルの原因例
リンク先のパス（href属性）が間違っている、またはファイル名やディレクトリ構造に誤りがある。
トラブルの解決法
リンク先として指定したファイル名やフォルダ名、相対パス・絶対パスの表記にミスがないか確認し、必要に応じて実際のファイル構成と一致しているかを探してください。また、リンク先ファイルが正しくアップロードされているかも見直しましょう。
ページに画像が表示されず、代わりにバツ印やaltテキストが出る
- トラブルの原因と対処法を見る
-
トラブルの原因例
imgタグのsrc属性に指定した画像ファイルのパスや拡張子、ファイル名の記述に誤りがある場合。
トラブルの解決法
imgタグのsrc属性が正しいパスやファイル名になっているか、拡張子まで含めて細かくチェックしましょう。パスの大文字・小文字の違いにも注意し、画像ファイル自体がサーバーにアップロードされているかも合わせて確認してください。
複数のリンクや画像を挿入した際、予期せぬ表示崩れや並びがおかしくなる
- トラブルの原因と対処法を見る
-
トラブルの原因例
タグの入れ子構造や閉じタグのつけ忘れ、不要な空白や改行など、HTMLの文法上のミス。
トラブルの解決法
各リンクや画像タグの開始・終了タグが正しく対応しているか、不要なタグや入れ子の誤りがないかを探し、問題があればHTMLの構造を見直しましょう。エディタの自動フォーマット機能などを活用し、タグの対応関係を整理するのも有効です。
<<前のページ
記事一覧
次のページ>>