相対リンクと絶対リンクはどのように使い分けるべきですか？

相対リンクは同じサイト内のページ同士を繋ぐときに便利で、URLの構造が変わっても管理しやすい特徴があります。一方、絶対リンクは外部サイトやドメインが異なる場合に使用します。サイト規模や運用方法によって適切に使い分けましょう。

alt属性は画像タグ（）でなぜ重要なのですか？

alt属性は画像が表示できない場合の代替テキストとしてだけでなく、アクセシビリティやSEOの観点からも重要です。視覚障害者のためのスクリーンリーダーがaltテキストを読み上げるほか、検索エンジンにも画像の内容を伝える役割があります。

テキストリンクと画像リンクの違いや使い分けのポイントは何ですか？

テキストリンクは文章内で目立ちやすく、内容を明確に伝えられる利点があります。画像リンクは視覚的に訴求したい場合に有効ですが、何のリンクか分かりにくくなることがあるため、画像にも分かりやすいalt属性を設定し、必要に応じてテキストを併用するとよいでしょう。

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

ながみえ

HTML/CSSレッスン1-3『Webページにリンクや画像を挿入しよう』記事用アイキャッチ画像

一つ前の章では基本的な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/CSSレッスン1-2『基本的なHTMLタグを理解しよう』記事用アイキャッチ画像

記事一覧

次のページ>>

HTML/CSSレッスン1-4『３種類のリストを理解しよう』記事用アイキャッチ画像

ハイパーリンクとは｜作り方とコード例の紹介

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

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

HTML/CSSの用語集も活用しながら、学習を進めましょう。

【HTML】勉強猫がノートパソコンを前にして学習を始める様子。記事内の学習スタート用イラスト

ハイパーリンクの基本構造｜aタグとhref属性の使い方

ハイパーリンクを作成するには <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コードをブラウザ表示し、実際にリンクをクリックしてみましょう。

リンク先：https://programming-mondai.com/（このサイトのトップページ）
リンクメッセージ：初心者のためのプログラミングテキスト＆問題集

【HTML】勉強猫がノートパソコンを見ながら考え込む様子。記事内の休憩用イラスト

アンカーリンクとは｜ページ内リンクの作り方

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

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

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

アンカーの基本｜id属性の使い方

アンカーリンクを作成するには、リンク先にユニークな 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コードを記述し、ブラウザ表示してアンカーリンクを試してみましょう。

リンクメッセージをクリックすると一つ目の<h2>タグに戻ってくるようにしてください。

ページ内の行数が少ないとリンクの効果が分からないので、行数を稼ぐための段落を入れましょう。

<h2>タグ（一つ目）：これは一つ目の段落です。
段落：行数を稼ぎます。
例「初心者のためのプログラミングテキスト＆問題集初心者のためのプログラミングテキスト＆問題集初心者のためのプログラミングテキスト＆問題集 …」
<h2>タグ（二つ目）：これは二つ目の段落です。
リンクタグ：これはアンカーリンクです。

ダウンロードリンクとは｜作り方とコード例の紹介

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

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

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

基本構造｜download属性の使い方

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

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

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

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

ダウンロードリンクを使う際の注意点

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

コードを書いてみよう

ダウンロードリンクを作成してみましょう。

htmlファイルを保存しているフォルダ内に任意の画像を用意し、その画像をブラウザからダウンロードできるようにしてください。

画像はこのサイト内にちょくちょく出てくる勉強猫の画像を使用してもいいですよ^^

【HTML】勉強猫がコーヒーを片手にリラックスしている様子。記事内の休憩用イラスト

HTMLによる画像挿入とサイズ指定の方法

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

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

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

imgタグの基本｜使い方とsrc属性／alt属性の役割

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

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

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

src: 表示する画像ファイルのパス（保存場所の相対リンク）を指定します。
alt: 画像が表示されない場合に代わりに表示されるテキストを指定します。

コードを書いてみよう

画面に画像を表示してみましょう。

htmlファイルと同じ場所に任意の画像を用意し、上記のコードを真似してhtmlコードを記述して下さい。

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が最もお勧めです。

コードを書いてみよう

ブラウザに画像を表示してみましょう。

少し上にサイズ違いの勉強猫の画像を３枚並べて表示しています。これを同じことをあなたの手で再現してください。

また、３枚の画像を縦ではなく横に並べることにも挑戦してみましょう。

まとめ｜リンクと画像で魅力的なWebページを作ろう

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

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

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

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

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

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

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

練習問題｜リンクと画像挿入を使いこなそう

今回学習した内容を復習する練習問題に挑戦しましょう。

【HTML】勉強猫がノートパソコンに向かい、練習問題に挑戦する様子。記事内の休憩用イラスト

問題｜リンク・アンカー・画像で自己紹介ページを作ろう

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へ戻る内部リンクを設置すること。

この問題の解答例

模範解答は以下の通りです。

正解コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>自己紹介ページ｜レッスン1-3練習</title>
</head>
<body>
  <h1>自己紹介ページ</h1>

  <!-- 目次 -->
  <p>目次</p>
  <p><a href="#about">自己紹介へ移動</a></p>
  <p><a href="#reason">HTMLを勉強する理由へ移動</a></p>
  <p><a href="#progress">HTMLの学習状況へ移動</a></p>

  <!-- 自己紹介 -->
  <h2 id="about">自己紹介</h2>
  <p>はじめまして。○○と申します。Web制作を学びながら、日々アウトプットしています。</p>
  <!-- 画像の挿入-->
  <p>
    <img src="image/profile.jpg" alt="作者のプロフィール写真" width="240">
  </p>
  <!-- ダウンロードリンク -->
  <p><a href="image/profile.jpg" download>この画像をダウンロード</a></p>

  <!-- 理由 -->
  <h2 id="reason">HTMLを勉強する理由</h2>
  <p>Webの仕組みを理解し、自分の考えを形にするために基礎から学んでいます。</p>
  <p><a href="training1-3-2.html">理由の詳細を読む</a></p>

  <!-- 学習状況（外部リンク） -->
  <h2 id="progress">HTMLの学習状況</h2>
  <p>タグの基本、リンクや画像の扱いを練習中です。進捗は随時更新します。</p>
  <p><a href="https://example.com/training1-3.html">このページ（公開URL）を開く</a></p>

</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>理由の詳細｜レッスン1-3練習</title>
</head>
<body>
  <h1>HTMLを勉強する理由（詳細）</h1>

  <p>
    情報発信やポートフォリオ作成のため、まずはHTMLの基礎を確実に身につけたいと考えています。
    自分で手を動かしながら理解を深め、制作の幅を広げることが目標です。
  </p>

  <!-- 元ページの「HTMLを勉強する理由」見出しへ戻る内部リンク -->
  <p><a href="training1-3.html#reason">training1-3.html に戻る</a></p>

</body>
</html>

もっと分かりやすい学習サイトにするために

この記事を読んで「ここが分かりにくかった」「ここが難しかった」等の意見を募集しています。

世界一わかりやすいHTML/CSS学習サイトにするため、ぜひ問い合わせフォームからご意見下さい。

<<前のページ

記事一覧

次のページ>>

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

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

サイトのタイトルは「自分で作る！HTML＆CSSの学習サイト」

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

Webサイト制作に挑戦する人はここをクリック！

自分だけのWebサイト制作にはベースとなる基本セットが必要になります。

まだ入手していない人はLesson1-1の記事下部からダウンロードして下さい。

既に入手済みの場合はこの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>&lt;a&gt;</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>&lt;img&gt;</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>&copy; 初心者のためのプログラミングテキスト＆問題集</p>
    </footer>
</body>
</html>

※ MyWebsite1-3.htmlは先ほどのtraining1-3.htmlと違い、少しだけCSSを使用して見た目を整理しています。

これでLesson1-3の作業は完了です。

継続は力なり。次のLessonも、引き続き頑張ってください^^

リンクや画像の疑問解消｜FAQとよくあるトラブル

初心者がつまずきやすいポイントをFAQとしてまとめ、よくあるトラブルとその解決法をわかりやすく整理しました。

理解を深めたいときや、ふと疑問に感じたときに役立ててください。

FAQ｜リンクや画像を挿入する際によくある質問

今回の記事に関する「よくある質問」とその解答について、以下の内容を参考にしてください。

Q1. 相対リンクと絶対リンクはどのように使い分けるべきですか？: 相対リンクは同じサイト内のページ同士を繋ぐときに便利で、URLの構造が変わっても管理しやすい特徴があります。一方、絶対リンクは外部サイトやドメインが異なる場合に使用します。サイト規模や運用方法によって適切に使い分けましょう。

Q2. alt属性は画像タグ（<img>）でなぜ重要なのですか？: alt属性は画像が表示できない場合の代替テキストとしてだけでなく、アクセシビリティやSEOの観点からも重要です。視覚障害者のためのスクリーンリーダーがaltテキストを読み上げるほか、検索エンジンにも画像の内容を伝える役割があります。

Q3. テキストリンクと画像リンクの違いや使い分けのポイントは何ですか？: テキストリンクは文章内で目立ちやすく、内容を明確に伝えられる利点があります。画像リンクは視覚的に訴求したい場合に有効ですが、何のリンクか分かりにくくなることがあるため、画像にも分かりやすいalt属性を設定し、必要に応じてテキストを併用するとよいでしょう。

よくあるトラブルと解決法｜リンクと画像挿入編

今回の記事に関する「よくあるトラブル」とその原因、解決法について、以下の内容を参考にしてください。

リンクをクリックしても目的のページが表示されない

トラブルの原因と対処法を見る

・トラブルの原因例

リンク先のパス（href属性）が間違っている、またはファイル名やディレクトリ構造に誤りがある。

・トラブルの解決法

リンク先として指定したファイル名やフォルダ名、相対パス・絶対パスの表記にミスがないか確認し、必要に応じて実際のファイル構成と一致しているかを探してください。また、リンク先ファイルが正しくアップロードされているかも見直しましょう。

ページに画像が表示されず、代わりにバツ印やaltテキストが出る

トラブルの原因と対処法を見る

・トラブルの原因例

imgタグのsrc属性に指定した画像ファイルのパスや拡張子、ファイル名の記述に誤りがある場合。

・トラブルの解決法

imgタグのsrc属性が正しいパスやファイル名になっているか、拡張子まで含めて細かくチェックしましょう。パスの大文字・小文字の違いにも注意し、画像ファイル自体がサーバーにアップロードされているかも合わせて確認してください。

複数のリンクや画像を挿入した際、予期せぬ表示崩れや並びがおかしくなる

トラブルの原因と対処法を見る

・トラブルの原因例

タグの入れ子構造や閉じタグのつけ忘れ、不要な空白や改行など、HTMLの文法上のミス。

・トラブルの解決法

各リンクや画像タグの開始・終了タグが正しく対応しているか、不要なタグや入れ子の誤りがないかを探し、問題があればHTMLの構造を見直しましょう。エディタの自動フォーマット機能などを活用し、タグの対応関係を整理するのも有効です。

<<前のページ

記事一覧

次のページ>>