作成ファイル・保存場所
- 作成した
html-basicフォルダの中にhtml10.htmlというファイル名で保存してください。
目的
複数の記事を持つページにおいて、各 <article> に独立した <header> と <h1> を含める構造を学ぶ。 これにより、1つひとつの記事が「独立した情報ブロック」であるというHTMLの思想を理解する。
指示
以下の構成を参考にして、ブログ風の2つの記事を含むページを作成してください。
- タイトルは「HTML課題10」とすること
<main>の中に<article>を2つ含めること- それぞれの
<article>に以下の構造を含めること：
各記事の構成
ページ全体は <header>（サイトのタイトル）、<main>、<footer>（著作権表記）で構成されます。その中の <main> に、以下のような <article> を2つ配置してください。
各 <article> は独立した記事単体の構造として、以下の要素を含めてください：
<article>の中に<header>を配置<h1>：記事タイトル<p>：投稿日（例：投稿日：2025年4月15日）
<p>：記事本文（2〜3文程度）<footer>：著者名またはカテゴリー（例：「執筆：Nakamura」など）
チェックポイント
- ページ全体に
<header>（ブログタイトル）と<footer>（著作権表記）が含まれているか - 各
<article>が<header><h1>...</h1></header>の構造を持っているか - ページ全体の
<h1>（ブログタイトル）と、各記事内の<h1>（記事タイトル）が区別されているか - セマンティックタグが意味に合った場所で適切に使われているか
- インデントや閉じタグ、構文ミスがないか
HTMLの解答例
一番悩む<article>要素。articleの使い方を理解しましょう
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML課題10</title>
</head>
<body>
<!-- サイト全体のヘッダー -->
<header>
<h1>ブログタイトル</h1>
</header>
<!-- メインコンテンツ -->
<main>
<!-- 記事1 -->
<article>
<header>
<h1>HTMLとCSSの違いとは？</h1>
<p>投稿日：2025年4月15日</p>
</header>
<p>
HTMLはウェブページの構造を定義するマークアップ言語であり、CSSはその見た目や装飾を整えるスタイルシートです。
両者は組み合わせて使用されることが一般的で、Web制作の基礎となる重要な技術です。
</p>
<footer>
<p>執筆：Nakamura</p>
</footer>
</article>
<!-- 記事2 -->
<article>
<header>
<h1>Webアクセシビリティとは何か</h1>
<p>投稿日：2025年4月10日</p>
</header>
<p>
アクセシビリティとは、障害のある方を含むすべてのユーザーにとって利用しやすいウェブを目指す考え方です。
適切なマークアップとサポート技術への配慮により、情報の公平なアクセスが実現できます。
</p>
<footer>
<p>執筆：Nakamura</p>
</footer>
</article>
</main>
<!-- サイト全体のフッター -->
<footer>
<p><small>© 2025 MyBlog</small></p>
</footer>
</body>
</html>
