ツムピロのキラキラプログラミング工房！✨
うえとGrokちゃんが、超初心者にコードを学びながらキラキラページを教えるよ！プラモみたいに組み立てよう！
ステップ1：メモ帳でスタート！
Grokちゃん：メモ帳を開いて！Windowsなら「メモ帳」、Macなら「テキストエディット」だよ！✨
メモ帳はテキストを書くソフト！これでコードを作るよ！
ステップ2：基本のHTMLを学ぼう！
Grokちゃん：これがページの骨組み！✨
これがプログラムだよ！✨ コピペして使ってみてね！
プログラム：ページの骨組み
これで何ができる？ ウェブページの基本ができるよ！
コードの役割：
- <html>：ページの土台！全部を包むよ！
- <body>：中身！ここに見出しや文字を！
- <h1>：大きな見出し！目立たせるよ！
ステップ3：タイトルをつけよう！
Grokちゃん：タイトルでタブをキラキラ！✨
これがプログラムだよ！✨ コピペして使ってみてね！
プログラム：タブのタイトル
これで何ができる？ ブラウザのタブに名前が！
タイトルはブラウザのタブに表示！君のページの名前だよ！
ステップ4：色を変えよう！
Grokちゃん：CSSで色をキラキラに！<head>にこのプログラムを！✨
これがプログラムだよ！✨ コピペして使ってみてね！
プログラム：文字の色
これで何ができる？ 見出しがピンクに！
colorは文字の色！#ff69b4でピンクに！好きな色を選んで！
色を選んで！
ステップ5：組み立ててキラキラに！
Grokちゃん：<h1>＋CSSでキラキラタイトル！✨
これがプログラムだよ！✨ コピペして使ってみてね！
プログラム：キラキラアニメーション
これで何ができる？ 見出しがキラキラ光る！
コードの役割：
- text-shadow：キラキラ光る影！
- animation：動く魔法！neonGlowで光が変化！
ステップ6：ブラウザで感動！
Grokちゃん：index.htmlを保存して、ダブルクリック！キラキラページ完成！✨
ブラウザは.htmlをキラキラに変える！君の作品だよ！
やり方：
1. メモ帳にステップ2～5のコードをコピー！
2. 「名前をつけて保存」で「index.html」に！
3. ファイルをダブルクリックしてブラウザでキラキラをチェック！✨
ステップ7：バックアップでキラキラを守ろう！✨
Grokちゃん：せっかくのキラキラページ、消えたら悲しい！😢 バックアップで守るよ！
バックアップの大切さ：
うえの実話！「夜中の3時にキラキラページ作ったのに、間違えて上書き…涙！別の人は日本語名キラキラ.htmlで保存したら動かず…。保存忘れでPCクラッシュも！でも、バックアップで守れたよ！✨」
データ消滅は勉強だけど、Grokちゃんと防ごう！
保存のコツ
- 名前をつけて保存：ファイルはindex.html、半角英数で！日本語だとブラウザが「？」ってなるよ！
- 上書き保存vs新規保存：上書きは前のを書き換え！新しいページは「名前をつけて保存」で別ファイルに！例：index2.html
- バックアップ：フォルダをコピー！USBやクラウド（Google Drive）に保存してね！
バックアップはプラモの箱をコピー！キラキラページを安全に！