|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
|
|
|
"translation_date": "2025-10-03T09:04:36+00:00",
|
|
|
"source_file": "3-terrarium/1-intro-to-html/assignment.md",
|
|
|
"language_code": "ja"
|
|
|
}
|
|
|
-->
|
|
|
# HTML練習課題: ブログのモックアップを作成
|
|
|
|
|
|
## 目的
|
|
|
|
|
|
個人ブログのホームページのHTML構造を設計し、手書きでコード化します。この演習を通じて、セマンティックHTML、レイアウト設計、コードの整理を練習します。
|
|
|
|
|
|
## 指示
|
|
|
|
|
|
1. **ブログのモックアップをデザインする**
|
|
|
- ブログのホームページの視覚的なモックアップをスケッチします。ヘッダー、ナビゲーション、メインコンテンツ、サイドバー、フッターなどの主要なセクションを含めてください。
|
|
|
- 紙にスケッチしてスキャンするか、デジタルツール（例: Figma、Adobe XD、Canva、またはPowerPoint）を使用して作成してください。
|
|
|
|
|
|
2. **HTML要素を特定する**
|
|
|
- 各セクションで使用する予定のHTML要素をリストアップします（例: `<header>`、`<nav>`、`<main>`、`<article>`、`<aside>`、`<footer>`、`<section>`、`<h1>`–`<h6>`、`<p>`、`<img>`、`<ul>`、`<li>`、`<a>`など）。
|
|
|
|
|
|
3. **HTMLマークアップを書く**
|
|
|
- モックアップのHTMLを手書きでコード化します。セマンティック構造とベストプラクティスに重点を置いてください。
|
|
|
- 少なくとも10種類の異なるHTML要素を含めてください。
|
|
|
- コメントを追加して、選択や構造を説明してください。
|
|
|
|
|
|
4. **課題を提出する**
|
|
|
- スケッチ/モックアップとHTMLファイルをアップロードしてください。
|
|
|
- オプションとして、デザインの決定について簡単な反省（2～3文）を記載してください。
|
|
|
|
|
|
## 評価基準
|
|
|
|
|
|
| 評価項目 | 優秀 | 適切 | 改善が必要 |
|
|
|
|------------------|------------------------------------------------------------------------------------------|------------------------------------------------------------------------------|--------------------------------------------------------------------------------|
|
|
|
| 視覚的モックアップ | 明確で詳細なモックアップ、セクションがラベル付けされ、レイアウトがよく考えられている | 基本的なモックアップ、一部のセクションがラベル付けされている | 最小限または不明瞭なモックアップ、セクションラベルが欠けている |
|
|
|
| HTML要素 | 10種類以上のセマンティックHTML要素を使用し、構造とベストプラクティスを理解している | 5～9種類のHTML要素を使用、一部セマンティック構造がある | 5種類未満の要素を使用、セマンティック構造が欠けている |
|
|
|
| コード品質 | 整理された読みやすいコード、コメント付き、HTML標準に準拠している | 大部分が整理されたコード、コメントが少ない | 整理されていないコード、コメントが欠けている |
|
|
|
| 反省 | デザインの選択や課題について洞察に満ちた反省 | 基本的な反省 | 反省がない、または関連性が欠けている |
|
|
|
|
|
|
## ヒント
|
|
|
|
|
|
- アクセシビリティとSEOを向上させるためにセマンティックHTMLタグを使用してください。
|
|
|
- インデントとコメントを使ってコードを整理してください。
|
|
|
- [MDN HTML要素リファレンス](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)を参考にしてください。
|
|
|
- 今後の課題でレイアウトを拡張したりスタイリングしたりする方法を考えてみてください。
|
|
|
|
|
|
---
|
|
|
|
|
|
**免責事項**:
|
|
|
この文書は、AI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてお考えください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解について、当社は責任を負いません。 |
