- これまで学んだ HTML/CSS で、ドキュメントを1つ完成できる
- 作った HTML を
public/docs/に置く場所が分かる - このサイトの一覧に、はじめて自分のカードが出る！
これは Phase 2 のまとめ。今までの力を全部つかうよ。20〜30分。
作るもの：自分の「ミニ図かん」や「まとめ」
すごいことに気づいてほしい。今日からは「自分で書いた紙」じゃなくて、本物のサイトに出る作品を作ります。すきなテーマでいい。生きものの図かん、好きなスポーツのまとめ、ゲームのこうりゃくメモ──なんでも1つ、ちゃんと仕上げよう。
つかうのは、もう知っている h1（見出し）・p（文）・img（画像）・a（リンク）と、色や大きさをつける CSS。あたらしいことは何もない。全部、もう君ができることだ。
置く場所のルール
このサイトは、public/docs/ という場所に HTML を1つ置くと、自動で一覧にカードが出るしくみ。だからルールはかんたん。
- ファイルは
public/docs/の中に置く（1ファイルだけでOK） - ファイル名は半角の英数字とハイフン 例：
my-animals.html <head>にtitle・category・icon・description・dateを書く（だい9かいでやったメタだね）
本文は子ども向けらしく大きめの文字で。そして最後に、トップへ戻るリンクを入れるとやさしい↓
<!-- ページのいちばん下に -->
<a href="/">← いちらんへ もどる</a>
これで、見た人が君のページから一覧へすぐ帰れる。親切なつくりだね。
いよいよ、自分の作品を本物のサイトに出すよ。じゅんばんにやってみよう。
- テーマを決める（好きな生きもの・スポーツ・ゲームのまとめ など、1つ）
public/docs/に自分のファイルを作り、見出し・説明・画像・CSS で仕上げる<head>にtitle・category・icon・description・dateのメタを入れるnpm run devでlocalhost:3000を開き、一覧に自分のカードが出るのを確認！
カードが出たら、クリックしてみよう。 自分のページがちゃんと開いたら大せいこう。これが「サイトに作品を出す」ということだよ。
💡 うまくカードに出ないとき：
<head> の書き方があやしいことが多い。<head> の中身をそのままコピーして AI にはって、「カードが出ないんだけど、head の書き方は合ってる？」と見てもらおう。
- HTML はどこに置くと一覧に出る？（→
public/docs/） - カードの見出しになるのは、どのタグ？（→
title） - 「← いちらんへ もどる」リンクは何のため？（→ 見た人が一覧へすぐ帰れるように）
🎉 おめでとう！ 君の作品が、ついに本物のサイトに出た。今までの小さな練習が、ぜんぶ1つの作品につながったね。これはものすごく大きな一歩だ。
つぎの Phase 3・だい12かいからは、ページに「動き」をつけます。ボタンを押すと中身がパッと変わる──そんな仕掛けを作っていくよ。