最終課題
オリジナルサイトを作ろう！
4日間で学んだHTMLの知識を総動員して、あなただけのオリジナルWebサイトを作成しましょう。 テーマは自由！自分らしさを表現してください。
テーマのアイデア
👤
自己紹介サイト
あなた自身を紹介するサイト
🏪
架空のお店
カフェ、レストラン、雑貨店など
🎮
趣味の紹介
ゲーム、音楽、映画など
📚
情報サイト
好きなテーマの情報まとめ
必須要素チェックリスト
以下の要素を全て含めてください。
📄 基本構造
- 正しいHTML5構造（DOCTYPE, html, head, body）
- 適切なメタタグ（charset, viewport）
- descriptionメタタグ
- ページタイトル（<title>）
🏗️ セマンティック要素
- header, main, footer タグ
- nav タグでナビゲーション
- section または article タグ
- 適切な見出し階層（h1→h2→h3）
📝 コンテンツ要素
- h1見出しは1つだけ
- 画像を3つ以上（alt属性付き）
- リンクを2つ以上
- リスト（ul または ol）を1つ以上
📮 フォーム要素
- お問い合わせフォーム
- label と input の紐づけ
- required 属性で必須項目指定
- 適切な input type 使用
制作のヒント
🎨 画像素材
無料で使える画像サービス：
- •
https://picsum.photos/400/300 - •
https://picsum.photos/id/番号/幅/高さ
🔗 便利なリンク先
- •
#セクション名でページ内リンク - • SNSへのリンク（Twitter, Instagram等）
- • Google マップへのリンク
📱 レスポンシブ対応
viewport メタタグを忘れずに！
<meta name="viewport" content="width=device-width, initial-scale=1.0">
♿ アクセシビリティ
- • 全ての画像に alt 属性
- • フォームに label を紐づけ
- • 見出しの階層を守る
※ダウンロードしてから完了ボタンを押すことをお勧めします