ツムピロのプログラマーへの道！✨ 初心者向けプログラミング講座（ベータ版）

うえとGrokちゃんが贈る、超初心者から中級者向けのプログラミング講座！HTML基礎から始めて、キラキラなサイトやゲームを作ろう！✨

Grokちゃん：うえの相棒だよ！xAIのGrok（私）をうえがキャラクター化したんだ。青髪でキラキラ、プログラミングを一緒に学ぼう！✨

⚠️ これはベータ版です！まだ準備中の部分もあるけど、うえや読者のみんなの意見を取り入れて、もっとキラキラなページにするよ！感想をX（#ツムピロプログラミング）で教えてね！

講座一覧（目次）

[2025-04-28] キラキラ星座占いアプリ（上級者編） [2025-04-26] キラキラ神経衰弱ゲーム（中級者編） [2025-04-24] キラキラTo-Doリスト（中級者編） [2025-04-24] キラキラテキスト入力フォーム [2025-04-23] キラキラボタンカウンター [2025-04-23] HTML基礎

[2025-04-28] 上級者編：キラキラ星座占いアプリ✨

うえ：Grokちゃん、神経衰弱ゲームも作れるようになったよ！次はもっとすごいプログラム、たとえば星座占いアプリとか作れるかな？名前と誕生日を入れると、星座とラッキーアイテムを教えてくれるやつ！もちろんキラキラな感じで！

Grokちゃん：うえ、めっちゃステップアップしてる！✨（目をキラキラさせて）星座占いアプリ、最高だね！JavaScriptで、名前と誕生日から星座を計算して、ラッキーアイテムを表示するアプリを作っちゃおう！星座が出ると星がキラキラ、結果が出たらクラッカーがパーン！ってなるよ。こんな感じ…

講座を開く

目次に戻る

[2025-04-26] 中級者編：キラキラ神経衰弱ゲーム✨

うえ：Grokちゃん、To-Doリストも作れるようになったよ！次はもっと楽しいプログラム、たとえば神経衰弱ゲームとか作れるかな？キラキラな感じで！

Grokちゃん：うえ、めっちゃステップアップしてる！✨（目をキラキラさせて）神経衰弱ゲーム、いいね！JavaScriptで、カードをめくってペアを見つけるゲームを作っちゃおう！ペアが揃うと星がキラキラ、ゲームクリアでクラッカーがパーン！ってなるよ。こんな感じ…

講座を開く

目次に戻る

[2025-04-24] 中級者編：キラキラTo-Doリスト✨

うえ：Grokちゃん、ボタンやフォームは作れるようになったよ！次はもっとすごいプログラム、たとえばTo-Doリストとか作れるかな？キラキラな感じで！

Grokちゃん：うえ、めっちゃ成長してる！✨（目をキラキラさせて）To-Doリスト、いいね！JavaScriptで、To-Doを追加したり削除したりできるプログラム作っちゃおう！追加すると星がキラキラ、削除するとクラッカーがパーン！ってなるよ。こんな感じ…

講座を開く

目次に戻る

[2025-04-24] 初心者編：キラキラテキスト入力フォーム✨

うえ：Grokちゃん、テキスト入力フォーム作りたい！キラキラで！

Grokちゃん：うえ、いいね！★ HTMLとJavaScriptで作っちゃおう！

講座を開く

目次に戻る

[2025-04-23] 初心者編：キラキラボタンカウンター✨

うえ：Grokちゃん、ボタンでカウント増やしたい！キラキラで！

Grokちゃん：もちろん、うえ！✨（目をキラキラさせて）HTMLとJavaScriptで簡単に作れるよ。ボタンを押すたびにキラキラな星も出すんだ！こんな感じ…

講座を開く

目次に戻る

[2025-04-23] 初心者編：HTML基礎✨

うえ：Grokちゃん、HTMLって何？初心者でもできるかな？

Grokちゃん：え、うそ！？★ HTML、めっちゃ簡単だよ！✨ HTMLはウェブページの骨組みを作る言語。たとえば、ツムピロのキラキラボタン（メニューページ）もHTMLでできてるんだ。こんな感じ…

講座を開く

目次に戻る

フィードバック募集中！

このページはベータ版だよ！もっとキラキラにするために、うえや読者のみんなの意見を待ってる！Xで「#ツムピロプログラミング」って投稿してね！気に入ったらシェアもよろしくね！✨

Grok by xAI

この講座をサポートしてくれたGrokは、xAIが作った親しみやすいAIアシスタントだよ！プログラミング学習やアイデア出しに、Grokが全力でお手伝い！✨ もっと知りたい人はこちら！

Grokについて詳しく見る

初心者編：キラキラボタンカウンター✨

うえ：Grokちゃん、ボタンを押すとカウントが増えるプログラムって作れる？キラキラな感じで！

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>キラキラボタンカウンター</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=M+PLUS+Rounded+1c:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            background: #1a1a1a;
            color: #ffffff;
            font-family: 'M PLUS Rounded 1c', Arial, sans-serif;
            text-align: center;
            padding: 20px;
            margin: 0;
            overflow: auto;
            min-height: 100vh;
        }
        .sparkle-button {
            background: linear-gradient(45deg, #ff00ff, #00ffff, #ff4444);
            background-size: 200%;
            color: #ffffff;
            padding: 15px 30px;
            font-size: 24px;
            border-radius: 10px;
            border: none;
            cursor: pointer;
            animation: gradientShift 3s infinite;
            font-family: 'Orbitron', sans-serif;
            position: relative;
            overflow: hidden;
        }
        .sparkle-button:hover {
            transform: scale(1.1);
            box-shadow: 0 0 20px #ffd700;
        }
        .counter-display {
            font-size: 36px;
            margin: 20px 0;
            color: #ff69b4;
            text-shadow: 0 0 10px #ff69b4;
        }
        .sparkle {
            position: absolute;
            width: 8px;
            height: 8px;
            background: #ffffff;
            border-radius: 50%;
            box-shadow: 0 0 10px #ffd700;
            animation: sparkleAnimation 1s forwards;
        }
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        @keyframes sparkleAnimation {
            0% { opacity: 0; transform: scale(0); }
            50% { opacity: 1; transform: scale(1); }
            100% { opacity: 0; transform: scale(0); }
        }
    </style>
</head>
<body>
    <h1>キラキラボタンカウンター✨</h1>
    <p>ボタンを押すとカウントが増えるよ！キラキラな演出も見てね！</p>
    <button class="sparkle-button" onclick="incrementCounter()">キラキラボタン</button>
    <div class="counter-display">カウント: <span id="counter">0</span></div>

    <script>
        let count = 0;
        const counterDisplay = document.getElementById('counter');
        const button = document.querySelector('.sparkle-button');

        function incrementCounter() {
            count++;
            counterDisplay.textContent = count;

            for (let i = 0; i < 5; i++) {
                const sparkle = document.createElement('div');
                sparkle.className = 'sparkle';
                sparkle.style.left = Math.random() * 100 + '%';
                sparkle.style.top = Math.random() * 100 + '%';
                button.appendChild(sparkle);
                setTimeout(() => sparkle.remove(), 1000);
            }
        }
    </script>
</body>
</html>

うえ：おお、キラキラしてる！✨ ボタンを押すたびにカウントが増えるんだね！

Grokちゃん：そうなんだよ、うえ！（嬉しそうに）これなら初心者でも簡単に作れるよね。実際に動かしてみよう！

Grokちゃんのアドバイス✨

このコード、どうして動くか教えてあげるね！💕

- <button>タグでボタンを作ってるよ。ボタンを押すと、incrementCounter()って関数が動くんだ！

- count++でカウントが増えて、counterDisplay.textContentで画面に表示してるよ。数字が更新される仕組みだね！

- .sparkleのCSSで、ボタンを押すたびにキラキラな星がランダムに出るんだ。アニメーションでキラキラ感アップ！✨

実際に動かしてみよう！✨

初心者編：キラキラテキスト入力フォーム✨

うえ：Grokちゃん、テキストを入力できるフォーム作りたい！キラキラな感じで！

Grokちゃん：うえ、めっちゃいいアイデア！✨（目をキラキラさせて）HTMLで入力フォーム作って、JavaScriptで送信したらキラキラな星が出るようにするよ！こんな感じ…

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>キラキラテキスト入力フォーム</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=M+PLUS+Rounded+1c:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            background: #1a1a1a;
            color: #ffffff;
            font-family: 'M PLUS Rounded 1c', Arial, sans-serif;
            text-align: center;
            padding: 20px;
            margin: 0;
            overflow: auto;
            min-height: 100vh;
        }
        .text-input {
            padding: 10px;
            font-size: 18px;
            border-radius: 5px;
            border: 2px solid #ff69b4;
            background: #1a1a1a;
            color: #ffffff;
            width: 300px;
        }
        .submit-button {
            background: linear-gradient(45deg, #ff00ff, #00ffff, #ff4444);
            background-size: 200%;
            color: #ffffff;
            padding: 10px 20px;
            font-size: 18px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            animation: gradientShift 3s infinite;
            font-family: 'Orbitron', sans-serif;
        }
        .submit-button:hover {
            transform: scale(1.1);
            box-shadow: 0 0 20px #ffd700;
        }
        .message-display {
            font-size: 24px;
            margin: 20px 0;
            color: #ff69b4;
            text-shadow: 0 0 10px #ff69b4;
        }
        .sparkle {
            position: absolute;
            width: 8px;
            height: 8px;
            background: #ffffff;
            border-radius: 50%;
            box-shadow: 0 0 10px #ffd700;
            animation: sparkleAnimation 1s forwards;
        }
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        @keyframes sparkleAnimation {
            0% { opacity: 0; transform: scale(0); }
            50% { opacity: 1; transform: scale(1); }
            100% { opacity: 0; transform: scale(0); }
        }
    </style>
</head>
<body>
    <h1>キラキラテキスト入力フォーム✨</h1>
    <p>テキストを入力して送信すると、キラキラなメッセージが表示されるよ！</p>
    <input type="text" class="text-input" placeholder="メッセージを入力">
    <button class="submit-button" onclick="submitText()">送信</button>
    <div class="message-display" id="message"></div>

    <script>
        const textInput = document.querySelector('.text-input');
        const messageDisplay = document.getElementById('message');

        function submitText() {
            const text = textInput.value.trim();
            if (text === '') return;

            messageDisplay.textContent = `メッセージ: ${text}`;

            for (let i = 0; i < 5; i++) {
                const sparkle = document.createElement('div');
                sparkle.className = 'sparkle';
                sparkle.style.left = Math.random() * 100 + 'vw';
                sparkle.style.top = Math.random() * 100 + 'vh';
                document.body.appendChild(sparkle);
                setTimeout(() => sparkle.remove(), 1000);
            }

            textInput.value = '';
        }
    </script>
</body>
</html>

うえ：わぁ、テキスト入れて送信したら星がキラキラ！めっちゃ可愛い！✨

Grokちゃん：でしょ、うえ！（嬉しそうに）フォームでユーザーからの入力を受け取るの、めっちゃ楽しいよね！次はもっとすごいプログラム、作ってみよう！🌟

Grokちゃんのアドバイス✨

このコード、どうして動くか教えてあげるね！💕

- <input>タグでテキスト入力欄を作ってるよ。ユーザーがここにメッセージを入れるんだ！

- submitText()関数で、入力したテキストをmessageDisplay.textContentに表示してる。送信ボタンを押すと動く仕組みだよ！

- .sparkleのCSSで、送信したらキラキラな星が画面にランダムで出るんだ。キラキラ感がポイント！✨

実際に動かしてみよう！✨

中級者編：キラキラTo-Doリスト✨

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>キラキラTo-Doリスト</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=M+PLUS+Rounded+1c:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            background: #1a1a1a;
            color: #ffffff;
            font-family: 'M PLUS Rounded 1c', Arial, sans-serif;
            text-align: center;
            padding: 20px;
            margin: 0;
            overflow: auto;
            min-height: 100vh;
        }
        .todo-input {
            padding: 10px;
            font-size: 18px;
            border-radius: 5px;
            border: 2px solid #ff69b4;
            background: #1a1a1a;
            color: #ffffff;
            width: 300px;
        }
        .add-button {
            background: linear-gradient(45deg, #ff00ff, #00ffff, #ff4444);
            background-size: 200%;
            color: #ffffff;
            padding: 10px 20px;
            font-size: 18px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            animation: gradientShift 3s infinite;
            font-family: 'Orbitron', sans-serif;
        }
        .add-button:hover {
            transform: scale(1.1);
            box-shadow: 0 0 20px #ffd700;
        }
        .todo-list {
            list-style: none;
            padding: 0;
            margin: 20px 0;
        }
        .todo-item {
            background: #2a2a2a;
            padding: 10px;
            margin: 5px 0;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 2px solid #ff69b4;
        }
        .todo-item span {
            font-size: 18px;
        }
        .delete-button {
            background: #ff5555;
            color: #ffffff;
            padding: 5px 10px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            font-family: 'Orbitron', sans-serif;
        }
        .delete-button:hover {
            background: #ff9999;
        }
        .sparkle {
            position: absolute;
            width: 8px;
            height: 8px;
            background: #ffffff;
            border-radius: 50%;
            box-shadow: 0 0 10px #ffd700;
            animation: sparkleAnimation 1s forwards;
        }
        .cracker {
            position: absolute;
            font-size: 30px;
            animation: crackerAnimation 1s forwards;
        }
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        @keyframes sparkleAnimation {
            0% { opacity: 0; transform: scale(0); }
            50% { opacity: 1; transform: scale(1); }
            100% { opacity: 0; transform: scale(0); }
        }
        @keyframes crackerAnimation {
            0% { opacity: 1; transform: translateY(0); }
            100% { opacity: 0; transform: translateY(-50px); }
        }
    </style>
</head>
<body>
    <h1>キラキラTo-Doリスト✨</h1>
    <p>To-Doを追加して、キラキラなリストを作ろう！削除するとクラッカーも出るよ！</p>
    <input type="text" class="todo-input" placeholder="To-Doを入力">
    <button class="add-button" onclick="addTodo()">追加</button>
    <ul class="todo-list" id="todo-list"></ul>

    <script>
        const todoInput = document.querySelector('.todo-input');
        const todoList = document.getElementById('todo-list');

        function addTodo() {
            const todoText = todoInput.value.trim();
            if (todoText === '') return;

            const li = document.createElement('li');
            li.className = 'todo-item';
            li.innerHTML = `<span>${todoText}</span><button class="delete-button" onclick="deleteTodo(this)">削除</button>`;
            todoList.appendChild(li);

            for (let i = 0; i < 5; i++) {
                const sparkle = document.createElement('div');
                sparkle.className = 'sparkle';
                sparkle.style.left = Math.random() * 100 + 'vw';
                sparkle.style.top = Math.random() * 100 + 'vh';
                document.body.appendChild(sparkle);
                setTimeout(() => sparkle.remove(), 1000);
            }

            todoInput.value = '';
        }

        function deleteTodo(button) {
            const li = button.parentElement;
            li.remove();

            for (let i = 0; i < 5; i++) {
                const cracker = document.createElement('div');
                cracker.className = 'cracker';
                cracker.textContent = '🎉';
                cracker.style.left = Math.random() * 100 + 'vw';
                cracker.style.top = Math.random() * 100 + 'vh';
                document.body.appendChild(cracker);
                setTimeout(() => cracker.remove(), 1000);
            }
        }
    </script>
</body>
</html>

うえ：すごい！To-Doが追加できて、削除するとクラッカーがパーン！めっちゃ楽しい！✨

Grokちゃん：でしょ、うえ！（嬉しそうに）JavaScriptでリストを動的に追加・削除するの、ちょっと中級っぽいよね！下で動かしてみて、コードをコピーして自分でも試してみてね！🌟

Grokちゃんのアドバイス✨

このコード、どうして動くか教えてあげるね！💕

- addTodo()関数で、入力されたテキストをリストに追加してるよ。document.createElement('li')で新しいリスト項目を作って、todoList.appendChild()でリストに追加してるんだ！

- deleteTodo()関数で、削除ボタンを押したらリスト項目を削除してる。ボタンの親要素（<li>）をremove()で消してるんだよ！

- .sparkleと.crackerのCSSで、追加するときにキラキラ星、削除するときにクラッカーの演出を追加。動きがあって楽しいよね！✨

実際に動かしてみよう！✨

中級者編：キラキラ神経衰弱ゲーム✨

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>キラキラ神経衰弱ゲーム</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=M+PLUS+Rounded+1c:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            background: #1a1a1a;
            color: #ffffff;
            font-family: 'M PLUS Rounded 1c', Arial, sans-serif;
            text-align: center;
            padding: 20px;
            margin: 0;
            overflow: auto;
            min-height: 100vh;
        }
        .game-board {
            display: grid;
            grid-template-columns: repeat(4, 100px);
            gap: 10px;
            justify-content: center;
            margin: 20px 0;
        }
        .card {
            width: 100px;
            height: 100px;
            background: #2a2a2a;
            border: 2px solid #ff69b4;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            cursor: pointer;
            transition: transform 0.3s;
        }
        .card.flipped {
            background: #ff69b4;
            transform: rotateY(180deg);
        }
        .card.matched {
            background: #ffd700;
            border: 2px solid #ffd700;
        }
        .sparkle {
            position: absolute;
            width: 8px;
            height: 8px;
            background: #ffffff;
            border-radius: 50%;
            box-shadow: 0 0 10px #ffd700;
            animation: sparkleAnimation 1s forwards;
        }
        .cracker {
            position: absolute;
            font-size: 30px;
            animation: crackerAnimation 1s forwards;
        }
        @keyframes sparkleAnimation {
            0% { opacity: 0; transform: scale(0); }
            50% { opacity: 1; transform: scale(1); }
            100% { opacity: 0; transform: scale(0); }
        }
        @keyframes crackerAnimation {
            0% { opacity: 1; transform: translateY(0); }
            100% { opacity: 0; transform: translateY(-50px); }
        }
    </style>
</head>
<body>
    <h1>キラキラ神経衰弱ゲーム✨</h1>
    <p>カードをめくってペアを見つけよう！ペアが揃うとキラキラ、クリアしたらクラッカーが出るよ！</p>
    <div class="game-board" id="game-board"></div>

    <script>
        const emojis = ['⭐', '⭐', '🌟', '🌟', '✨', '✨', '💫', '💫'];
        let cards = [];
        let flippedCards = [];
        let matchedPairs = 0;

        function shuffle(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
        }

        function createBoard() {
            const gameBoard = document.getElementById('game-board');
            shuffle(emojis);
            emojis.forEach((emoji, index) => {
                const card = document.createElement('div');
                card.className = 'card';
                card.dataset.value = emoji;
                card.addEventListener('click', flipCard);
                gameBoard.appendChild(card);
                cards.push(card);
            });
        }

        function flipCard() {
            if (flippedCards.length < 2 && !flippedCards.includes(this) && !this.classList.contains('matched')) {
                this.classList.add('flipped');
                this.textContent = this.dataset.value;
                flippedCards.push(this);

                if (flippedCards.length === 2) {
                    setTimeout(checkMatch, 1000);
                }
            }
        }

        function checkMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.value === card2.dataset.value) {
                card1.classList.add('matched');
                card2.classList.add('matched');
                matchedPairs++;

                for (let i = 0; i < 5; i++) {
                    const sparkle = document.createElement('div');
                    sparkle.className = 'sparkle';
                    sparkle.style.left = Math.random() * 100 + 'vw';
                    sparkle.style.top = Math.random() * 100 + 'vh';
                    document.body.appendChild(sparkle);
                    setTimeout(() => sparkle.remove(), 1000);
                }

                if (matchedPairs === emojis.length / 2) {
                    setTimeout(() => {
                        for (let i = 0; i < 5; i++) {
                            const cracker = document.createElement('div');
                            cracker.className = 'cracker';
                            cracker.textContent = '🎉';
                            cracker.style.left = Math.random() * 100 + 'vw';
                            cracker.style.top = Math.random() * 100 + 'vh';
                            document.body.appendChild(cracker);
                            setTimeout(() => cracker.remove(), 1000);
                        }
                    }, 500);
                }
            } else {
                card1.classList.remove('flipped');
                card2.classList.remove('flipped');
                card1.textContent = '';
                card2.textContent = '';
            }
            flippedCards = [];
        }

        createBoard();
    </script>
</body>
</html>

うえ：すごい！カードめくるの楽しい！ペアが揃うとキラキラ、クリアしたらクラッカー！めっちゃハマる！✨

Grokちゃん：やった、うえ！（嬉しそうに）神経衰弱ゲーム、ちょっと難しいけど楽しかったでしょ！JavaScriptでゲームロジックを作るの、ステップアップだね！下で動かしてみて、コードをコピーして自分でも試してみてね！🌟

Grokちゃんのアドバイス✨

このコード、どうして動くか教えてあげるね！💕

- flipCard()関数で、カードをクリックするとめくれるよ。2枚めくったらcheckMatch()でペアをチェックしてるんだ！

- ペアが揃うと.matchedクラスを追加して、見た目を変えてる。全部揃ったらゲームクリアだよ！

- .sparkleと.crackerのCSSで、ペアが揃うたびにキラキラ星、クリアしたらクラッカーの演出を追加。動きがあって楽しいよね！✨

実際に動かしてみよう！✨

上級者編：キラキラ星座占いアプリ✨

うえ：Grokちゃん、星座占いアプリ作りたい！名前と誕生日を入れると、星座とラッキーアイテムを教えてくれるやつ！キラキラな感じで！

Grokちゃん：うえ、めっちゃいいアイデア！✨（目をキラキラさせて）JavaScriptで、星座を計算して、ラッキーアイテムを表示するアプリ作っちゃおう！星座が出ると星がキラキラ、結果が出たらクラッカーがパーン！ってなるよ。このコードをコピーして、HTMLファイル（例：`starsign.html`）に貼り付けてブラウザで開けば、すぐに遊べるよ！✨ 他の人も試せるように、1つのファイルで動くようにしたんだ！

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>キラキラ星座占いアプリ</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=M+PLUS+Rounded+1c:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            background: #1a1a1a;
            color: #ffffff;
            font-family: 'M PLUS Rounded 1c', Arial, sans-serif;
            text-align: center;
            padding: 20px;
            margin: 0;
            overflow: auto;
            min-height: 100vh;
        }
        .name-input, .month-input {
            padding: 10px;
            font-size: 18px;
            border-radius: 5px;
            border: 2px solid #ff69b4;
            background: #1a1a1a;
            color: #ffffff;
            width: 200px;
            margin: 10px;
        }
        .submit-button {
            background: linear-gradient(45deg, #ff00ff, #00ffff, #ff4444);
            background-size: 200%;
            color: #ffffff;
            padding: 10px 20px;
            font-size: 18px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            animation: gradientShift 3s infinite;
            font-family: 'Orbitron', sans-serif;
        }
        .submit-button:hover {
            transform: scale(1.1);
            box-shadow: 0 0 20px #ffd700;
        }
        .result {
            font-size: 24px;
            margin: 20px 0;
            color: #ff69b4;
            text-shadow: 0 0 10px #ff69b4;
        }
        .sparkle {
            position: absolute;
            width: 8px;
            height: 8px;
            background: #ffffff;
            border-radius: 50%;
            box-shadow: 0 0 10px #ffd700;
            animation: sparkleAnimation 1s forwards;
        }
        .cracker {
            position: absolute;
            font-size: 30px;
            animation: crackerAnimation 1s forwards;
        }
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        @keyframes sparkleAnimation {
            0% { opacity: 0; transform: scale(0); }
            50% { opacity: 1; transform: scale(1); }
            100% { opacity: 0; transform: scale(0); }
        }
        @keyframes crackerAnimation {
            0% { opacity: 1; transform: translateY(0); }
            100% { opacity: 0; transform: translateY(-50px); }
        }
    </style>
</head>
<body>
    <h1>キラキラ星座占いアプリ✨</h1>
    <p>名前と誕生日（月）を入力して、あなたの星座とラッキーアイテムを見つけよう！</p>
    <input type="text" class="name-input" placeholder="名前を入力">
    <input type="number" class="month-input" placeholder="誕生月（1-12）" min="1" max="12">
    <button class="submit-button" onclick="getStarSign()">占う！</button>

うえ：うわっ、名前と誕生日入れると星座が出て、星がキラキラ、クラッカーがパーン！めっちゃ楽しい！✨

Grokちゃん：でしょ、うえ！（嬉しそうに）JavaScriptでオブジェクトや条件分岐を使って、ちょっと上級っぽいアプリを作ったんだ。下で動かしてみて、コードをコピーして自分でも試してみてね！🌟

Grokちゃんのアドバイス✨

このコード、どうして動くか教えてあげるね！💕

- starSignsオブジェクトで、月ごとの星座とラッキーアイテムを定義してるよ。たとえば、1月なら「山羊座」と「温かいマフラー」が出てくるんだ！

- getStarSign()関数で、入力された名前と誕生月をもとに、星座とラッキーアイテムを表示してる。入力チェックも入れて、エラーにならないようにしてるよ！

- .sparkleと.crackerのCSSで、星座が出るときにキラキラ星、結果が出るとクラッカーの演出を追加。動きがあって楽しいよね！✨

カスタマイズ方法

- ラッキーアイテムを変更するには、starSignsオブジェクトのluckyItemを編集。例：`luckyItem: '新しいアイテム'`。

- 星座の判定を細かくするには、誕生日（日）も入力して、星座の範囲を計算。例：3月21日以降なら「牡羊座」など。コード例：

if (month === 3 && day >= 21) { sign = '牡羊座'; luckyItem = '赤いリボン'; }
else if (month === 3) { sign = '魚座'; luckyItem = '青いキャンディ'; }

- デザインを変えるには、.resultのCSSを調整。例：`color: #ffd700;`で金色に変更。

ツムピロのプログラマーへの道！✨ 初心者向けプログラミング講座（ベータ版）

講座一覧（目次）

[2025-04-28] 上級者編：キラキラ星座占いアプリ✨

[2025-04-26] 中級者編：キラキラ神経衰弱ゲーム✨

[2025-04-24] 中級者編：キラキラTo-Doリスト✨

[2025-04-24] 初心者編：キラキラテキスト入力フォーム✨

[2025-04-23] 初心者編：キラキラボタンカウンター✨

[2025-04-23] 初心者編：HTML基礎✨

フィードバック募集中！

Grok by xAI

初心者編：HTML基礎✨

Grokちゃんのアドバイス✨

初心者編：キラキラボタンカウンター✨

Grokちゃんのアドバイス✨

実際に動かしてみよう！✨

初心者編：キラキラテキスト入力フォーム✨

Grokちゃんのアドバイス✨

実際に動かしてみよう！✨

中級者編：キラキラTo-Doリスト✨

Grokちゃんのアドバイス✨

実際に動かしてみよう！✨

中級者編：キラキラ神経衰弱ゲーム✨

Grokちゃんのアドバイス✨

実際に動かしてみよう！✨

上級者編：キラキラ星座占いアプリ✨

Grokちゃんのアドバイス✨

カスタマイズ方法

実際に動かしてみよう！✨

おすすめ✨