<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>英単語学習アプリ</title> <style> body { font-family: sans-serif; background: #f4f6f9; padding: 20px; max-width: 600px; margin: 0 auto; } .card { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); text-align: center; margin-bottom: 20px; } .word { font-size: 2.5rem; font-weight: bold; color: #2c3e50; } .pos { color: #7f8c8d; font-size: 0.9rem; margin-top: 5px; } .meaning { font-size: 1.5rem; color: #e74c3c; margin: 15px 0; display: none; } .example { font-size: 1rem; color: #34495e; background: #f8f9fa; padding: 10px; border-radius: 8px; display: none; margin-top: 10px; } .btn-group { display: flex; gap: 10px; justify-content: center; margin-top: 15px; } button { padding: 10px 20px; font-size: 1rem; border: none; border-radius: 6px; cursor: pointer; transition: 0.2s; } .btn-primary { background: #3498db; color: white; } .btn-secondary { background: #95a5a6; color: white; } .btn-speak { background: #2ecc71; color: white; } button:hover { opacity: 0.9; } </style> </head> <body> <div class="card"> <div id="progress" style="color: #888; font-size: 0.8rem; text-align: right;">1 / 38</div> <div class="word" id="word">have</div> <div class="pos" id="pos">動詞</div> <button class="btn-speak" onclick="speak()">🔊 音声を聴く</button> <div class="meaning" id="meaning">…を持っている、…がある</div> <div class="example" id="example"> <strong>I have two apples.</strong><br> 私はリンゴを2個持っています。 </div> <div class="btn-group"> <button class="btn-secondary" onclick="toggleAnswer()">答えを表示</button> <button class="btn-primary" onclick="nextWord()">次の単語</button> </div> </div> <script> const words = [ { num: 1, word: "have", pos: "動", meaning: "…を持っている、…がある", exEn: "I have two apples.", exJa: "私はリンゴを2個持っています。" }, { num: 2, word: "love", pos: "動", meaning: "…が大好きである、…を愛している", exEn: "I love my dog.", exJa: "私は私のイヌが大好きです。" }, { num: 3, word: "come", pos: "動", meaning: "来る、（相手のところへ）行く", exEn: "How do you come to school?", exJa: "あなたはどのように学校へ来ますか。" }, { num: 4, word: "win", pos: "動", meaning: "（…に）勝つ", exEn: "We want to win the game.", exJa: "私たちは試合に勝ちたいです。" }, { num: 5, word: "study", pos: "動", meaning: "（…を）勉強する、研究する", exEn: "I study English.", exJa: "私は英語を勉強します。" }, { num: 6, word: "play", pos: "動", meaning: "（競技・ゲームなど）をする、（曲・楽器など）を演奏する", exEn: "I can play tennis well.", exJa: "私はじょうずにテニスをすることができます。" }, { num: 7, word: "speak", pos: "動", meaning: "（ある言語を）話す", exEn: "I speak English.", exJa: "私は英語を話します。" }, { num: 8, word: "live", pos: "動", meaning: "住む、住んでいる、生きる、暮らす", exEn: "I live in Canada.", exJa: "私はカナダに住んでいます。" }, { num: 9, word: "drink", pos: "動", meaning: "…を飲む", exEn: "I often drink tea.", exJa: "私はよく紅茶を飲みます。" }, { num: 10, word: "walk", pos: "動", meaning: "（…を）歩く、歩いていく［くる］", exEn: "I walk to school.", exJa: "私は学校へ歩いていきます。" }, { num: 11, word: "read", pos: "動", meaning: "（…を）読む、読んで知る", exEn: "I can read kanji.", exJa: "私は漢字を読むことができます。" }, { num: 12, word: "practice", pos: "動", meaning: "（…を）練習する", exEn: "I practice soccer on Sundays.", exJa: "私は日曜日にサッカーを練習します。" }, { num: 13, word: "watch", pos: "動", meaning: "…を（注意して）見る", exEn: "I want to watch baseball games.", exJa: "私は野球の試合を見たいです。" }, { num: 14, word: "join", pos: "動", meaning: "…に加わる、参加する", exEn: "I want to join the team.", exJa: "私はそのチームに加わりたいです。" }, { num: 15, word: "draw", pos: "動", meaning: "（線画）をかく", exEn: "I often draw comics.", exJa: "私はよくマンガをかきます。" }, { num: 16, word: "thank", pos: "動", meaning: "…に感謝する", exEn: "I want to thank you.", exJa: "私はあなたに感謝したいです。" }, { num: 17, word: "think", pos: "動", meaning: "考える、思う", exEn: "What do you think?", exJa: "あなたはどう思いますか。" }, { num: 18, word: "sing", pos: "動", meaning: "（…を）歌う", exEn: "I usually sing with my friends.", exJa: "私はふつう友達といっしょに歌います。" }, { num: 19, word: "make", pos: "動", meaning: "…を作る、得る", exEn: "My father can make a desk.", exJa: "私の父は机を作ることができます。" }, { num: 20, word: "cook", pos: "動", meaning: "（…を）料理する", exEn: "I often cook yakisoba.", exJa: "私はよく焼きそばを料理します。" }, { num: 21, word: "enjoy", pos: "動", meaning: "…を楽しむ", exEn: "Do you enjoy Japanese food?", exJa: "あなたは日本の食べ物を楽しみますか。" }, { num: 22, word: "go", pos: "動", meaning: "行く", exEn: "I go to school with my sister.", exJa: "私は姉［妹］といっしょに学校に行きます。" }, { num: 23, word: "like", pos: "動", meaning: "…を好む、…が好きである", exEn: "I like apples.", exJa: "私はリンゴが好きです。" }, { num: 24, word: "fan", pos: "名", meaning: "ファン", exEn: "I'm a baseball fan.", exJa: "私は野球ファンです。" }, { num: 25, word: "Japanese", pos: "名", meaning: "日本語、日本人", exEn: "I speak Japanese.", exJa: "私は日本語を話します。" }, { num: 26, word: "America", pos: "名", meaning: "アメリカ（合衆国）", exEn: "He is from America.", exJa: "彼のアメリカ出身です。" }, { num: 27, word: "week", pos: "名", meaning: "週、1週間", exEn: "I can go next week.", exJa: "私は来週、行くことができます。" }, { num: 28, word: "water", pos: "名", meaning: "水", exEn: "I want some water.", exJa: "私は水がいくらかほしいです。" }, { num: 29, word: "friend", pos: "名", meaning: "友達", exEn: "He is my friend.", exJa: "彼は私の友達です。" }, { num: 30, word: "station", pos: "名", meaning: "駅", exEn: "I go to the station by bike.", exJa: "私は駅へ自転車で行きます。" }, { num: 31, word: "fruit", pos: "名", meaning: "果物、果実", exEn: "I love fruit.", exJa: "私は果物が大好きです。" }, { num: 32, word: "bag", pos: "名", meaning: "かばん、バッグ、ふくろ", exEn: "I want a white bag.", exJa: "私は白いかばんがほしいです。" }, { num: 33, word: "shrine", pos: "名", meaning: "神社", exEn: "This is a shrine.", exJa: "これは神社です。" }, { num: 34, word: "number", pos: "名", meaning: "数、数字", exEn: "My favorite number is eight.", exJa: "私のお気に入りの数字は8です。" }, { num: 35, word: "sweet", pos: "名", meaning: "甘い菓子、キャンディー", exEn: "Do you like Japanese sweets?", exJa: "あなたは日本の甘い菓子が好きですか。" }, { num: 36, word: "anime", pos: "名", meaning: "（日本の）アニメ", exEn: "Bob is an anime fan.", exJa: "ボブはアニメのファンです。" }, { num: 37, word: "comic", pos: "名", meaning: "マンガ", exEn: "I love comics.", exJa: "私はマンガが大好きです。" }, { num: 38, word: "lesson", pos: "名", meaning: "授業、レッスン", exEn: "I have a tennis lesson today.", exJa: "私は今日テニスのレッスンがあります。" } ]; let currentIndex = 0; function updateCard() { const item = words[currentIndex]; document.getElementById('progress').innerText = `${item.num} / ${words.length}`; document.getElementById('word').innerText = item.word; document.getElementById('pos').innerText = item.pos === "動" ? "【動詞】" : "【名詞】"; document.getElementById('meaning').innerText = item.meaning; document.getElementById('meaning').style.display = 'none'; document.getElementById('example').innerHTML = `<strong>${item.exEn}</strong><br>${item.exJa}`; document.getElementById('example').style.display = 'none'; } function toggleAnswer() { const meaning = document.getElementById('meaning'); const example = document.getElementById('example'); const show = meaning.style.display === 'none'; meaning.style.display = show ? 'block' : 'none'; example.style.display = show ? 'block' : 'none'; } function nextWord() { currentIndex = (currentIndex + 1) % words.length; updateCard(); } function speak() { const utterance = new SpeechSynthesisUtterance(words[currentIndex].word); utterance.lang = 'en-US'; window.speechSynthesis.speak(utterance); } // 初期化 updateCard(); </script> </body> </html>