<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML学習 第3回：画像とリンクの応用</title>
<meta name="description" content="imgタグとaタグを使った画像表示や、外部リンク・ページ内リンク・画像リンクなどの応用例をまとめた学習用サンプルページです。">
<meta name="author" content="たぬちべ">
<style>
/* ページ全体の基本設定 */
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.8;
margin: 0;
padding: 0;
color: #333;
background-color: #f0f2f5;
}
/* レイアウトの共通幅 */
body > header,
nav,
main,
body > footer {
max-width: 960px;
margin: 0 auto;
padding: 0 1rem;
}
/* ヘッダー */
body > header {
padding: 1.5rem 1rem 1rem;
background: linear-gradient(120deg, #3f51b5, #5c6bc0);
color: #fff;
}
body > header h1 {
margin: 0 0 0.5rem;
font-size: 1.7rem;
}
/* ナビゲーション */
nav {
background-color: #ffffff;
border-bottom: 1px solid #ddd;
padding: 0.5rem 1rem;
}
nav a {
display: inline-block;
margin-right: 1rem;
padding: 0.25rem 0.5rem;
text-decoration: none;
color: #3f51b5;
border-radius: 3px;
}
nav a:hover {
background-color: #e8eaf6;
}
/* メインコンテンツとセクション */
main {
padding: 1.5rem 1rem 2rem;
}
section {
background-color: #ffffff;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
padding: 1rem 1.25rem 1.25rem;
margin-bottom: 1.5rem;
}
/* 注記用のボックス */
.note {
margin-top: 0.75rem;
padding: 0.5rem 0.75rem;
border-left: 4px solid #ff9800;
background-color: #fff8e1;
font-size: 0.9rem;
}
/* フッター */
body > footer {
padding: 1rem;
text-align: center;
font-size: 0.85rem;
color: #777;
}
</style>
</head>
<body>
<!-- ページ全体のヘッダー -->
<header>
<h1 id="top">HTML学習 第3回：画像とリンクの応用</h1>
<p>このページでは、<strong>画像（imgタグ）</strong>と<strong>リンク（aタグ）</strong>を少しだけ応用して使う例をまとめています。</p>
</header>
<!-- ナビゲーション -->
<nav>
<a href="#basic-image">基本の画像表示</a>
<a href="#caption-image">キャプション付きの画像</a>
<a href="#link-types">いろいろなリンク</a>
<a href="#image-link">画像リンクの例</a>
</nav>
<!-- メインコンテンツ -->
<main>
<!-- セクション1：基本の画像表示 -->
<section id="basic-image">
<header>
<h2>1. 基本の画像表示（imgタグ）</h2>
</header>
<p><code><img></code> タグを使うと、Webページに画像を表示できます。よく使う属性は次のとおりです。</p>
<ul>
<li><code>src</code>：画像ファイルのURL（パス）</li>
<li><code>alt</code>：画像の代替テキスト（画像が表示できない場合の説明文）</li>
<li><code>width</code> / <code>height</code>：表示する幅・高さ（pxなど）</li>
<li><code>title</code>：画像にマウスを乗せたときに表示されるヒント</li>
</ul>
<p>サンプルとして、次のような画像を表示してみます。（画像URLはダミーです）</p>
<p>
<img src="images/sample-photo.jpg" alt="デスクの上に置かれたノートパソコンとノート" width="320" height="213" title="サンプル写真（デスクとノートPC）">
</p>
<p class="note">※ 実際に自分のサイトで使うときは、<code>src</code> に自分の画像ファイルのパスを指定してください。</p>
</section>
<!-- セクション2：キャプション付きの画像 -->
<section id="caption-image">
<header>
<h2>2. 図（figure）とキャプション（figcaption）</h2>
</header>
<p>画像に対して、「これは何の画像か」という説明文（キャプション）をセットで表示したいことがあります。</p>
<p>そのような場合は、<code><figure></code> と <code><figcaption></code> を使うと、<strong>1つの意味のかたまり</strong>として表現できます。</p>
<figure>
<img src="images/sample-book.jpg" alt="開いたノートとペン" width="280" height="187">
<figcaption>図1：学習ノートとペンのイメージ写真（サンプル）</figcaption>
</figure>
<p>このように、<code><figure></code> の中に <code><img></code> と <code><figcaption></code> をまとめて入れます。</p>
</section>
<!-- セクション3：いろいろなリンク -->
<section id="link-types">
<header>
<h2>3. いろいろなリンクの例</h2>
</header>
<h3>通常のリンク（同じタブで開く）</h3>
<p>
<a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/img">MDNのimg要素の解説ページ</a> へのリンクです。
</p>
<h3>新しいタブで開くリンク</h3>
<p>外部サイトに移動するときに、<code>target="_blank"</code> を付けると、新しいタブで開くことができます。</p>
<p>
<a href="https://www.w3.org/TR/html52/" target="_blank" rel="noopener noreferrer">HTML仕様書（W3C、別タブで開きます）</a>
</p>
<p class="note">※ <code>target="_blank"</code> を使うときは、<code>rel="noopener noreferrer"</code> も一緒に指定しておくのが安全面で推奨されています。</p>
<h3>ページ内リンク（このページの別の場所へ移動）</h3>
<p>例えば、ページの先頭に戻るリンクは次のように書けます。</p>
<p>
<a href="#top">ページの先頭へ戻る</a>
</p>
</section>
<!-- セクション4：画像リンクの例 -->
<section id="image-link">
<header>
<h2>4. 画像をリンクにする（バナー風）</h2>
</header>
<p>画像全体をクリックすると、別のページに移動する「バナーリンク」のような表現もよく使われます。</p>
<p>画像を <code><a></code> タグで囲むだけで実現できます。</p>
<p>
<a href="https://example.com/html-basic" target="_blank" rel="noopener noreferrer">
<img src="images/banner-html-basic.png" alt="HTML基礎講座へのバナー（サンプル）" width="400" height="100">
</a>
</p>
<p class="note">※ このリンク先URL（<code>https://example.com/html-basic</code>）や画像パスはダミーです。実際のサイトに合わせて書き換えてください。</p>
</section>
</main>
<!-- ページ全体のフッター -->
<footer>
<p>© 2026 たぬちべ. All rights reserved.</p>
</footer>
</body>
</html>