<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML学習用サンプルページ2:レイアウト用セマンティックタグ</title>
<meta name="description" content="header, nav, main, article, aside, footer など、レイアウト用のセマンティックタグを学ぶためのサンプルページです。">
<style>
/* ページ全体の基本設定 */
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.7;
margin: 0;
padding: 0;
color: #333;
background-color: #f5f5f5;
}
/* コンテンツを中央寄せにするためのラッパー */
body > header,
nav,
main,
body > footer {
max-width: 960px;
margin: 0 auto;
padding: 0 1rem;
}
/* ページ全体のヘッダー */
body > header {
padding: 1.5rem 1rem 1rem;
background-color: #ffffff;
border-bottom: 1px solid #ddd;
}
body > header h1 {
margin: 0 0 0 0.5rem;
font-size: 1.6rem;
}
/* ナビゲーション */
nav {
background-color: #333;
padding: 0.5rem 1rem;
}
nav a {
color: #ffffff;
text-decoration: none;
margin-right: 1rem;
font-size: 0.95rem;
}
nav a:hover {
text-decoration: underline;
}
/* メインコンテンツ */
main {
padding: 1.5rem 1rem 2rem;
background-color: #ffffff;
}
main h2 {
margin-top: 0;
border-left: 4px solid #007acc;
padding-left: 0.5rem;
font-size: 1.3rem;
}
main h3 {
margin-top: 1.5rem;
font-size: 1.1rem;
}
p {
margin: 0.5rem 0;
}
ul,
ol {
padding-left: 1.5rem;
}
/* セクション同士の間隔 */
section {
margin-bottom: 2rem;
}
/* 最新記事セクションの背景を少し強調 */
#latest-article {
background-color: #f0f8ff;
padding: 1rem;
border-radius: 4px;
}
/* 過去の記事リストの記事ボックス */
#old-articles article {
border: 1px solid #ddd;
padding: 0.75rem 1rem;
border-radius: 4px;
background-color: #fafafa;
margin-bottom: 1rem;
}
/* サイドバー的な部分 */
#profile {
border-left: 4px solid #ffa500;
padding-left: 0.75rem;
background-color: #fff8e5;
}
/* ページ全体のフッター */
body > footer {
padding: 1rem;
text-align: center;
font-size: 0.85rem;
color: #666;
}
</style>
</head>
<body>
<!-- ページ全体のヘッダー -->
<header>
<h1>HTML学習 第2回：レイアウト用セマンティックタグ</h1>
<p>このページでは、<strong>ブログ記事風のレイアウト</strong>をイメージしながら、<code>header</code>/<code>nav</code>/<code>main</code>/<code>article</code>/<code>aside</code>/<code>footer</code>などのタグを学びます。</p>
</header>
<!-- グローバルナビゲーション -->
<nav>
<a href="#latest-article">最新の記事</a>
<a href="#old-articles">過去の記事</a>
<a href="#profile">プロフィール</a>
<a href="#contact">お問い合わせ</a>
</nav>
<!-- メインコンテンツ全体 -->
<main>
<!-- メインカラム（記事部分） -->
<section id="latest-article">
<header>
<h2>最新記事：セマンティックHTMLでページ構造を分かりやすく</h2>
<p>投稿日：<time datetime="2026-02-26">2026年2月26日</time></p>
</header>
<!-- 記事本体 -->
<article>
<h3>セマンティックタグとは？</h3>
<p><strong>セマンティック（semantic）</strong>とは「意味のある」という意味です。HTMLでは、見た目のためではなく、<em>「その部分が何の役割を持っているか」</em>をタグで表現します。</p>
<p>例えば、次のようなタグがあります。</p>
<ul>
<li><code><header></code>：ページ全体や、セクションの「ヘッダー部分」を表す</li>
<li><code><nav></code>：ナビゲーション（リンクの集まり）</li>
<li><code><main></code>：ページの主な内容部分を表す（1ページに基本1つ）</li>
<li><code><article></code>：独立した記事・コンテンツのかたまりを表す</li>
<li><code><aside></code>：サイドバーなど、補足的な内容を表す</li>
<li><code><footer></code>：ページや記事の「フッター部分」を表す</li>
</ul>
<h3>なぜセマンティックタグを使うのか</h3>
<p>セマンティックタグを使うことで次のようなメリットがあります。</p>
<ol>
<li>コードを読む人（自分や他人）が、構造を理解しやすくなる。</li>
<li>検索エンジンがページの内容を理解しやすくなる</li>
<li>スクリーンリーダー（音声読み上げソフト）などへのアクセシビリティ向上</li>
</ol>
<p>写経するときは、「この<code>header</code>は何のヘッダー？」「この<code>footer</code>はどの範囲のフッター？」と役割を意識しながら書いてみましょう。</p>
</article>
<!-- 記事のフッター（タグやカテゴリ情報などを想定） -->
<footer>
<p>カテゴリ：<a href="#old-articles">HTML基礎</a></p>
<p><a href="#semantic-html">セマンティックHTML</a>/<a href="#beginner">初心者向け</a></p>
</footer>
</section>
<!-- 過去の記事の一覧セクション -->
<section id="old-articles">
<header>
<h2>過去の記事</h2>
<p>これまでに公開したサンプル記事の一覧です。</p>
</header>
<!-- 1つ目の記事（ダイジェスト） -->
<article>
<h3>第1回：HTMLの基本のタグを覚えよう</h3>
<p>HTMLでよく使う、見出し・段落・リンク・リスト・表・フォームなど基本のタグを紹介しました。</p>
<p><a href="#">第1回の記事を読む（ダミーリンク）</a></p>
</article>
<!-- 2つ目の記事（ダイジェスト） -->
<article>
<h3>これから学ぶCSSのイメージ</h3>
<p>今後、今回のようなHTML構造に対して、CSSで色やレイアウトをつけていきます。セマンティックなHTML構造を作っておくと、CSSの指定もしやすくなります。</p>
<p><a href="#">CSS入門の予告記事を読む（ダミーリンク）</a></p>
</article>
</section>
<!-- サイドバー的な補足情報 -->
<aside id="profile">
<h2>このサイトのプロフィール</h2>
<p>このサイトは、HTML・CSS・JavaScriptを少しずつ写経しながら覚えていくための練習用ページです。</p>
<p>難しいテクニックに入る前に、<strong>きれいな構造のHTML</strong>を書くことを目標にしています。</p>
</aside>
<!-- お問い合わせセクション -->
<section id="contact">
<h2>お問い合わせ</h2>
<p>学習内容に関するお問い合わせや、ご要望があれば、次のリンクからご連絡ください。（ダミーです）</p>
<p><a href="#">お問い合わせフォームへ（ダミーリンク）</a></p>
</section>
</main>
<!-- ページ全体のフッター -->
<footer>
<p>© 2026 たぬちべ. All rights reserved.</p>
</footer>
</body>
</html>