作成ファイル・保存場所
- 作成した
html-basicフォルダの中にhtml09.htmlというファイル名で保存してください。
目的
HTML5以降導入された <section>・<article>・<aside> タグの役割を理解し、情報の意味ごとに構造を分けたページを作成できるようになる。
指示
以下の構成を参考にして、セマンティックな構造を意識したニュースページ風のWebページを作成してください。
- タイトルは「HTML課題09」とすること
<h1>タグで「Webデザイン通信」と表示すること- 以下のブロックに分けてページを構成すること
構成内容
<section>- セクションの見出しとして
<h2>「最新記事」と表示すること - 中に
<article>を2つ含め、それぞれに以下の要素を含む：<h3>：記事のタイトル<p>：本文のダイジェスト（2〜3行程度）<img>：記事イメージ（ダミー画像）
- セクションの見出しとして
<aside><h2>で「お知らせ」などと表示すること<ul>リストで3件ほどお知らせ項目を表示する
チェックポイント
<header>・<main>・<footer>が正しく使われているか<section>・<article>・<aside>が役割に合って使われているか- 見出し構造が論理的になっているか（
<h1>→<h2>→<h3>の階層） - 各ブロックが意味的に独立した内容を持っているか
- インデント、閉じタグ、構文ミスがないか
- 「最新記事一覧」というまとまりの中で、個々の記事が区切られているか（section + article）
HTMLの解答例
セマンティクスな要素を踏まえて、全体の構成を意識しながら入力しましょう
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML課題09</title>
</head>
<body>
<!-- ヘッダー -->
<header>
<h1>Webデザイン通信</h1>
</header>
<!-- メインコンテンツ -->
<main>
<!-- 最新記事セクション -->
<section>
<h2>最新記事</h2>
<article>
<h3>CSSグリッドの基本</h3>
<p>CSSグリッドは、レイアウトを柔軟に作れる強力な機能です。この記事では基本構文を紹介します。</p>
<img src="https://dummy.kobeya.com/?width=300&height=200&text=CSS+Grid" alt="CSSグリッドの解説画像">
</article>
<article>
<h3>Figmaでのプロトタイピング</h3>
<p>Figmaはデザインと共有が簡単なツールです。今回はプロトタイピング機能の使い方を解説します。</p>
<img src="https://dummy.kobeya.com/?width=300&height=200&text=Figma+UI" alt="Figmaの解説画像">
</article>
</section>
<!-- サイドコンテンツ -->
<aside>
<h2>お知らせ</h2>
<ul>
<li>4月：春の短期講座 開講</li>
<li>5月：新しい教材を追加予定</li>
<li>6月：ポートフォリオ作品展 開催</li>
</ul>
</aside>
</main>
<!-- フッター -->
<footer>
<p><small>© 2025 MySite</small></p>
</footer>
</body>
</html>
