Studio - APP

📷 素材アップロード

🛠️ プログラム作成 [修正モード]

ファイル名: .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)

✏️ 修正