HTML・CSS資料の調整をしてみる

[seri-jig]

Claudeを使う前提ということで、知識の資料としてどっちが見やすいかという観点で比べていただくとよいかもです🙏

[seri-jig]

@copilot
MRの内容をコメントしてくれない？ これまでとの違いも

[Copilot]

@copilot
MRの内容をコメントしてくれない？ これまでとの違いも

このPRの内容は以下の2コミットで構成されています。

---

コミット1: docs: ミニ演習みたいな内容を追加した

html-css/DOCS_DRAFT.md を新規作成しました（1020行）。

HTML/CSSのチュートリアル資料で、以下の章立てになっています：

1. HTML/CSSを観察してみよう（開発者ツールの使い方）
2. ページを作ってみよう（HTML基礎・構造・各種タグ）
3. レイアウトとデザインを考えよう（CSS・ボックスモデル・Flexbox・Grid）
4. ページに変更を加えよう（フォーム・JavaScript連携・CSSアニメーション）
5. 発展: VisBugを使ってみよう
6. 練習用ゲーム
7. 終わりに / 参考文献

各セクションに Try（ハンズオン演習） と 発展（深掘り解説） が含まれています。

---

コミット2: docs: 外部コンテンツ系を調整

セクション6「練習用ゲーム」を改修しました。

項目	変更前	変更後
セクション名	6. 練習用ゲーム	6. Challenge: 外部で練習する
説明文	「ここまでに学んだレイアウトを、ゲームで練習できます。」	「ここまでの内容を終えた人は、外部コンテンツでさらに練習してみましょう。すべて任意の Challenge です。」
テーブル列	2列（学ぶ内容 / ゲーム）	3列（Challenge / 対象 / 取り組み方）
コンテンツ内容	CSS Grid・Flexboxの2つ	HTML Master（HTMLの基本タグ）・Flexbox Froggy・Grid Gardenの3つに拡充
取り組み方	記載なし	各コンテンツに具体的な目標（例: 「レベル1〜10をクリアする」）を追加

主な変化としては、「ゲームで遊ぶ」というトーンから「任意の Challenge として外部コンテンツで練習する」という位置付けに変わり、HTMLの練習コンテンツが追加されたことで、CSS以外もカバーできるようになっています。

[seri-jig]

@rough-github
レビューお願いします🙏

[Copilot]

Pull request overview

HTML/CSS 学習資料のリニューアルに向けて、方針メモ（RENEWAL）と新しいドラフト本文（DOCS_DRAFT）を追加し、ドラフト内で参照するスクリーンショット画像も追加するPRです。

Changes:

• html-css/DOCS.md リニューアルの方針・課題を整理したメモ（RENEWAL）を追加
• リニューアル後の本文ドラフト（DOCS_DRAFT）を追加
• ドラフト内で参照する画像（font-family サンプル）を追加

Reviewed changes

Copilot reviewed 2 out of 3 changed files in this pull request and generated 3 comments.

File	Description
html-css/RENEWAL.md	リニューアル方針・課題・次ステップを整理したメモを追加
html-css/DOCS_DRAFT.md	新しい教材ドラフト本文（目次・手順・サンプルコード）を追加
html-css/imgs/css-font-family-sample.png	ドラフト内で利用するスクリーンショット画像を追加

Comments suppressed due to low confidence (2)

html-css/DOCS_DRAFT.md:893

• この例だと \n を追加しても通常のHTMLレンダリングでは改行表示されず、メッセージが1行に連結されて見えます。学習者が意図通りの見た目を得られるよう、<pre>/white-space の指定か、<br> を挿入する実装に変更するのが安全です。

const updateMessage = function () {
  clickCount++;
  messages.innerText += `${clickCount}回クリックされました。\n`;
};

html-css/DOCS_DRAFT.md:915

• 4-2-1 の例と同様に、このままだと \n がHTML上で改行として表示されません。上の節と整合するように textContent を使う（または <pre>/white-space を併記する）形に揃えると混乱が減ります。

const updateMessage = function () {
  clickCount++;
  messages.innerText += `${clickCount}回クリックされました。\n`;
  messages.style.backgroundColor = colorList[clickCount % 3];
};

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.