⬅ ギャラリーに戻る
✏️ '
info.html
' を修正中... (終わったら保存を押してね)
📷 素材アップロード
アップロード
🛠️ プログラム作成
[修正モード]
ファイル名:
.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Uzero Kids Programming Center</title> <style> :root { --bg-color: #f0f4f8; --text-color: #334e68; --accent-color: #333; --reno: #ff6b6b; --kio: #4ecdc4; --soyo: #ffe66d; --izu: #1a535c; } body { font-family: 'Helvetica Neue', Arial, sans-serif; background-color: var(--bg-color); color: var(--text-color); margin: 0; padding: 20px; line-height: 1.6; } .container { max-width: 900px; margin: 0 auto; background: white; padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } h1 { text-align: center; font-size: 2.5rem; margin-bottom: 10px; color: var(--accent-color); } .subtitle { text-align: center; margin-bottom: 40px; color: #666; } /* 使い方ステップ */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 50px; border-bottom: 2px dashed #ddd; padding-bottom: 40px; } .step { background: #f8f9fa; padding: 20px; border-radius: 10px; text-align: center; } .step-icon { font-size: 3rem; margin-bottom: 10px; display: block; } .step h3 { margin: 10px 0; color: #333; } .step p { font-size: 0.9rem; color: #666; } /* メンバーボタン */ h2 { text-align: center; margin-bottom: 30px; } .members { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (max-width: 600px) { .members { grid-template-columns: 1fr; } } .btn { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 150px; border-radius: 15px; color: white; text-decoration: none; font-size: 1.8rem; font-weight: bold; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.1); position: relative; overflow: hidden; } .btn span { font-size: 0.8rem; font-weight: normal; margin-top: 5px; opacity: 0.9; } .btn:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); } .reno { background: linear-gradient(135deg, #ff6b6b, #ee5253); } .kio { background: linear-gradient(135deg, #4ecdc4, #22a6b3); color: #fff; } .soyo { background: linear-gradient(135deg, #ffe66d, #f7d794); color: #333; } .izu { background: linear-gradient(135deg, #1a535c, #2d3436); } /* ルール */ .rules { margin-top: 50px; background: #fff3cd; padding: 20px; border-radius: 10px; border-left: 5px solid #ffc107; } .rules h3 { margin-top: 0; color: #856404; } .rules ul { margin: 0; padding-left: 20px; color: #856404; } </style> </head> <body> <div class="container"> <h1>Uzero Kids Programming</h1> <p class="subtitle">AIと一緒に、自分だけのWebサイトを作ろう!</p> <div class="steps"> <div class="step"> <span class="step-icon">🤖</span> <h3>1. Geminiに頼む</h3> <p>「自己紹介のページを作って」「時計をHTMLで作って」「計算機をHTMLで作って」とGeminiにお願いして、コードをコピーしよう。</p> </div> <div class="step"> <span class="step-icon">🚀</span> <h3>2. 自分の部屋へ</h3> <p>下のボタンから自分のページへ移動しよう。</p> </div> <div class="step"> <span class="step-icon">💾</span> <h3>3. ペースト&保存</h3> <p>コードを貼り付けて、英語で名前をつけて「保存」!これだけで世界に公開されるよ。</p> </div> </div> <h2>👇 誰がプログラミングする?</h2> <div class="members"> <a href="https://reno.uzero.style" class="btn reno"> Reno <span>レノの部屋へ</span> </a> <a href="https://kio.uzero.style" class="btn kio"> Kio <span>キオの部屋へ</span> </a> <a href="https://soyo.uzero.style" class="btn soyo"> Soyo <span>ソヨの部屋へ</span> </a> <a href="https://izu.uzero.style" class="btn izu"> Izu <span>イズの部屋へ</span> </a> </div> <div class="rules"> <h3>⚠️ プログラマーの掟(ルール)</h3> <ul> <li>人の作品を勝手に消さないこと。</li> <li>ファイル名は必ず「半角英数字(abc...)」を使うこと。</li> <li>動かなくても怒らない。どうして動かないか考えるのがプログラミングだ!</li> </ul> </div> </div> </body> </html>
上書き保存する
キャンセルして新規作成に戻る
📂 APP の作品
おぱモンっち育成
1.html (02/19 21:57)
✏️ 修正
🌏 公開
🗑️
Uzero Kids Programming Center
info.html (01/05 14:56)
✏️ 修正
🌏 公開
🗑️