|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "650e63282e1dfa032890fcf5c1c4119d",
|
|
|
"translation_date": "2025-10-24T15:04:40+00:00",
|
|
|
"source_file": "3-terrarium/1-intro-to-html/assignment.md",
|
|
|
"language_code": "ja"
|
|
|
}
|
|
|
-->
|
|
|
# HTML練習課題: ブログのモックアップを作成
|
|
|
|
|
|
## 学習目標
|
|
|
|
|
|
HTMLの知識を活用して、ブログのホームページ構造を設計・コーディングします。この実践的な課題を通じて、セマンティックHTMLの概念、アクセシビリティのベストプラクティス、プロフェッショナルなコード整理スキルを強化し、ウェブ開発の旅を進めていきます。
|
|
|
|
|
|
**この課題を完了することで、以下を学びます:**
|
|
|
- コーディング前にウェブサイトのレイアウトを計画する練習
|
|
|
- 適切なセマンティックHTML要素の適用
|
|
|
- アクセシブルで構造化されたマークアップの作成
|
|
|
- コメントや整理を活用したプロフェッショナルなコーディング習慣の開発
|
|
|
|
|
|
## プロジェクト要件
|
|
|
|
|
|
### パート1: デザイン計画 (ビジュアルモックアップ)
|
|
|
|
|
|
**以下を含むブログのホームページのビジュアルモックアップを作成してください:**
|
|
|
- サイトタイトルとナビゲーションを含むヘッダー
|
|
|
- 少なくとも2〜3つのブログ投稿プレビューを含むメインコンテンツエリア
|
|
|
- 追加情報 (自己紹介、最近の投稿、カテゴリ) を含むサイドバー
|
|
|
- 連絡先情報やリンクを含むフッター
|
|
|
|
|
|
**モックアップ作成オプション:**
|
|
|
- **手描きスケッチ**: 紙と鉛筆を使用し、デザインを写真撮影またはスキャン
|
|
|
- **デジタルツール**: Figma、Adobe XD、Canva、PowerPoint、または任意の描画アプリケーション
|
|
|
- **ワイヤーフレームツール**: Balsamiq、MockFlow、または類似のワイヤーフレームソフトウェア
|
|
|
|
|
|
**モックアップのセクションにラベルを付けてください** (例: "ヘッダー - `<header>`", "ブログ投稿 - `<article>`")。
|
|
|
|
|
|
### パート2: HTML要素の計画
|
|
|
|
|
|
**モックアップの各セクションを特定のHTML要素にマッピングするリストを作成してください:**
|
|
|
|
|
|
```
|
|
|
Example:
|
|
|
- Site Header → <header>
|
|
|
- Main Navigation → <nav> with <ul> and <li>
|
|
|
- Blog Post → <article> with <h2>, <p>, <time>
|
|
|
- Sidebar → <aside> with <section> elements
|
|
|
- Page Footer → <footer>
|
|
|
```
|
|
|
|
|
|
**含めるべき必須要素:**
|
|
|
HTMLには以下のリストから少なくとも10種類のセマンティック要素を含める必要があります:
|
|
|
- `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<footer>`
|
|
|
- `<h1>`, `<h2>`, `<h3>`, `<p>`, `<ul>`, `<li>`, `<a>`
|
|
|
- `<img>`, `<time>`, `<blockquote>`, `<strong>`, `<em>`
|
|
|
|
|
|
### パート3: HTMLの実装
|
|
|
|
|
|
**以下の基準に従ってブログのホームページをコーディングしてください:**
|
|
|
|
|
|
1. **ドキュメント構造**: 適切なDOCTYPE、html、head、body要素を含める
|
|
|
2. **セマンティックマークアップ**: HTML要素をその目的に応じて使用する
|
|
|
3. **アクセシビリティ**: 画像に適切なaltテキストを含め、リンクテキストを意味のあるものにする
|
|
|
4. **コード品質**: 一貫したインデントと意味のあるコメントを使用する
|
|
|
5. **コンテンツ**: 実際のブログコンテンツを含める (プレースホルダーテキストを使用可能)
|
|
|
|
|
|
**サンプルHTML構造:**
|
|
|
```html
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>My Personal Blog</title>
|
|
|
</head>
|
|
|
<body>
|
|
|
<!-- Main site header -->
|
|
|
<header>
|
|
|
<h1>My Blog Title</h1>
|
|
|
<nav>
|
|
|
<!-- Navigation menu -->
|
|
|
</nav>
|
|
|
</header>
|
|
|
|
|
|
<!-- Main content area -->
|
|
|
<main>
|
|
|
<!-- Blog posts go here -->
|
|
|
</main>
|
|
|
|
|
|
<!-- Sidebar content -->
|
|
|
<aside>
|
|
|
<!-- Additional information -->
|
|
|
</aside>
|
|
|
|
|
|
<!-- Site footer -->
|
|
|
<footer>
|
|
|
<!-- Footer content -->
|
|
|
</footer>
|
|
|
</body>
|
|
|
</html>
|
|
|
```
|
|
|
|
|
|
### パート4: 振り返り
|
|
|
|
|
|
**以下の質問に答える簡単な振り返り (3〜5文) を書いてください:**
|
|
|
- 最も自信を持って使用できたHTML要素は何ですか？
|
|
|
- 計画やコーディング中に直面した課題は何ですか？
|
|
|
- セマンティックHTMLはコンテンツの整理にどのように役立ちましたか？
|
|
|
- 次のHTMLプロジェクトで何を改善したいですか？
|
|
|
|
|
|
## 提出チェックリスト
|
|
|
|
|
|
**提出前に以下を確認してください:**
|
|
|
- [ ] HTML要素にラベルを付けたビジュアルモックアップ
|
|
|
- [ ] 適切なドキュメント構造を持つ完全なHTMLファイル
|
|
|
- [ ] 適切に使用された少なくとも10種類のセマンティックHTML要素
|
|
|
- [ ] コード構造を説明する意味のあるコメント
|
|
|
- [ ] 有効なHTML構文 (ブラウザでテスト済み)
|
|
|
- [ ] 提示された質問に答える振り返り文
|
|
|
|
|
|
## 評価基準
|
|
|
|
|
|
| 基準 | 優秀 (4) | 良好 (3) | 発展途上 (2) | 初歩的 (1) |
|
|
|
|------|----------|----------|--------------|------------|
|
|
|
| **計画とデザイン** | レイアウトとHTMLセマンティック構造を明確に理解した詳細で適切にラベル付けされたモックアップ | ほとんどのセクションが適切にラベル付けされた明確なモックアップ | 一部ラベル付けされた基本的なモックアップ、一般的な理解を示す | 最小限または不明瞭なモックアップ、適切なセクション識別が欠けている |
|
|
|
| **セマンティックHTMLの使用** | 10種類以上のセマンティック要素を適切に使用し、HTML構造とアクセシビリティの深い理解を示す | 8〜9種類のセマンティック要素を正しく使用し、セマンティックマークアップの良好な理解を示す | 6〜7種類のセマンティック要素を使用し、適切な使用に関する混乱がある | 6種類未満の要素を使用するか、セマンティック要素を誤用している |
|
|
|
| **コード品質と整理** | 非常に整理された、適切にインデントされたコードで包括的なコメントと完璧なHTML構文 | 整理されたコードで良好なインデント、役立つコメント、有効な構文 | ほとんど整理されたコードで一部コメント、軽微な構文問題 | 整理が不十分、コメントが最小限、複数の構文エラー |
|
|
|
| **アクセシビリティとベストプラクティス** | 優れたアクセシビリティの考慮、意味のあるaltテキスト、適切な見出し階層、すべての最新HTMLベストプラクティスに従う | 良好なアクセシビリティ機能、適切な見出しとaltテキストの使用、ほとんどのベストプラクティスに従う | 一部のアクセシビリティの考慮、基本的なaltテキストと見出し構造 | 限られたアクセシビリティ機能、不適切な見出し構造、ベストプラクティスに従っていない |
|
|
|
| **振り返りと学習** | HTMLの概念に関する深い理解と学習プロセスの思慮深い分析を示す洞察に満ちた振り返り | 主要な概念の理解を示し、学習に関する自己認識を含む良好な振り返り | HTMLの概念や学習プロセスに関する洞察が限られた基本的な振り返り | 最小限または欠けている振り返り、学んだ概念に関する理解がほとんどない |
|
|
|
|
|
|
## 学習リソース
|
|
|
|
|
|
**必須参考資料:**
|
|
|
- [MDN HTML要素リファレンス](https://developer.mozilla.org/docs/Web/HTML/Element) - HTML要素の完全ガイド
|
|
|
- [HTML5セマンティック要素](https://developer.mozilla.org/docs/Web/HTML/Element#content_sectioning) - セマンティックマークアップの理解
|
|
|
- [ウェブアクセシビリティガイドライン](https://www.w3.org/WAI/WCAG21/quickref/) - アクセシブルなウェブコンテンツの作成
|
|
|
- [HTMLバリデーター](https://validator.w3.org/) - HTML構文をチェック
|
|
|
|
|
|
**成功のためのプロのヒント:**
|
|
|
- コーディングを始める前にモックアップを作成する
|
|
|
- ブラウザの開発者ツールを使用してHTML構造を確認する
|
|
|
- CSSを使用せずに異なる画面サイズでページをテストする
|
|
|
- HTMLを声に出して読んで、構造が論理的に意味をなしているか確認する
|
|
|
- スクリーンリーダーがページ構造をどのように解釈するかを考慮する
|
|
|
|
|
|
> 💡 **覚えておいてください**: この課題はHTMLの構造とセマンティクスに焦点を当てています。視覚的なスタイリングについて心配する必要はありません。それはCSSの役割です！ページはシンプルに見えるかもしれませんが、構造がしっかりしていて意味のあるものにすることが重要です。
|
|
|
|
|
|
---
|
|
|
|
|
|
**免責事項**:
|
|
|
この文書はAI翻訳サービス[Co-op Translator](https://github.com/Azure/co-op-translator)を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてお考えください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤認について、当方は責任を負いません。 |
