<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>🟩 英検4級 英語シリーズ アーカイブ - じゅにさん子育てブログ</title>
	<atom:link href="https://jouniorsankosodate.com/category/learn/english-flash/eiken4-flash/feed/" rel="self" type="application/rss+xml" />
	<link>https://jouniorsankosodate.com/category/learn/english-flash/eiken4-flash/</link>
	<description>受験のその先へ｜子どもたちのより良い未来を育てる</description>
	<lastBuildDate>Wed, 06 May 2026 13:36:37 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0</generator>

<image>
	<url>https://jouniorsankosodate.com/wp-content/uploads/2026/02/cropped-44f1f7a5e508593f7c057572c07f45a3-32x32.jpg</url>
	<title>🟩 英検4級 英語シリーズ アーカイブ - じゅにさん子育てブログ</title>
	<link>https://jouniorsankosodate.com/category/learn/english-flash/eiken4-flash/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>英検４級 フラッシュ英単語 No.12｜天気・季節（音声対応）</title>
		<link>https://jouniorsankosodate.com/eiken4-set12/</link>
					<comments>https://jouniorsankosodate.com/eiken4-set12/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Wed, 06 May 2026 13:36:36 +0000</pubDate>
				<category><![CDATA[🟩 英検4級 英語シリーズ]]></category>
		<category><![CDATA[＃フラッシュ]]></category>
		<category><![CDATA[＃無料アプリ]]></category>
		<category><![CDATA[#英単語]]></category>
		<category><![CDATA[＃英検４級]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=5450</guid>

					<description><![CDATA[<p>英検４級 フラッシュ英単語 No.12｜天気・季節（音声対応） 英検４級 フラッシュ英単語 No.12 天気・季節 日本語からスタート 🔊 音声ON — — 英語⇆日本語 ▶ 読み上げ わかった 👍 わからん！あとで復習 [&#8230;]</p>
<p>投稿 <a href="https://jouniorsankosodate.com/eiken4-set12/">英検４級 フラッシュ英単語 No.12｜天気・季節（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>英検４級 フラッシュ英単語 No.12｜天気・季節（音声対応）</title>

<style>
:root{
  --bg:#f7f7fb;
  --card:#ffffff;
  --ink:#111827;
  --muted:#6b7280;
  --accent:#16a34a;
  --accent-weak:#dcfce7;
  --good:#22c55e;
  --review:#f59e0b;
  --shadow:0 6px 24px rgba(0,0,0,.08);
}

body{
  margin:0;
  background:var(--bg);
}

.wrap{
  max-width:760px;
  margin:0 auto;
  padding:16px 16px 28px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial;
  color:var(--ink);
}

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:8px 0 16px;
  flex-wrap:wrap;
}

h1{
  font-size:18px;
  margin:0;
  font-weight:700;
}

.badge{
  font-size:11px;
  color:var(--accent);
  background:var(--accent-weak);
  padding:3px 8px;
  border-radius:999px;
}

.switches{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:13px;
}

.switches input{
  accent-color:var(--accent);
}

.card-outer{
  position:relative;
  perspective:1200px;
  margin:12px 0 8px;
}

.card{
  position:relative;
  width:100%;
  min-height:190px;
  background:var(--card);
  border-radius:18px;
  box-shadow:var(--shadow);
  cursor:pointer;
  transform-style:preserve-3d;
  transition:transform .5s ease;
}

.card.flipped{
  transform:rotateY(180deg);
}

.face{
  position:absolute;
  inset:0;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  backface-visibility:hidden;
  padding:24px;
  text-align:center;
}

.frontText{
  font-size:30px;
  font-weight:800;
}

.backText{
  font-size:24px;
  font-weight:700;
}

.card-face-back{
  transform:rotateY(180deg);
}

.controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:12px 0;
}

.btn{
  appearance:none;
  border:1px solid #e5e7eb;
  background:#fff;
  padding:11px 12px;
  border-radius:13px;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  color:var(--ink);
}

.btn:hover{
  background:#f0fdf4;
}

.btn.primary{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

.btn.good{
  background:var(--good);
  color:#fff;
  border-color:var(--good);
}

.btn.review{
  background:var(--review);
  color:#fff;
  border-color:var(--review);
}

.meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
}

.progress{
  height:8px;
  background:var(--accent-weak);
  border-radius:999px;
  overflow:hidden;
  flex:1;
}

.bar{
  height:100%;
  width:0;
  background:var(--accent);
  transition:.25s;
}

.index{
  min-width:90px;
  text-align:right;
}

.hint{
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
}

.result-box{
  display:none;
  background:#fff;
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:24px;
  text-align:center;
  margin-top:16px;
}

.result-box h2{
  margin:0 0 10px;
  font-size:22px;
}

.result-box p{
  color:#475569;
  font-weight:700;
}

.series-back-wrap{
  margin:24px 0 8px;
  text-align:center;
}

.series-back-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 18px;
  border-radius:999px;
  background:linear-gradient(135deg,#e0f2fe,#cffafe);
  color:#0f172a;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
}

.series-nav-wrap{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:10px 0 20px;
  flex-wrap:wrap;
}

.series-nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
}

.series-nav-btn.prev{
  background:#f1f5f9;
  color:#334155;
}

.series-nav-btn.next{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;
}

@media (min-width:560px){
  .frontText{font-size:36px}
  .backText{font-size:26px}
  .card{min-height:220px}
}

@media(max-width:480px){
  .controls{grid-template-columns:1fr}

  .series-back-btn,
  .series-nav-btn{
    width:100%;
    font-size:15px;
    padding:12px 18px;
  }
}
</style>
</head>

<body>

<div class="wrap" id="app" aria-live="polite">

<header>

  <h1>
    英検４級 フラッシュ英単語
    <span class="badge">No.12 天気・季節</span>
  </h1>

  <div class="switches">

    <label>
      <input type="checkbox" id="jpFirst">
      日本語からスタート
    </label>

    <label>
      <input type="checkbox" id="speakOn">
      🔊 音声ON
    </label>

  </div>

</header>

<div id="studyArea">

  <div class="card-outer">

    <div class="card" id="card">

      <div class="face card-face-front">
        <div class="frontText" id="frontText">—</div>
      </div>

      <div class="face card-face-back">
        <div class="backText" id="backText">—</div>
      </div>

    </div>

  </div>

  <div class="controls">

    <button class="btn primary" id="flipBtn">
      英語⇆日本語
    </button>

    <button class="btn" id="speakBtn">
      ▶ 読み上げ
    </button>

    <button class="btn good" id="knownBtn">
      わかった 👍
    </button>

    <button class="btn review" id="wrongBtn">
      わからん！あとで復習 📌
    </button>

    <button class="btn" id="shuffleBtn">
      🔀 シャッフル
    </button>

    <button class="btn" id="resetBtn">
      ↩︎ はじめから
    </button>

  </div>

  <div class="meta">

    <div class="progress">
      <div class="bar" id="bar"></div>
    </div>

    <div class="index">
      <span id="pos">1</span>/<span id="total">—</span>
    </div>

  </div>

  <p class="hint">
    カードをタップして答えを確認。わかったら「わかった」、不安なら「あとで復習」を押してね。
  </p>

</div>

<div class="result-box" id="resultBox">

  <h2 id="resultTitle">おつかれさま！✨</h2>

  <p id="resultText"></p>

  <div class="controls">

    <button class="btn review" id="reviewBtn">
      復習する 🔁
    </button>

    <button class="btn" id="againBtn">
      もう一回やる
    </button>

  </div>

</div>

<div class="series-back-wrap">

  <a class="series-back-btn"
     href="https://jouniorsankosodate.com/eiken4-series/">

    <span>📘</span>
    英検4級フラッシュ英単語シリーズ一覧にもどる

  </a>

</div>

<div class="series-nav-wrap">

  <a class="series-nav-btn prev"
     href="https://jouniorsankosodate.com/eiken4-set11/">

    ← 前のレッスン

  </a>

  <a class="series-nav-btn next"
     href="https://jouniorsankosodate.com/eiken4-set13/">

    次のレッスンへ →

  </a>

</div>

</div>

<script>
const ITEMS = [
  { word:"windy", jp:"風が強い" },
  { word:"cloudy", jp:"くもった" },
  { word:"snowy", jp:"雪の" },
  { word:"warm", jp:"暖かい" },
  { word:"cool", jp:"涼しい" },
  { word:"dry", jp:"乾燥した" },
  { word:"season", jp:"季節" },
  { word:"spring", jp:"春" },
  { word:"summer", jp:"夏" },
  { word:"autumn", jp:"秋" },
  { word:"winter", jp:"冬" },
  { word:"weather", jp:"天気" },
  { word:"sunny", jp:"晴れた" },
  { word:"rainy", jp:"雨の" },
  { word:"hot", jp:"暑い" }
];

let _voice = null;

function pickVoice(){

  const voices = speechSynthesis.getVoices() || [];

  const femaleNames = [
    "Sonia","Serena","Susan","Kate","Libby","Maisie",
    "Google UK English Female",
    "Microsoft Sonia",
    "Microsoft Libby",
    "Microsoft Susan"
  ];

  return voices.find(v =>
    v.lang === "en-GB" &&
    femaleNames.some(name => v.name.includes(name))
  )
  || voices.find(v => v.lang === "en-GB")
  || voices.find(v => (v.lang || "").startsWith("en"))
  || null;
}

(() => {

const card = document.getElementById("card");
const frontText = document.getElementById("frontText");
const backText = document.getElementById("backText");

const posEl = document.getElementById("pos");
const totalEl = document.getElementById("total");
const bar = document.getElementById("bar");

const jpFirst = document.getElementById("jpFirst");
const speakOnChk = document.getElementById("speakOn");

const flipBtn = document.getElementById("flipBtn");
const speakBtn = document.getElementById("speakBtn");

const knownBtn = document.getElementById("knownBtn");
const wrongBtn = document.getElementById("wrongBtn");

const shuffleBtn = document.getElementById("shuffleBtn");
const resetBtn = document.getElementById("resetBtn");

const studyArea = document.getElementById("studyArea");

const resultBox = document.getElementById("resultBox");
const resultTitle = document.getElementById("resultTitle");
const resultText = document.getElementById("resultText");

const reviewBtn = document.getElementById("reviewBtn");
const againBtn = document.getElementById("againBtn");

let order = [...Array(ITEMS.length).keys()];
let idx = 0;

let isFlipped = false;
let showJpFirst = false;
let speakOn = false;

let reviewList = [];

totalEl.textContent = order.length;

speechSynthesis.addEventListener("voiceschanged", () => {
  _voice = pickVoice();
});

function speak(text){

  try{

    if(!("speechSynthesis" in window)) return;

    if(!_voice){
      _voice = pickVoice();
    }

    const u = new SpeechSynthesisUtterance(text.trim());

    if(_voice){
      u.voice = _voice;
      u.lang = _voice.lang || "en-GB";
    }else{
      u.lang = "en-GB";
    }

    u.rate = 0.9;
    u.pitch = 1.05;

    speechSynthesis.cancel();
    speechSynthesis.speak(u);

  }catch(e){}

}

function currentItem(){
  return ITEMS[order[idx]];
}

function render(){

  const it = currentItem();

  card.classList.remove("flipped");
  isFlipped = false;

  frontText.textContent =
    showJpFirst ? it.jp : it.word;

  backText.textContent =
    showJpFirst ? it.word : it.jp;

  posEl.textContent = idx + 1;

  totalEl.textContent = order.length;

  bar.style.width =
    `${((idx + 1) / order.length) * 100}%`;

  if(speakOn){
    speak(it.word);
  }
}

function flip(){

  isFlipped = !isFlipped;

  card.classList.toggle("flipped", isFlipped);
}

function nextCard(){

  if(idx >= order.length - 1){
    showResult();
    return;
  }

  idx++;

  render();
}

function showResult(){

  studyArea.style.display = "none";
  resultBox.style.display = "block";

  if(reviewList.length === 0){

    resultTitle.textContent =
      "ぜんぶできた！すごい！！🎉";

    resultText.textContent =
      "あとで復習する単語は 0こ です。";

    reviewBtn.style.display = "none";

  }else{

    resultTitle.textContent =
      "おつかれさま！✨";

    resultText.textContent =
      `あとで復習する単語は ${reviewList.length}こ あるよ。`;

    reviewBtn.style.display = "inline-block";
  }
}

function startStudy(newOrder){

  order = [...newOrder];
  idx = 0;

  studyArea.style.display = "block";
  resultBox.style.display = "none";

  render();
}

function resetAll(){

  reviewList = [];

  startStudy(
    [...Array(ITEMS.length).keys()]
  );
}

function shuffleOrder(){

  for(let i = order.length - 1; i > 0; i--){

    const j =
      Math.floor(Math.random() * (i + 1));

    [order[i], order[j]] =
      [order[j], order[i]];
  }

  idx = 0;

  render();
}

card.addEventListener("click", flip);

flipBtn.addEventListener("click", flip);

speakBtn.addEventListener("click", () => {
  speak(currentItem().word);
});

knownBtn.addEventListener("click", nextCard);

wrongBtn.addEventListener("click", () => {

  const currentIndex = order[idx];

  if(!reviewList.includes(currentIndex)){
    reviewList.push(currentIndex);
  }

  nextCard();
});

reviewBtn.addEventListener("click", () => {

  if(reviewList.length === 0) return;

  const list = [...reviewList];

  reviewList = [];

  startStudy(list);

});

againBtn.addEventListener("click", resetAll);

shuffleBtn.addEventListener("click", shuffleOrder);

resetBtn.addEventListener("click", resetAll);

jpFirst.addEventListener("change", e => {

  showJpFirst = e.target.checked;

  render();

});

speakOnChk.addEventListener("change", e => {

  speakOn = e.target.checked;

  if(speakOn){
    speak(currentItem().word);
  }

});

window.addEventListener("keydown", e => {

  if(e.key === " "){
    e.preventDefault();
    flip();
  }

});

render();

})();
</script>

</body>
</html>



<p class="wp-block-paragraph"></p>
<p>投稿 <a href="https://jouniorsankosodate.com/eiken4-set12/">英検４級 フラッシュ英単語 No.12｜天気・季節（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/eiken4-set12/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>英検４級 フラッシュ英単語 No.10｜家・生活（音声対応）</title>
		<link>https://jouniorsankosodate.com/eiken4-set10/</link>
					<comments>https://jouniorsankosodate.com/eiken4-set10/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Wed, 06 May 2026 13:19:34 +0000</pubDate>
				<category><![CDATA[🟩 英検4級 英語シリーズ]]></category>
		<category><![CDATA[＃フラッシュ]]></category>
		<category><![CDATA[＃無料アプリ]]></category>
		<category><![CDATA[#英単語]]></category>
		<category><![CDATA[＃英検４級]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=5444</guid>

					<description><![CDATA[<p>英検４級 フラッシュ英単語 No.10｜家・生活（音声対応） 英検４級 フラッシュ英単語 No.10 家・生活 日本語からスタート 🔊 音声ON — — 英語⇆日本語 ▶ 読み上げ わかった 👍 わからん！あとで復習 📌 [&#8230;]</p>
<p>投稿 <a href="https://jouniorsankosodate.com/eiken4-set10/">英検４級 フラッシュ英単語 No.10｜家・生活（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>英検４級 フラッシュ英単語 No.10｜家・生活（音声対応）</title>

<style>
:root{
  --bg:#f7f7fb; --card:#ffffff; --ink:#111827; --muted:#6b7280;
  --accent:#16a34a; --accent-weak:#dcfce7;
  --good:#22c55e; --review:#f59e0b;
  --shadow:0 6px 24px rgba(0,0,0,.08);
}
body{margin:0;background:var(--bg);}
.wrap{max-width:760px;margin:0 auto;padding:16px 16px 28px;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial;color:var(--ink);}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 16px;flex-wrap:wrap;}
h1{font-size:18px;margin:0;font-weight:700;}
.badge{font-size:11px;color:var(--accent);background:var(--accent-weak);padding:3px 8px;border-radius:999px;}
.switches{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:13px;}
.switches input{accent-color:var(--accent);}
.card-outer{position:relative;perspective:1200px;margin:12px 0 8px;}
.card{position:relative;width:100%;min-height:190px;background:var(--card);border-radius:18px;box-shadow:var(--shadow);cursor:pointer;transform-style:preserve-3d;transition:transform .5s ease;}
.card.flipped{transform:rotateY(180deg);}
.face{position:absolute;inset:0;border-radius:18px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;padding:24px;text-align:center;}
.frontText{font-size:30px;font-weight:800;}
.backText{font-size:24px;font-weight:700;}
.card-face-back{transform:rotateY(180deg);}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0;}
.btn{appearance:none;border:1px solid #e5e7eb;background:#fff;padding:11px 12px;border-radius:13px;font-size:14px;font-weight:700;line-height:1.2;cursor:pointer;color:var(--ink);}
.btn:hover{background:#f0fdf4;}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn.good{background:var(--good);color:#fff;border-color:var(--good);}
.btn.review{background:var(--review);color:#fff;border-color:var(--review);}
.meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;color:var(--muted);font-size:13px;}
.progress{height:8px;background:var(--accent-weak);border-radius:999px;overflow:hidden;flex:1;}
.bar{height:100%;width:0;background:var(--accent);transition:.25s;}
.index{min-width:90px;text-align:right;}
.hint{margin-top:8px;color:var(--muted);font-size:12px;}
.result-box{display:none;background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:24px;text-align:center;margin-top:16px;}
.result-box h2{margin:0 0 10px;font-size:22px;}
.result-box p{color:#475569;font-weight:700;}
.series-back-wrap{margin:24px 0 8px;text-align:center;}
.series-back-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:999px;background:linear-gradient(135deg,#e0f2fe,#cffafe);color:#0f172a;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 3px 8px rgba(0,0,0,.08);}
.series-nav-wrap{display:flex;justify-content:center;gap:10px;margin:10px 0 20px;flex-wrap:wrap;}
.series-nav-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 3px 8px rgba(0,0,0,.08);}
.series-nav-btn.prev{background:#f1f5f9;color:#334155;}
.series-nav-btn.next{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;}
@media (min-width:560px){.frontText{font-size:36px}.backText{font-size:26px}.card{min-height:220px}}
@media(max-width:480px){.controls{grid-template-columns:1fr}.series-back-btn,.series-nav-btn{width:100%;font-size:15px;padding:12px 18px;}}
</style>
</head>

<body>
<div class="wrap" id="app" aria-live="polite">

<header>
  <h1>英検４級 フラッシュ英単語 <span class="badge">No.10 家・生活</span></h1>
  <div class="switches">
    <label><input type="checkbox" id="jpFirst"> 日本語からスタート</label>
    <label><input type="checkbox" id="speakOn"> 🔊 音声ON</label>
  </div>
</header>

<div id="studyArea">
  <div class="card-outer" aria-label="フラッシュカード" role="button" tabindex="0">
    <div class="card" id="card">
      <div class="face card-face-front"><div class="frontText" id="frontText">—</div></div>
      <div class="face card-face-back"><div class="backText" id="backText">—</div></div>
    </div>
  </div>

  <div class="controls">
    <button class="btn primary" id="flipBtn">英語⇆日本語</button>
    <button class="btn" id="speakBtn">▶ 読み上げ</button>
    <button class="btn good" id="knownBtn">わかった 👍</button>
    <button class="btn review" id="wrongBtn">わからん！あとで復習 📌</button>
    <button class="btn" id="shuffleBtn">🔀 シャッフル</button>
    <button class="btn" id="resetBtn">↩︎ はじめから</button>
  </div>

  <div class="meta">
    <div class="progress"><div class="bar" id="bar"></div></div>
    <div class="index"><span id="pos">1</span>/<span id="total">—</span></div>
  </div>

  <p class="hint">カードをタップして答えを確認。わかったら「わかった」、不安なら「あとで復習」を押してね。</p>
</div>

<div class="result-box" id="resultBox">
  <h2 id="resultTitle">おつかれさま！✨</h2>
  <p id="resultText"></p>
  <div class="controls">
    <button class="btn review" id="reviewBtn">復習する 🔁</button>
    <button class="btn" id="againBtn">もう一回やる</button>
  </div>
</div>

<div class="series-back-wrap">
  <a class="series-back-btn" href="https://jouniorsankosodate.com/eiken4-series/">
    <span>📘</span>英検4級フラッシュ英単語シリーズ一覧にもどる
  </a>
</div>

<div class="series-nav-wrap">
  <a class="series-nav-btn prev" href="https://jouniorsankosodate.com/eiken4-set9/">← 前のレッスン</a>
  <a class="series-nav-btn next" href="https://jouniorsankosodate.com/eiken4-set11/">次のレッスンへ →</a>
</div>

</div>

<script>
const ITEMS = [
  { word:"kitchen", jp:"台所" },
  { word:"window", jp:"窓" },
  { word:"floor", jp:"床" },
  { word:"bath", jp:"お風呂" },
  { word:"bed", jp:"ベッド" },
  { word:"breakfast", jp:"朝食" },
  { word:"dinner", jp:"夕食" },
  { word:"clean", jp:"掃除する・きれいな" },
  { word:"wash", jp:"洗う" },
  { word:"cook", jp:"料理する" },
  { word:"door", jp:"ドア" },
  { word:"chair", jp:"いす" },
  { word:"table", jp:"テーブル" },
  { word:"room", jp:"部屋" },
  { word:"homework", jp:"宿題" }
];

let _voice = null;

function pickVoice(){
  const voices = speechSynthesis.getVoices() || [];
  const femaleNames = ["Sonia","Serena","Susan","Kate","Libby","Maisie","Google UK English Female","Microsoft Sonia","Microsoft Libby","Microsoft Susan"];
  return voices.find(v => v.lang === "en-GB" && femaleNames.some(name => v.name.includes(name)))
  || voices.find(v => v.lang === "en-GB")
  || voices.find(v => (v.lang || "").startsWith("en"))
  || null;
}

(() => {
  const card = document.getElementById("card");
  const frontText = document.getElementById("frontText");
  const backText = document.getElementById("backText");
  const posEl = document.getElementById("pos");
  const totalEl = document.getElementById("total");
  const bar = document.getElementById("bar");
  const jpFirst = document.getElementById("jpFirst");
  const speakOnChk = document.getElementById("speakOn");
  const flipBtn = document.getElementById("flipBtn");
  const speakBtn = document.getElementById("speakBtn");
  const knownBtn = document.getElementById("knownBtn");
  const wrongBtn = document.getElementById("wrongBtn");
  const shuffleBtn = document.getElementById("shuffleBtn");
  const resetBtn = document.getElementById("resetBtn");
  const studyArea = document.getElementById("studyArea");
  const resultBox = document.getElementById("resultBox");
  const resultTitle = document.getElementById("resultTitle");
  const resultText = document.getElementById("resultText");
  const reviewBtn = document.getElementById("reviewBtn");
  const againBtn = document.getElementById("againBtn");

  let order = [...Array(ITEMS.length).keys()];
  let idx = 0;
  let isFlipped = false;
  let showJpFirst = false;
  let speakOn = false;
  let reviewList = [];

  totalEl.textContent = order.length;
  speechSynthesis.addEventListener("voiceschanged", () => {_voice = pickVoice();});

  function speak(text){
    try{
      if(!("speechSynthesis" in window)) return;
      if(!_voice) _voice = pickVoice();
      const u = new SpeechSynthesisUtterance(text.trim());
      if(_voice){u.voice = _voice; u.lang = _voice.lang || "en-GB";}
      else{u.lang = "en-GB";}
      u.rate = 0.9;
      u.pitch = 1.05;
      speechSynthesis.cancel();
      speechSynthesis.speak(u);
    }catch(e){}
  }

  function currentItem(){return ITEMS[order[idx]];}

  function render(){
    const it = currentItem();
    card.classList.remove("flipped");
    isFlipped = false;
    frontText.textContent = showJpFirst ? it.jp : it.word;
    backText.textContent = showJpFirst ? it.word : it.jp;
    posEl.textContent = idx + 1;
    totalEl.textContent = order.length;
    bar.style.width = `${((idx + 1) / order.length) * 100}%`;
    if(speakOn){speak(it.word);}
  }

  function flip(){
    isFlipped = !isFlipped;
    card.classList.toggle("flipped", isFlipped);
  }

  function nextCard(){
    if(idx >= order.length - 1){showResult(); return;}
    idx++;
    render();
  }

  function showResult(){
    studyArea.style.display = "none";
    resultBox.style.display = "block";
    if(reviewList.length === 0){
      resultTitle.textContent = "ぜんぶできた！すごい！！🎉";
      resultText.textContent = "あとで復習する単語は 0こ です。";
      reviewBtn.style.display = "none";
    }else{
      resultTitle.textContent = "おつかれさま！✨";
      resultText.textContent = `あとで復習する単語は ${reviewList.length}こ あるよ。`;
      reviewBtn.style.display = "inline-block";
    }
  }

  function startStudy(newOrder){
    order = [...newOrder];
    idx = 0;
    studyArea.style.display = "block";
    resultBox.style.display = "none";
    render();
  }

  function resetAll(){
    reviewList = [];
    startStudy([...Array(ITEMS.length).keys()]);
  }

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

  card.addEventListener("click", flip);
  flipBtn.addEventListener("click", flip);
  speakBtn.addEventListener("click", () => speak(currentItem().word));
  knownBtn.addEventListener("click", nextCard);
  wrongBtn.addEventListener("click", () => {
    const currentIndex = order[idx];
    if(!reviewList.includes(currentIndex)){reviewList.push(currentIndex);}
    nextCard();
  });
  reviewBtn.addEventListener("click", () => {
    if(reviewList.length === 0) return;
    const list = [...reviewList];
    reviewList = [];
    startStudy(list);
  });
  againBtn.addEventListener("click", resetAll);
  shuffleBtn.addEventListener("click", shuffleOrder);
  resetBtn.addEventListener("click", resetAll);
  jpFirst.addEventListener("change", e => {showJpFirst = e.target.checked; render();});
  speakOnChk.addEventListener("change", e => {speakOn = e.target.checked; if(speakOn) speak(currentItem().word);});
  window.addEventListener("keydown", e => {if(e.key === " "){e.preventDefault(); flip();}});
  render();
})();
</script>
</body>
</html>
<p>投稿 <a href="https://jouniorsankosodate.com/eiken4-set10/">英検４級 フラッシュ英単語 No.10｜家・生活（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/eiken4-set10/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>英検４級 フラッシュ英単語 No.9｜健康・体調</title>
		<link>https://jouniorsankosodate.com/eiken4-set9/</link>
					<comments>https://jouniorsankosodate.com/eiken4-set9/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Wed, 06 May 2026 13:08:30 +0000</pubDate>
				<category><![CDATA[🟩 英検4級 英語シリーズ]]></category>
		<category><![CDATA[＃フラッシュ]]></category>
		<category><![CDATA[＃無料アプリ]]></category>
		<category><![CDATA[#英単語]]></category>
		<category><![CDATA[＃英検４級]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=5441</guid>

					<description><![CDATA[<p>英検４級 フラッシュ英単語 No.9｜健康・体調（音声対応） 英検４級 フラッシュ英単語 No.9 健康・体調 日本語からスタート 🔊 音声ON — — 英語⇆日本語 ▶ 読み上げ わかった 👍 わからん！あとで復習 📌 [&#8230;]</p>
<p>投稿 <a href="https://jouniorsankosodate.com/eiken4-set9/">英検４級 フラッシュ英単語 No.9｜健康・体調</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>英検４級 フラッシュ英単語 No.9｜健康・体調（音声対応）</title>

<style>
:root{
  --bg:#f7f7fb;
  --card:#ffffff;
  --ink:#111827;
  --muted:#6b7280;
  --accent:#16a34a;
  --accent-weak:#dcfce7;
  --good:#22c55e;
  --review:#f59e0b;
  --shadow:0 6px 24px rgba(0,0,0,.08);
}
body{margin:0;background:var(--bg);}
.wrap{max-width:760px;margin:0 auto;padding:16px 16px 28px;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial;color:var(--ink);}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 16px;flex-wrap:wrap;}
h1{font-size:18px;margin:0;font-weight:700;}
.badge{font-size:11px;color:var(--accent);background:var(--accent-weak);padding:3px 8px;border-radius:999px;}
.switches{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:13px;}
.switches input{accent-color:var(--accent);}
.card-outer{position:relative;perspective:1200px;margin:12px 0 8px;}
.card{position:relative;width:100%;min-height:190px;background:var(--card);border-radius:18px;box-shadow:var(--shadow);cursor:pointer;transform-style:preserve-3d;transition:transform .5s ease;}
.card.flipped{transform:rotateY(180deg);}
.face{position:absolute;inset:0;border-radius:18px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;padding:24px;text-align:center;}
.frontText{font-size:30px;font-weight:800;}
.backText{font-size:24px;font-weight:700;}
.card-face-back{transform:rotateY(180deg);}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0;}
.btn{appearance:none;border:1px solid #e5e7eb;background:#fff;padding:11px 12px;border-radius:13px;font-size:14px;font-weight:700;line-height:1.2;cursor:pointer;color:var(--ink);}
.btn:hover{background:#f0fdf4;}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn.good{background:var(--good);color:#fff;border-color:var(--good);}
.btn.review{background:var(--review);color:#fff;border-color:var(--review);}
.meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;color:var(--muted);font-size:13px;}
.progress{height:8px;background:var(--accent-weak);border-radius:999px;overflow:hidden;flex:1;}
.bar{height:100%;width:0;background:var(--accent);transition:.25s;}
.index{min-width:90px;text-align:right;}
.hint{margin-top:8px;color:var(--muted);font-size:12px;}
.result-box{display:none;background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:24px;text-align:center;margin-top:16px;}
.result-box h2{margin:0 0 10px;font-size:22px;}
.result-box p{color:#475569;font-weight:700;}
.series-back-wrap{margin:24px 0 8px;text-align:center;}
.series-back-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:999px;background:linear-gradient(135deg,#e0f2fe,#cffafe);color:#0f172a;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 3px 8px rgba(0,0,0,.08);}
.series-nav-wrap{display:flex;justify-content:center;gap:10px;margin:10px 0 20px;flex-wrap:wrap;}
.series-nav-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 3px 8px rgba(0,0,0,.08);}
.series-nav-btn.prev{background:#f1f5f9;color:#334155;}
.series-nav-btn.next{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;}
@media (min-width:560px){.frontText{font-size:36px}.backText{font-size:26px}.card{min-height:220px}}
@media(max-width:480px){.controls{grid-template-columns:1fr}.series-back-btn,.series-nav-btn{width:100%;font-size:15px;padding:12px 18px;}}
</style>
</head>

<body>
<div class="wrap" id="app" aria-live="polite">

<header>
  <h1>英検４級 フラッシュ英単語 <span class="badge">No.9 健康・体調</span></h1>
  <div class="switches">
    <label><input type="checkbox" id="jpFirst"> 日本語からスタート</label>
    <label><input type="checkbox" id="speakOn"> 🔊 音声ON</label>
  </div>
</header>

<div id="studyArea">
  <div class="card-outer" aria-label="フラッシュカード" role="button" tabindex="0">
    <div class="card" id="card">
      <div class="face card-face-front"><div class="frontText" id="frontText">—</div></div>
      <div class="face card-face-back"><div class="backText" id="backText">—</div></div>
    </div>
  </div>

  <div class="controls">
    <button class="btn primary" id="flipBtn">英語⇆日本語</button>
    <button class="btn" id="speakBtn">▶ 読み上げ</button>
    <button class="btn good" id="knownBtn">わかった 👍</button>
    <button class="btn review" id="wrongBtn">わからん！あとで復習 📌</button>
    <button class="btn" id="shuffleBtn">🔀 シャッフル</button>
    <button class="btn" id="resetBtn">↩︎ はじめから</button>
  </div>

  <div class="meta">
    <div class="progress"><div class="bar" id="bar"></div></div>
    <div class="index"><span id="pos">1</span>/<span id="total">—</span></div>
  </div>

  <p class="hint">カードをタップして答えを確認。わかったら「わかった」、不安なら「あとで復習」を押してね。</p>
</div>

<div class="result-box" id="resultBox">
  <h2 id="resultTitle">おつかれさま！✨</h2>
  <p id="resultText"></p>
  <div class="controls">
    <button class="btn review" id="reviewBtn">復習する 🔁</button>
    <button class="btn" id="againBtn">もう一回やる</button>
  </div>
</div>

<div class="series-back-wrap">
  <a class="series-back-btn" href="https://jouniorsankosodate.com/eiken4-series/">
    <span>📘</span>英検4級フラッシュ英単語シリーズ一覧にもどる
  </a>
</div>

<div class="series-nav-wrap">
  <a class="series-nav-btn prev" href="https://jouniorsankosodate.com/eiken4-set8/">← 前のレッスン</a>
  <a class="series-nav-btn next" href="https://jouniorsankosodate.com/eiken4-set10/">次のレッスンへ →</a>
</div>

</div>

<script>
const ITEMS = [
  { word:"headache", jp:"頭痛" },
  { word:"fever", jp:"熱" },
  { word:"medicine", jp:"薬" },
  { word:"hospital", jp:"病院" },
  { word:"doctor", jp:"医者" },
  { word:"nurse", jp:"看護師" },
  { word:"hurt", jp:"痛む・けがをする" },
  { word:"sick", jp:"病気の・気分が悪い" },
  { word:"healthy", jp:"健康な" },
  { word:"tired", jp:"疲れた" },
  { word:"rest", jp:"休む・休息" },
  { word:"cold", jp:"風邪・寒い" },
  { word:"toothache", jp:"歯痛" },
  { word:"stomachache", jp:"腹痛" },
  { word:"exercise", jp:"運動する・運動" }
];

let _voice = null;

function pickVoice(){
  const voices = speechSynthesis.getVoices() || [];
  const femaleNames = ["Sonia","Serena","Susan","Kate","Libby","Maisie","Google UK English Female","Microsoft Sonia","Microsoft Libby","Microsoft Susan"];
  return voices.find(v => v.lang === "en-GB" && femaleNames.some(name => v.name.includes(name)))
  || voices.find(v => v.lang === "en-GB")
  || voices.find(v => (v.lang || "").startsWith("en"))
  || null;
}

(() => {
  const card = document.getElementById("card");
  const frontText = document.getElementById("frontText");
  const backText = document.getElementById("backText");
  const posEl = document.getElementById("pos");
  const totalEl = document.getElementById("total");
  const bar = document.getElementById("bar");
  const jpFirst = document.getElementById("jpFirst");
  const speakOnChk = document.getElementById("speakOn");
  const flipBtn = document.getElementById("flipBtn");
  const speakBtn = document.getElementById("speakBtn");
  const knownBtn = document.getElementById("knownBtn");
  const wrongBtn = document.getElementById("wrongBtn");
  const shuffleBtn = document.getElementById("shuffleBtn");
  const resetBtn = document.getElementById("resetBtn");
  const studyArea = document.getElementById("studyArea");
  const resultBox = document.getElementById("resultBox");
  const resultTitle = document.getElementById("resultTitle");
  const resultText = document.getElementById("resultText");
  const reviewBtn = document.getElementById("reviewBtn");
  const againBtn = document.getElementById("againBtn");

  let order = [...Array(ITEMS.length).keys()];
  let idx = 0;
  let isFlipped = false;
  let showJpFirst = false;
  let speakOn = false;
  let reviewList = [];

  totalEl.textContent = order.length;
  speechSynthesis.addEventListener("voiceschanged", () => {_voice = pickVoice();});

  function speak(text){
    try{
      if(!("speechSynthesis" in window)) return;
      if(!_voice) _voice = pickVoice();
      const u = new SpeechSynthesisUtterance(text.trim());
      if(_voice){u.voice = _voice; u.lang = _voice.lang || "en-GB";}
      else{u.lang = "en-GB";}
      u.rate = 0.9;
      u.pitch = 1.05;
      speechSynthesis.cancel();
      speechSynthesis.speak(u);
    }catch(e){}
  }

  function currentItem(){return ITEMS[order[idx]];}

  function render(){
    const it = currentItem();
    card.classList.remove("flipped");
    isFlipped = false;
    frontText.textContent = showJpFirst ? it.jp : it.word;
    backText.textContent = showJpFirst ? it.word : it.jp;
    posEl.textContent = idx + 1;
    totalEl.textContent = order.length;
    bar.style.width = `${((idx + 1) / order.length) * 100}%`;
    if(speakOn){speak(it.word);}
  }

  function flip(){
    isFlipped = !isFlipped;
    card.classList.toggle("flipped", isFlipped);
  }

  function nextCard(){
    if(idx >= order.length - 1){showResult(); return;}
    idx++;
    render();
  }

  function showResult(){
    studyArea.style.display = "none";
    resultBox.style.display = "block";
    if(reviewList.length === 0){
      resultTitle.textContent = "ぜんぶできた！すごい！！🎉";
      resultText.textContent = "あとで復習する単語は 0こ です。";
      reviewBtn.style.display = "none";
    }else{
      resultTitle.textContent = "おつかれさま！✨";
      resultText.textContent = `あとで復習する単語は ${reviewList.length}こ あるよ。`;
      reviewBtn.style.display = "inline-block";
    }
  }

  function startStudy(newOrder){
    order = [...newOrder];
    idx = 0;
    studyArea.style.display = "block";
    resultBox.style.display = "none";
    render();
  }

  function resetAll(){
    reviewList = [];
    startStudy([...Array(ITEMS.length).keys()]);
  }

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

  card.addEventListener("click", flip);
  flipBtn.addEventListener("click", flip);
  speakBtn.addEventListener("click", () => speak(currentItem().word));
  knownBtn.addEventListener("click", nextCard);
  wrongBtn.addEventListener("click", () => {
    const currentIndex = order[idx];
    if(!reviewList.includes(currentIndex)){reviewList.push(currentIndex);}
    nextCard();
  });
  reviewBtn.addEventListener("click", () => {
    if(reviewList.length === 0) return;
    const list = [...reviewList];
    reviewList = [];
    startStudy(list);
  });
  againBtn.addEventListener("click", resetAll);
  shuffleBtn.addEventListener("click", shuffleOrder);
  resetBtn.addEventListener("click", resetAll);
  jpFirst.addEventListener("change", e => {showJpFirst = e.target.checked; render();});
  speakOnChk.addEventListener("change", e => {speakOn = e.target.checked; if(speakOn) speak(currentItem().word);});
  window.addEventListener("keydown", e => {if(e.key === " "){e.preventDefault(); flip();}});
  render();
})();
</script>
</body>
</html>
<p>投稿 <a href="https://jouniorsankosodate.com/eiken4-set9/">英検４級 フラッシュ英単語 No.9｜健康・体調</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/eiken4-set9/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>英検４級 フラッシュ英単語 No.8｜交通・移動（音声対応）</title>
		<link>https://jouniorsankosodate.com/eiken4-set8/</link>
					<comments>https://jouniorsankosodate.com/eiken4-set8/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Wed, 06 May 2026 13:01:57 +0000</pubDate>
				<category><![CDATA[🟩 英検4級 英語シリーズ]]></category>
		<category><![CDATA[＃フラッシュ]]></category>
		<category><![CDATA[＃無料アプリ]]></category>
		<category><![CDATA[#英単語]]></category>
		<category><![CDATA[#英検４級]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=5438</guid>

					<description><![CDATA[<p>英検４級 フラッシュ英単語 No.8｜交通・移動（音声対応） 英検４級 フラッシュ英単語 No.8 交通・移動 日本語からスタート 🔊 音声ON — — 英語⇆日本語 ▶ 読み上げ わかった 👍 わからん！あとで復習 📌 [&#8230;]</p>
<p>投稿 <a href="https://jouniorsankosodate.com/eiken4-set8/">英検４級 フラッシュ英単語 No.8｜交通・移動（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>英検４級 フラッシュ英単語 No.8｜交通・移動（音声対応）</title>

<style>
:root{
  --bg:#f7f7fb;
  --card:#ffffff;
  --ink:#111827;
  --muted:#6b7280;

  --accent:#16a34a;
  --accent-weak:#dcfce7;

  --good:#22c55e;
  --review:#f59e0b;

  --shadow:0 6px 24px rgba(0,0,0,.08);
}

body{
  margin:0;
  background:var(--bg);
}

.wrap{
  max-width:760px;
  margin:0 auto;
  padding:16px 16px 28px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial;
  color:var(--ink);
}

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:8px 0 16px;
  flex-wrap:wrap;
}

h1{
  font-size:18px;
  margin:0;
  font-weight:700;
}

.badge{
  font-size:11px;
  color:var(--accent);
  background:var(--accent-weak);
  padding:3px 8px;
  border-radius:999px;
}

.switches{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:13px;
}

.switches input{
  accent-color:var(--accent);
}

.card-outer{
  position:relative;
  perspective:1200px;
  margin:12px 0 8px;
}

.card{
  position:relative;
  width:100%;
  min-height:190px;
  background:var(--card);
  border-radius:18px;
  box-shadow:var(--shadow);
  cursor:pointer;
  transform-style:preserve-3d;
  transition:transform .5s ease;
}

.card.flipped{
  transform:rotateY(180deg);
}

.face{
  position:absolute;
  inset:0;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  backface-visibility:hidden;
  padding:24px;
  text-align:center;
}

.frontText{
  font-size:30px;
  font-weight:800;
}

.backText{
  font-size:24px;
  font-weight:700;
}

.card-face-back{
  transform:rotateY(180deg);
}

.controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:12px 0;
}

.btn{
  appearance:none;
  border:1px solid #e5e7eb;
  background:#fff;
  padding:11px 12px;
  border-radius:13px;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  color:var(--ink);
}

.btn:hover{
  background:#f0fdf4;
}

.btn.primary{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

.btn.good{
  background:var(--good);
  color:#fff;
  border-color:var(--good);
}

.btn.review{
  background:var(--review);
  color:#fff;
  border-color:var(--review);
}

.meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
}

.progress{
  height:8px;
  background:var(--accent-weak);
  border-radius:999px;
  overflow:hidden;
  flex:1;
}

.bar{
  height:100%;
  width:0;
  background:var(--accent);
  transition:.25s;
}

.index{
  min-width:90px;
  text-align:right;
}

.hint{
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
}

.result-box{
  display:none;
  background:#fff;
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:24px;
  text-align:center;
  margin-top:16px;
}

.result-box h2{
  margin:0 0 10px;
  font-size:22px;
}

.result-box p{
  color:#475569;
  font-weight:700;
}

.series-back-wrap{
  margin:24px 0 8px;
  text-align:center;
}

.series-back-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 18px;
  border-radius:999px;
  background:linear-gradient(135deg,#e0f2fe,#cffafe);
  color:#0f172a;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
}

.series-nav-wrap{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:10px 0 20px;
  flex-wrap:wrap;
}

.series-nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
}

.series-nav-btn.prev{
  background:#f1f5f9;
  color:#334155;
}

.series-nav-btn.next{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;
}

@media (min-width:560px){

  .frontText{font-size:36px}
  .backText{font-size:26px}

  .card{
    min-height:220px;
  }
}

@media(max-width:480px){

  .controls{
    grid-template-columns:1fr;
  }

  .series-back-btn,
  .series-nav-btn{
    width:100%;
    font-size:15px;
    padding:12px 18px;
  }
}
</style>
</head>

<body>

<div class="wrap" id="app">

<header>

  <h1>
    英検４級 フラッシュ英単語
    <span class="badge">No.8 交通・移動</span>
  </h1>

  <div class="switches">

    <label>
      <input type="checkbox" id="jpFirst">
      日本語からスタート
    </label>

    <label>
      <input type="checkbox" id="speakOn">
      🔊 音声ON
    </label>

  </div>

</header>

<div id="studyArea">

  <div class="card-outer">

    <div class="card" id="card">

      <div class="face card-face-front">
        <div class="frontText" id="frontText">—</div>
      </div>

      <div class="face card-face-back">
        <div class="backText" id="backText">—</div>
      </div>

    </div>

  </div>

  <div class="controls">

    <button class="btn primary" id="flipBtn">
      英語⇆日本語
    </button>

    <button class="btn" id="speakBtn">
      ▶ 読み上げ
    </button>

    <button class="btn good" id="knownBtn">
      わかった 👍
    </button>

    <button class="btn review" id="wrongBtn">
      わからん！あとで復習 📌
    </button>

    <button class="btn" id="shuffleBtn">
      🔀 シャッフル
    </button>

    <button class="btn" id="resetBtn">
      ↩︎ はじめから
    </button>

  </div>

  <div class="meta">

    <div class="progress">
      <div class="bar" id="bar"></div>
    </div>

    <div class="index">
      <span id="pos">1</span>/<span id="total">—</span>
    </div>

  </div>

  <p class="hint">
    カードをタップして答えを確認。わかったら「わかった」、不安なら「あとで復習」を押してね。
  </p>

</div>

<div class="result-box" id="resultBox">

  <h2 id="resultTitle">おつかれさま！✨</h2>

  <p id="resultText"></p>

  <div class="controls">

    <button class="btn review" id="reviewBtn">
      復習する 🔁
    </button>

    <button class="btn" id="againBtn">
      もう一回やる
    </button>

  </div>

</div>

<div class="series-back-wrap">

  <a class="series-back-btn"
     href="https://jouniorsankosodate.com/eiken4-series/">

    <span>📘</span>
    英検4級フラッシュ英単語シリーズ一覧にもどる

  </a>

</div>

<div class="series-nav-wrap">

  <a class="series-nav-btn prev"
     href="https://jouniorsankosodate.com/eiken4-set7/">

    ← 前のレッスン

  </a>

  <a class="series-nav-btn next"
     href="https://jouniorsankosodate.com/eiken4-set9/">

    次のレッスンへ →

  </a>

</div>

</div>

<script>
const ITEMS = [
  { word:"train", jp:"電車" },
  { word:"station", jp:"駅" },
  { word:"arrive", jp:"到着する" },
  { word:"leave", jp:"出発する・去る" },
  { word:"ride", jp:"乗る" },
  { word:"traffic", jp:"交通" },
  { word:"road", jp:"道路" },
  { word:"bridge", jp:"橋" },
  { word:"corner", jp:"角・曲がり角" },
  { word:"cross", jp:"渡る・横切る" },
  { word:"turn", jp:"曲がる" },
  { word:"straight", jp:"まっすぐに" },
  { word:"map", jp:"地図" },
  { word:"airport", jp:"空港" },
  { word:"bus stop", jp:"バス停" }
];

let _voice = null;

function pickVoice(){

  const voices = speechSynthesis.getVoices() || [];

  const femaleNames = [
    "Sonia","Serena","Susan","Kate","Libby","Maisie",
    "Google UK English Female",
    "Microsoft Sonia",
    "Microsoft Libby",
    "Microsoft Susan"
  ];

  return voices.find(v =>
    v.lang === "en-GB" &&
    femaleNames.some(name => v.name.includes(name))
  )
  || voices.find(v => v.lang === "en-GB")
  || voices.find(v => (v.lang || "").startsWith("en"))
  || null;
}

(() => {

const card = document.getElementById("card");
const frontText = document.getElementById("frontText");
const backText = document.getElementById("backText");

const posEl = document.getElementById("pos");
const totalEl = document.getElementById("total");
const bar = document.getElementById("bar");

const jpFirst = document.getElementById("jpFirst");
const speakOnChk = document.getElementById("speakOn");

const flipBtn = document.getElementById("flipBtn");
const speakBtn = document.getElementById("speakBtn");

const knownBtn = document.getElementById("knownBtn");
const wrongBtn = document.getElementById("wrongBtn");

const shuffleBtn = document.getElementById("shuffleBtn");
const resetBtn = document.getElementById("resetBtn");

const studyArea = document.getElementById("studyArea");

const resultBox = document.getElementById("resultBox");
const resultTitle = document.getElementById("resultTitle");
const resultText = document.getElementById("resultText");

const reviewBtn = document.getElementById("reviewBtn");
const againBtn = document.getElementById("againBtn");

let order = [...Array(ITEMS.length).keys()];
let idx = 0;

let isFlipped = false;
let showJpFirst = false;
let speakOn = false;

let reviewList = [];

totalEl.textContent = order.length;

speechSynthesis.addEventListener("voiceschanged", () => {
  _voice = pickVoice();
});

function speak(text){

  try{

    if(!("speechSynthesis" in window)) return;

    if(!_voice){
      _voice = pickVoice();
    }

    const u = new SpeechSynthesisUtterance(text.trim());

    if(_voice){
      u.voice = _voice;
      u.lang = _voice.lang || "en-GB";
    }else{
      u.lang = "en-GB";
    }

    u.rate = 0.9;
    u.pitch = 1.05;

    speechSynthesis.cancel();
    speechSynthesis.speak(u);

  }catch(e){}

}

function currentItem(){
  return ITEMS[order[idx]];
}

function render(){

  const it = currentItem();

  card.classList.remove("flipped");
  isFlipped = false;

  frontText.textContent =
    showJpFirst ? it.jp : it.word;

  backText.textContent =
    showJpFirst ? it.word : it.jp;

  posEl.textContent = idx + 1;

  totalEl.textContent = order.length;

  bar.style.width =
    `${((idx + 1) / order.length) * 100}%`;

  if(speakOn){
    speak(it.word);
  }
}

function flip(){

  isFlipped = !isFlipped;

  card.classList.toggle("flipped", isFlipped);
}

function nextCard(){

  if(idx >= order.length - 1){
    showResult();
    return;
  }

  idx++;

  render();
}

function showResult(){

  studyArea.style.display = "none";
  resultBox.style.display = "block";

  if(reviewList.length === 0){

    resultTitle.textContent =
      "ぜんぶできた！すごい！！🎉";

    resultText.textContent =
      "あとで復習する単語は 0こ です。";

    reviewBtn.style.display = "none";

  }else{

    resultTitle.textContent =
      "おつかれさま！✨";

    resultText.textContent =
      `あとで復習する単語は ${reviewList.length}こ あるよ。`;

    reviewBtn.style.display = "inline-block";
  }
}

function startStudy(newOrder){

  order = [...newOrder];
  idx = 0;

  studyArea.style.display = "block";
  resultBox.style.display = "none";

  render();
}

function resetAll(){

  reviewList = [];

  startStudy(
    [...Array(ITEMS.length).keys()]
  );
}

function shuffleOrder(){

  for(let i = order.length - 1; i > 0; i--){

    const j =
      Math.floor(Math.random() * (i + 1));

    [order[i], order[j]] =
      [order[j], order[i]];
  }

  idx = 0;

  render();
}

card.addEventListener("click", flip);

flipBtn.addEventListener("click", flip);

speakBtn.addEventListener("click", () => {
  speak(currentItem().word);
});

knownBtn.addEventListener("click", nextCard);

wrongBtn.addEventListener("click", () => {

  const currentIndex = order[idx];

  if(!reviewList.includes(currentIndex)){
    reviewList.push(currentIndex);
  }

  nextCard();
});

reviewBtn.addEventListener("click", () => {

  if(reviewList.length === 0) return;

  const list = [...reviewList];

  reviewList = [];

  startStudy(list);

});

againBtn.addEventListener("click", resetAll);

shuffleBtn.addEventListener("click", shuffleOrder);

resetBtn.addEventListener("click", resetAll);

jpFirst.addEventListener("change", e => {

  showJpFirst = e.target.checked;

  render();

});

speakOnChk.addEventListener("change", e => {

  speakOn = e.target.checked;

  if(speakOn){
    speak(currentItem().word);
  }

});

window.addEventListener("keydown", e => {

  if(e.key === " "){
    e.preventDefault();
    flip();
  }

});

render();

})();
</script>

</body>
</html>
<p>投稿 <a href="https://jouniorsankosodate.com/eiken4-set8/">英検４級 フラッシュ英単語 No.8｜交通・移動（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/eiken4-set8/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>英検４級 フラッシュ英単語 No.7｜買い物・お金（音声対応）</title>
		<link>https://jouniorsankosodate.com/eiken4-set7/</link>
					<comments>https://jouniorsankosodate.com/eiken4-set7/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Wed, 06 May 2026 12:54:24 +0000</pubDate>
				<category><![CDATA[🟩 英検4級 英語シリーズ]]></category>
		<category><![CDATA[＃フラッシュ]]></category>
		<category><![CDATA[＃無料アプリ]]></category>
		<category><![CDATA[#英単語]]></category>
		<category><![CDATA[＃英検４級]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=5434</guid>

					<description><![CDATA[<p>英検４級 フラッシュ英単語 No.7｜買い物・お金（音声対応） 英検４級 フラッシュ英単語 No.7 買い物・お金 日本語からスタート 🔊 音声ON — — 英語⇆日本語 ▶ 読み上げ わかった 👍 わからん！あとで復習 [&#8230;]</p>
<p>投稿 <a href="https://jouniorsankosodate.com/eiken4-set7/">英検４級 フラッシュ英単語 No.7｜買い物・お金（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>英検４級 フラッシュ英単語 No.7｜買い物・お金（音声対応）</title>

<style>
:root{
  --bg:#f7f7fb;
  --card:#ffffff;
  --ink:#111827;
  --muted:#6b7280;

  --accent:#16a34a;
  --accent-weak:#dcfce7;

  --good:#22c55e;
  --review:#f59e0b;

  --shadow:0 6px 24px rgba(0,0,0,.08);
}

body{
  margin:0;
  background:var(--bg);
}

.wrap{
  max-width:760px;
  margin:0 auto;
  padding:16px 16px 28px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial;
  color:var(--ink);
}

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:8px 0 16px;
  flex-wrap:wrap;
}

h1{
  font-size:18px;
  margin:0;
  font-weight:700;
}

.badge{
  font-size:11px;
  color:var(--accent);
  background:var(--accent-weak);
  padding:3px 8px;
  border-radius:999px;
}

.switches{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:13px;
}

.switches input{
  accent-color:var(--accent);
}

.card-outer{
  position:relative;
  perspective:1200px;
  margin:12px 0 8px;
}

.card{
  position:relative;
  width:100%;
  min-height:190px;
  background:var(--card);
  border-radius:18px;
  box-shadow:var(--shadow);
  cursor:pointer;
  transform-style:preserve-3d;
  transition:transform .5s ease;
}

.card.flipped{
  transform:rotateY(180deg);
}

.face{
  position:absolute;
  inset:0;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  backface-visibility:hidden;
  padding:24px;
  text-align:center;
}

.frontText{
  font-size:30px;
  font-weight:800;
}

.backText{
  font-size:24px;
  font-weight:700;
}

.card-face-back{
  transform:rotateY(180deg);
}

.controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:12px 0;
}

.btn{
  appearance:none;
  border:1px solid #e5e7eb;
  background:#fff;
  padding:11px 12px;
  border-radius:13px;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  color:var(--ink);
}

.btn:hover{
  background:#f0fdf4;
}

.btn.primary{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

.btn.good{
  background:var(--good);
  color:#fff;
  border-color:var(--good);
}

.btn.review{
  background:var(--review);
  color:#fff;
  border-color:var(--review);
}

.meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
}

.progress{
  height:8px;
  background:var(--accent-weak);
  border-radius:999px;
  overflow:hidden;
  flex:1;
}

.bar{
  height:100%;
  width:0;
  background:var(--accent);
  transition:.25s;
}

.index{
  min-width:90px;
  text-align:right;
}

.hint{
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
}

.result-box{
  display:none;
  background:#fff;
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:24px;
  text-align:center;
  margin-top:16px;
}

.result-box h2{
  margin:0 0 10px;
  font-size:22px;
}

.result-box p{
  color:#475569;
  font-weight:700;
}

.series-back-wrap{
  margin:24px 0 8px;
  text-align:center;
}

.series-back-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 18px;
  border-radius:999px;
  background:linear-gradient(135deg,#e0f2fe,#cffafe);
  color:#0f172a;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
}

.series-nav-wrap{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:10px 0 20px;
  flex-wrap:wrap;
}

.series-nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
}

.series-nav-btn.prev{
  background:#f1f5f9;
  color:#334155;
}

.series-nav-btn.next{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;
}

@media (min-width:560px){

  .frontText{font-size:36px}
  .backText{font-size:26px}

  .card{
    min-height:220px;
  }
}

@media(max-width:480px){

  .controls{
    grid-template-columns:1fr;
  }

  .series-back-btn,
  .series-nav-btn{
    width:100%;
    font-size:15px;
    padding:12px 18px;
  }
}
</style>
</head>

<body>

<div class="wrap" id="app">

<header>

  <h1>
    英検４級 フラッシュ英単語
    <span class="badge">No.7 買い物・お金</span>
  </h1>

  <div class="switches">

    <label>
      <input type="checkbox" id="jpFirst">
      日本語からスタート
    </label>

    <label>
      <input type="checkbox" id="speakOn">
      🔊 音声ON
    </label>

  </div>

</header>

<div id="studyArea">

  <div class="card-outer">

    <div class="card" id="card">

      <div class="face card-face-front">
        <div class="frontText" id="frontText">—</div>
      </div>

      <div class="face card-face-back">
        <div class="backText" id="backText">—</div>
      </div>

    </div>

  </div>

  <div class="controls">

    <button class="btn primary" id="flipBtn">
      英語⇆日本語
    </button>

    <button class="btn" id="speakBtn">
      ▶ 読み上げ
    </button>

    <button class="btn good" id="knownBtn">
      わかった 👍
    </button>

    <button class="btn review" id="wrongBtn">
      わからん！あとで復習 📌
    </button>

    <button class="btn" id="shuffleBtn">
      🔀 シャッフル
    </button>

    <button class="btn" id="resetBtn">
      ↩︎ はじめから
    </button>

  </div>

  <div class="meta">

    <div class="progress">
      <div class="bar" id="bar"></div>
    </div>

    <div class="index">
      <span id="pos">1</span>/<span id="total">—</span>
    </div>

  </div>

  <p class="hint">
    カードをタップして答えを確認。わかったら「わかった」、不安なら「あとで復習」を押してね。
  </p>

</div>

<div class="result-box" id="resultBox">

  <h2 id="resultTitle">おつかれさま！✨</h2>

  <p id="resultText"></p>

  <div class="controls">

    <button class="btn review" id="reviewBtn">
      復習する 🔁
    </button>

    <button class="btn" id="againBtn">
      もう一回やる
    </button>

  </div>

</div>

<div class="series-back-wrap">

  <a class="series-back-btn"
     href="https://jouniorsankosodate.com/eiken4-series/">

    <span>📘</span>
    英検4級フラッシュ英単語シリーズ一覧にもどる

  </a>

</div>

<div class="series-nav-wrap">

  <a class="series-nav-btn prev"
     href="https://jouniorsankosodate.com/eiken4-set6/">

    ← 前のレッスン

  </a>

  <a class="series-nav-btn next"
     href="https://jouniorsankosodate.com/eiken4-set8/">

    次のレッスンへ →

  </a>

</div>

</div>

<script>
const ITEMS = [
  { word:"buy", jp:"買う" },
  { word:"sell", jp:"売る" },
  { word:"pay", jp:"支払う" },
  { word:"cost", jp:"費用がかかる" },
  { word:"price", jp:"値段" },
  { word:"money", jp:"お金" },
  { word:"shop", jp:"店・買い物をする" },
  { word:"store", jp:"店" },
  { word:"ticket", jp:"切符・チケット" },
  { word:"change", jp:"おつり・変化" },
  { word:"cheap", jp:"安い" },
  { word:"expensive", jp:"高価な" },
  { word:"cash", jp:"現金" },
  { word:"wallet", jp:"財布" },
  { word:"customer", jp:"客" }
];

let _voice = null;

function pickVoice(){

  const voices = speechSynthesis.getVoices() || [];

  const femaleNames = [
    "Sonia","Serena","Susan","Kate","Libby","Maisie",
    "Google UK English Female",
    "Microsoft Sonia",
    "Microsoft Libby",
    "Microsoft Susan"
  ];

  return voices.find(v =>
    v.lang === "en-GB" &&
    femaleNames.some(name => v.name.includes(name))
  )
  || voices.find(v => v.lang === "en-GB")
  || voices.find(v => (v.lang || "").startsWith("en"))
  || null;
}

(() => {

const card = document.getElementById("card");
const frontText = document.getElementById("frontText");
const backText = document.getElementById("backText");

const posEl = document.getElementById("pos");
const totalEl = document.getElementById("total");
const bar = document.getElementById("bar");

const jpFirst = document.getElementById("jpFirst");
const speakOnChk = document.getElementById("speakOn");

const flipBtn = document.getElementById("flipBtn");
const speakBtn = document.getElementById("speakBtn");

const knownBtn = document.getElementById("knownBtn");
const wrongBtn = document.getElementById("wrongBtn");

const shuffleBtn = document.getElementById("shuffleBtn");
const resetBtn = document.getElementById("resetBtn");

const studyArea = document.getElementById("studyArea");

const resultBox = document.getElementById("resultBox");
const resultTitle = document.getElementById("resultTitle");
const resultText = document.getElementById("resultText");

const reviewBtn = document.getElementById("reviewBtn");
const againBtn = document.getElementById("againBtn");

let order = [...Array(ITEMS.length).keys()];
let idx = 0;

let isFlipped = false;
let showJpFirst = false;
let speakOn = false;

let reviewList = [];

totalEl.textContent = order.length;

speechSynthesis.addEventListener("voiceschanged", () => {
  _voice = pickVoice();
});

function speak(text){

  try{

    if(!("speechSynthesis" in window)) return;

    if(!_voice){
      _voice = pickVoice();
    }

    const u = new SpeechSynthesisUtterance(text.trim());

    if(_voice){
      u.voice = _voice;
      u.lang = _voice.lang || "en-GB";
    }else{
      u.lang = "en-GB";
    }

    u.rate = 0.9;
    u.pitch = 1.05;

    speechSynthesis.cancel();
    speechSynthesis.speak(u);

  }catch(e){}

}

function currentItem(){
  return ITEMS[order[idx]];
}

function render(){

  const it = currentItem();

  card.classList.remove("flipped");
  isFlipped = false;

  frontText.textContent =
    showJpFirst ? it.jp : it.word;

  backText.textContent =
    showJpFirst ? it.word : it.jp;

  posEl.textContent = idx + 1;

  totalEl.textContent = order.length;

  bar.style.width =
    `${((idx + 1) / order.length) * 100}%`;

  if(speakOn){
    speak(it.word);
  }
}

function flip(){

  isFlipped = !isFlipped;

  card.classList.toggle("flipped", isFlipped);
}

function nextCard(){

  if(idx >= order.length - 1){
    showResult();
    return;
  }

  idx++;

  render();
}

function showResult(){

  studyArea.style.display = "none";
  resultBox.style.display = "block";

  if(reviewList.length === 0){

    resultTitle.textContent =
      "ぜんぶできた！すごい！！🎉";

    resultText.textContent =
      "あとで復習する単語は 0こ です。";

    reviewBtn.style.display = "none";

  }else{

    resultTitle.textContent =
      "おつかれさま！✨";

    resultText.textContent =
      `あとで復習する単語は ${reviewList.length}こ あるよ。`;

    reviewBtn.style.display = "inline-block";
  }
}

function startStudy(newOrder){

  order = [...newOrder];
  idx = 0;

  studyArea.style.display = "block";
  resultBox.style.display = "none";

  render();
}

function resetAll(){

  reviewList = [];

  startStudy(
    [...Array(ITEMS.length).keys()]
  );
}

function shuffleOrder(){

  for(let i = order.length - 1; i > 0; i--){

    const j =
      Math.floor(Math.random() * (i + 1));

    [order[i], order[j]] =
      [order[j], order[i]];
  }

  idx = 0;

  render();
}

card.addEventListener("click", flip);

flipBtn.addEventListener("click", flip);

speakBtn.addEventListener("click", () => {
  speak(currentItem().word);
});

knownBtn.addEventListener("click", nextCard);

wrongBtn.addEventListener("click", () => {

  const currentIndex = order[idx];

  if(!reviewList.includes(currentIndex)){
    reviewList.push(currentIndex);
  }

  nextCard();
});

reviewBtn.addEventListener("click", () => {

  if(reviewList.length === 0) return;

  const list = [...reviewList];

  reviewList = [];

  startStudy(list);

});

againBtn.addEventListener("click", resetAll);

shuffleBtn.addEventListener("click", shuffleOrder);

resetBtn.addEventListener("click", resetAll);

jpFirst.addEventListener("change", e => {

  showJpFirst = e.target.checked;

  render();

});

speakOnChk.addEventListener("change", e => {

  speakOn = e.target.checked;

  if(speakOn){
    speak(currentItem().word);
  }

});

window.addEventListener("keydown", e => {

  if(e.key === " "){
    e.preventDefault();
    flip();
  }

});

render();

})();
</script>

</body>
</html>



<p class="wp-block-paragraph"></p>
<p>投稿 <a href="https://jouniorsankosodate.com/eiken4-set7/">英検４級 フラッシュ英単語 No.7｜買い物・お金（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/eiken4-set7/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>🐙 タコタの英語レッスン｜英検４級 よく出る表現いろいろ 編（No.3）</title>
		<link>https://jouniorsankosodate.com/tacota-lesson-eiken4-expressions/</link>
					<comments>https://jouniorsankosodate.com/tacota-lesson-eiken4-expressions/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Mon, 01 Dec 2025 13:05:11 +0000</pubDate>
				<category><![CDATA[🐙 タコタの英語レッスンまとめ]]></category>
		<category><![CDATA[🟩 英検4級 英語シリーズ]]></category>
		<category><![CDATA[＃フラッシュ]]></category>
		<category><![CDATA[＃フレーズ]]></category>
		<category><![CDATA[#英単語]]></category>
		<category><![CDATA[＃英単語アプリ]]></category>
		<category><![CDATA[＃英検４級]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=2119</guid>

					<description><![CDATA[<p>🐙 タコタの英語レッスン｜英検4級 よく出る表現いろいろ 編（No.3） 「It takes〜」「How long〜？」など、英検4級でよく出る表現をまとめたよ✨ まずは音声を聞いて、カードを見ながらすらすら読めるように [&#8230;]</p>
<p>投稿 <a href="https://jouniorsankosodate.com/tacota-lesson-eiken4-expressions/">🐙 タコタの英語レッスン｜英検４級 よく出る表現いろいろ 編（No.3）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<!-- 🐙 タコタの英語レッスン｜英検4級 よく出る表現いろいろ 編（No.3 完全セット） -->
<section class="tacota-lesson">

  <!-- 🖼️ アイキャッチ -->
  <div style="text-align:center;margin-bottom:20px;">
    <img decoding="async" src="https://jouniorsankosodate.com/wp-content/uploads/2025/12/488246207a21f28154bda84336121ad4.jpg"
         alt="タコタの英語レッスン 英検4級 よく出る表現いろいろ 編 アイキャッチ"
         style="width:100%;max-width:900px;border-radius:16px;box-shadow:0 4px 10px rgba(0,0,0,0.15);">
  </div>

  <!-- 🧭 タイトル＆説明 -->
  <div class="tacota-intro" style="max-width:760px;margin:0 auto 28px;padding:16px;text-align:center;background:#f8f4ed;border-radius:20px;">
    <h1 style="font-size:1.6em;color:#1e3a8a;font-weight:800;">🐙 タコタの英語レッスン｜英検4級 よく出る表現いろいろ 編（No.3）</h1>
    <p style="line-height:1.8;margin-top:10px;color:#333;">
      「It takes〜」「How long〜？」など、英検4級でよく出る表現をまとめたよ✨<br>
      まずは音声を聞いて、カードを見ながら<strong>すらすら読めるようになる</strong>のが目標！<br>
      タコタとメガネくんのイラストで、意味がイメージしやすくなるよ🐙📘
    </p>
  </div>

  <!-- 🎓 フラッシュカード本体 -->
  <div class="tacota-flash" id="tacota-ex">

    <style>
      .tacota-flash{--bg:#f8f4ed;--card:#fff;--accent:#3b82f6;--ok:#10b981;--text:#333}
      .tacota-flash{max-width:680px;margin:24px auto;padding:20px;background:var(--bg);
        border-radius:24px;text-align:center;font-family:'Segoe UI','Noto Sans JP',sans-serif;color:var(--text);}
      .tacota-flash .panel{background:var(--card);border-radius:20px;box-shadow:0 4px 15px rgba(0,0,0,.1);padding:16px;}
      .tacota-flash img{width:100%;border-radius:16px;margin-bottom:10px;}
      .tacota-flash .en{font-size:1.5em;font-weight:700;margin:8px 0;}
      .tacota-flash .jp{display:none;margin-top:10px;font-weight:600;background:#ecfdf5;padding:8px 12px;border-radius:12px;}
      .tacota-flash .ctrl{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:10px;}
      .tacota-flash button{border:none;border-radius:10px;padding:8px 14px;cursor:pointer;font-weight:700;font-size:1em;}
      .tacota-flash .toggle{background:#fbbf24;color:#222;}
      .tacota-flash .shuffle{background:#6366f1;color:#fff;}
      .tacota-flash .show{background:var(--ok);color:#fff;}
      .tacota-flash .next{background:#111827;color:#fff;}
      .tacota-flash .footer{margin-top:24px;padding-top:10px;border-top:2px dashed #ddd;font-size:.9em;color:#555;}
    </style>

    <div class="panel">
      <img id="ex-img" alt="">
      <div class="en" id="ex-en">—</div>
      <div class="jp" id="ex-jp"></div>

      <div class="ctrl">
        <button class="toggle" id="ex-toggle">🔈音声OFF</button>
        <button class="shuffle" id="ex-shuffle">🔀 シャッフル</button>
        <button class="show" id="ex-show">💬 答えを見る</button>
        <button class="next" id="ex-next">➡ 次へ</button>
      </div>
    </div>

    <div class="footer">
      © 2025 じゅにさん子育てブログ｜🐙 タコタの英語レッスンシリーズ（英検4級 第3回）
    </div>

    <script>
      const exItems = [
        { en:"It takes TacoTa ten minutes to clean his room.", jp:"タコタは部屋を片づけるのに10分かかるよ。", img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/5fe9af46903f21840a05003fb73d8910.webp"},
        { en:"How often does TacoTa play games?", jp:"タコタはどれくらいゲームする？", img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/0542a4ca24e567841125765fab44a3cb.webp"},
        { en:"How long does TacoTa study every day?", jp:"タコタは毎日どれくらい勉強するの？", img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/5c9ac4c3892a5a64de0214bd04c41f1d.webp"},
        { en:"TacoTa has fun playing with his friends.", jp:"タコタは友達と遊ぶのが楽しい！", img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/d1158e1cffbe4792a18497d44976330e.webp"},
        { en:"TacoTa wants his friend to join him.", jp:"タコタは友達に一緒に来てほしい。", img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/c8f7bf19ad1a1b96ba4d06888f57153e.webp"},
        { en:"TacoTa has to finish his homework.", jp:"タコタは宿題を終わらせなきゃ！", img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/2eda0830c1d2a72208edcb69a34edb29.webp"},
        { en:"TacoTa is going to space.", jp:"タコタは宇宙に行くつもり！", img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/4915834ff63d8d06c33674bc8dc5a182.webp"},
        { en:"TacoTa would like to drink juice.", jp:"タコタはジュースを飲みたい！", img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/aeba71db3b0dcea9931485e17e516814.webp"},
        { en:"TacoTa wants to play outside.", jp:"タコタは外で遊びたい！", img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/55f463e2b027d9b27881a783a4b0cb1d.webp"},
        { en:"TacoTa needs to clean his room.", jp:"タコタは部屋を片づける必要があるよ。", img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/a373611160e4a6f0e67b797e8527ecfe.webp"},
        { en:"TacoTa feels like dancing.", jp:"タコタはダンスしたい気分♪", img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/d99ed16aa1893b85a80ea4501a29e310.webp"}
      ];

      const imgEl=document.getElementById("ex-img");
      const enEl=document.getElementById("ex-en");
      const jpEl=document.getElementById("ex-jp");
      const btnToggle=document.getElementById("ex-toggle");
      const btnShow=document.getElementById("ex-show");
      const btnNext=document.getElementById("ex-next");
      const btnShuffle=document.getElementById("ex-shuffle");

      let idx=0; let soundOn=false;

      function pickVoice(){
        const v=speechSynthesis.getVoices();
        return v.find(v=>/female/i.test(v.name)&&v.lang.startsWith("en"))
            || v.find(v=>v.lang.startsWith("en"))
            || null;
      }
      let EX_VOICE=null;
      if("speechSynthesis" in window){
        speechSynthesis.onvoiceschanged=()=>{EX_VOICE=pickVoice();}
        EX_VOICE=pickVoice();
      }

      function speak(t){
        if(!soundOn)return;
        const u=new SpeechSynthesisUtterance(t);
        if(EX_VOICE)u.voice=EX_VOICE;
        u.lang="en-GB";u.rate=0.95;u.pitch=1.05;
        speechSynthesis.cancel();speechSynthesis.speak(u);
      }

      function showCard(i){
        const it=exItems[i];
        imgEl.src=it.img;
        enEl.textContent=it.en;
        jpEl.style.display="none";
        jpEl.textContent=it.jp;
        speak(it.en);
      }

      btnToggle.addEventListener("click",()=>{
        soundOn=!soundOn;
        btnToggle.textContent=soundOn?"🔊音声ON":"🔈音声OFF";
        if(soundOn)speak(exItems[idx].en);
      });
      btnShow.addEventListener("click",()=>jpEl.style.display="block");
      btnNext.addEventListener("click",()=>{idx=(idx+1)%exItems.length;showCard(idx);});
      btnShuffle.addEventListener("click",()=>{exItems.sort(()=>Math.random()-0.5);idx=0;showCard(idx);});

      showCard(idx);
    </script>

  </div>
</section>

<!-- 🔗 タコタの英語レッスン 英検4級シリーズ｜関連記事 No.3用 -->
<section class="tacota-related" aria-label="関連記事">

  <style>
    .tacota-related{max-width:920px;margin:28px auto;padding:16px;background:#faf6ee;border:1px solid #f0e7d7;
      border-radius:18px;font-family:'Segoe UI','Noto Sans JP',sans-serif;color:#333}
    .tacota-related h3{margin:0 0 14px;font-size:1.2em;color:#1e3a8a}
    .tacota-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    @media(max-width:820px){.tacota-grid{grid-template-columns:1fr 1fr}}
    @media(max-width:520px){.tacota-grid{grid-template-columns:1fr}}
    .t-card{display:flex;flex-direction:column;background:#fff;border:1px solid #eee;
      border-radius:14px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.05)}
    .t-thumb{aspect-ratio:16/9;background:#f4efe6}
    .t-thumb img{width:100%;height:100%;object-fit:cover;display:block}
    .t-body{padding:10px 12px}
    .t-title{font-weight:800;line-height:1.4}
    .t-desc{font-size:.92em;color:#555;margin-top:4px}
    .t-more{display:inline-block;margin:10px 12px 12px;padding:8px 12px;border-radius:10px;
      background:#1f2937;color:#fff;text-decoration:none;font-weight:700}
    .t-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
    .t-badge{font-size:.78em;background:#e8eefc;color:#234;padding:3px 8px;border-radius:999px}
  </style>

  <h3>🔗 関連記事・次のレッスン</h3>

  <div class="tacota-grid">

    <!-- No.1 -->
    <article class="t-card">
      <a class="t-thumb" href="https://jouniorsankosodate.com/tacota-lesson-eiken4-be/">
        <img decoding="async" src="https://jouniorsankosodate.com/wp-content/uploads/2025/12/3786d9324b0a83b0c02a3868dbb7698c.jpg" alt="英検4級 be動詞編">
      </a>
      <div class="t-body">
        <div class="t-title">📘 be動詞 編（No.1）</div>
        <div class="t-badges"><span class="t-badge">11フレーズ</span></div>
        <p class="t-desc">be good at／be afraid of など英検4級で必須の基本表現。</p>
      </div>
      <a class="t-more" href="https://jouniorsankosodate.com/tacota-lesson-eiken4-be/">▶ 開く</a>
    </article>

    <!-- No.2 -->
    <article class="t-card">
      <a class="t-thumb" href="https://jouniorsankosodate.com/tacota-lesson-eiken4-vp/">
        <img decoding="async" src="https://jouniorsankosodate.com/wp-content/uploads/2025/12/5187412ed924223da042fabb21017c0d.jpg" alt="英検4級 動詞＋前置詞編">
      </a>
      <div class="t-body">
        <div class="t-title">🎨 動詞＋前置詞 編（No.2）</div>
        <div class="t-badges"><span class="t-badge">12フレーズ</span></div>
        <p class="t-desc">look at／listen to／wait for など英検4級の重要表現。</p>
      </div>
      <a class="t-more" href="https://jouniorsankosodate.com/tacota-lesson-eiken4-vp/">▶ 開く</a>
    </article>

    <!-- No.3（今ここ） -->
    <article class="t-card">
      <a class="t-thumb" href="#">
        <img decoding="async" src="https://jouniorsankosodate.com/wp-content/uploads/2025/12/488246207a21f28154bda84336121ad4.jpg" alt="英検4級 よく出る表現いろいろ編">
      </a>
      <div class="t-body">
        <div class="t-title">📝 よく出る表現いろいろ 編（No.3／今ここ）</div>
        <div class="t-badges"><span class="t-badge">11フレーズ</span></div>
        <p class="t-desc">It takes〜／want to〜 など、会話でそのまま使える頻出表現。</p>
      </div>
      <a class="t-more" href="#">◎ 閲覧中</a>
    </article>

  </div>

  <div style="text-align:center;margin-top:16px">
    <a class="t-more" href="https://jouniorsankosodate.com/category/learn/english-flash/">📚 シリーズ一覧へ</a>
  </div>

</section>



<p class="wp-block-paragraph"></p>
<p>投稿 <a href="https://jouniorsankosodate.com/tacota-lesson-eiken4-expressions/">🐙 タコタの英語レッスン｜英検４級 よく出る表現いろいろ 編（No.3）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/tacota-lesson-eiken4-expressions/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>🐙 タコタの英語レッスン｜英検４級 動詞＋前置詞 編（No.2）</title>
		<link>https://jouniorsankosodate.com/tacota-lesson-eiken4-vp/</link>
					<comments>https://jouniorsankosodate.com/tacota-lesson-eiken4-vp/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Mon, 01 Dec 2025 13:05:09 +0000</pubDate>
				<category><![CDATA[🐙 タコタの英語レッスンまとめ]]></category>
		<category><![CDATA[🟩 英検4級 英語シリーズ]]></category>
		<category><![CDATA[＃フラッシュ]]></category>
		<category><![CDATA[＃フレーズ]]></category>
		<category><![CDATA[＃無料アプリ]]></category>
		<category><![CDATA[#英単語]]></category>
		<category><![CDATA[＃英検４級]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=2117</guid>

					<description><![CDATA[<p>🐙 タコタの英語レッスン｜英検4級 動詞＋前置詞 編（No.2） 「look at」「listen to」「wait for」など、英検4級で必ず覚えておきたい動詞＋前置詞をまとめたよ✨ まずは音声を聞いて、カードを見な [&#8230;]</p>
<p>投稿 <a href="https://jouniorsankosodate.com/tacota-lesson-eiken4-vp/">🐙 タコタの英語レッスン｜英検４級 動詞＋前置詞 編（No.2）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<!-- 🐙 タコタの英語レッスン｜英検4級 動詞＋前置詞 編（No.2 完全セット） -->
<section class="tacota-lesson">

  <!-- 🖼️ アイキャッチ -->
  <div style="text-align:center;margin-bottom:20px;">
    <img decoding="async" src="https://jouniorsankosodate.com/wp-content/uploads/2025/12/5187412ed924223da042fabb21017c0d.jpg"
         alt="タコタの英語レッスン 英検4級 動詞＋前置詞 編 アイキャッチ"
         style="width:100%;max-width:900px;border-radius:16px;box-shadow:0 4px 10px rgba(0,0,0,0.15);">
  </div>

  <!-- 🧭 タイトル＆説明 -->
  <div class="tacota-intro" style="max-width:760px;margin:0 auto 28px;padding:16px;text-align:center;background:#f8f4ed;border-radius:20px;">
    <h1 style="font-size:1.6em;color:#1e3a8a;font-weight:800;">🐙 タコタの英語レッスン｜英検4級 動詞＋前置詞 編（No.2）</h1>
    <p style="line-height:1.8;margin-top:10px;color:#333;">
      「look at」「listen to」「wait for」など、<strong>英検4級で必ず覚えておきたい動詞＋前置詞</strong>をまとめたよ✨<br>
      まずは音声を聞いて、カードを見ながら<strong>すらすら読めるように</strong>なろう！<br>
      タコタとメガネくんが映像で分かりやすくイメージを作ってくれるよ🐙📘
    </p>
  </div>

  <!-- 🎓 フラッシュカード本体 -->
  <div class="tacota-flash" id="tacota-vp">

    <style>
      .tacota-flash{--bg:#f8f4ed;--card:#fff;--accent:#3b82f6;--ok:#10b981;--text:#333}
      .tacota-flash{max-width:680px;margin:24px auto;padding:20px;background:var(--bg);
        border-radius:24px;text-align:center;font-family:'Segoe UI','Noto Sans JP',sans-serif;color:var(--text);}
      .tacota-flash .panel{background:var(--card);border-radius:20px;box-shadow:0 4px 15px rgba(0,0,0,.1);padding:16px;}
      .tacota-flash img{width:100%;border-radius:16px;margin-bottom:10px;}
      .tacota-flash .en{font-size:1.5em;font-weight:700;margin:8px 0;}
      .tacota-flash .jp{display:none;margin-top:10px;font-weight:600;background:#ecfdf5;padding:8px 12px;border-radius:12px;}
      .tacota-flash .ctrl{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:10px;}
      .tacota-flash button{border:none;border-radius:10px;padding:8px 14px;cursor:pointer;font-weight:700;font-size:1em;}
      .tacota-flash .toggle{background:#fbbf24;color:#222;}
      .tacota-flash .shuffle{background:#6366f1;color:#fff;}
      .tacota-flash .show{background:var(--ok);color:#fff;}
      .tacota-flash .next{background:#111827;color:#fff;}
      .tacota-flash .footer{margin-top:24px;padding-top:10px;border-top:2px dashed #ddd;font-size:.9em;color:#555;}
    </style>

    <div class="panel">
      <img id="vp-img" alt="">
      <div class="en" id="vp-en">—</div>
      <div class="jp" id="vp-jp"></div>

      <div class="ctrl">
        <button class="toggle" id="vp-toggle">🔈音声OFF</button>
        <button class="shuffle" id="vp-shuffle">🔀 シャッフル</button>
        <button class="show" id="vp-show">💬 答えを見る</button>
        <button class="next" id="vp-next">➡ 次へ</button>
      </div>
    </div>

    <div class="footer">
      © 2025 じゅにさん子育てブログ｜🐙 タコタの英語レッスンシリーズ（英検4級 第2回）
    </div>

    <script>
      const vpItems = [
        { en:"TacoTa is looking for his pen.", jp:"タコタはペンを探しているよ。", img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/3293ab8cab989f3ec211d7d01f80e223.jpg"},
        { en:"TacoTa listens to music.", jp:"タコタは音楽を聞いているよ。", img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/4f53a005ac7971e3ae1367838cc8e39b.jpg"},
        { en:"TacoTa looks at a butterfly.", jp:"タコタはちょうちょを見ているよ。", img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/b7fb8176cf23708646927a59d9252dce.jpg"},
        { en:"TacoTa looks like a hero.", jp:"タコタはヒーローみたいだね！", img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/060cc03a8a24db019258233ddde32bf0.jpg"},
        { en:"TacoTa hears from Megane-Boy.", jp:"タコタはメガネくんから連絡をもらったよ。", img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/f67ad5309da5eda8fe7c868d102132a4.jpg"},
        { en:"TacoTa thinks about his next snack.", jp:"タコタは次のおやつについて考えてる。", img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/3bcfd1c500e9c5497ac5b724aab542f7.jpg"},
        { en:"TacoTa talks about robots.", jp:"タコタはロボットについて話すよ。", img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/324e10cce1493718f7ea2e7b83cc0902.jpg"},
        { en:"TacoTa asks for help.", jp:"タコタは助けを求めるよ。", img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/f55af42342f9fe268fda21b1820502ea.jpg"},
        { en:"TacoTa waits for the bus.", jp:"タコタはバスを待っているよ。", img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/ca3e9f53500a200d9ffbdb3daf111548.jpg"},
        { en:"TacoTa depends on his team.", jp:"タコタは仲間を頼りにしているよ。", img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/eba1e55a841e98836cb0ed66bf8a5333.jpg"},
        { en:"TacoTa agrees with the idea.", jp:"タコタはその考えに賛成！", img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/6bbc8e05f441f5d1b9556feb5611e15f.jpg"},
        { en:"TacoTa belongs to the art club.", jp:"タコタは美術部に入ってるよ。", img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/5f51ad420faf9c7efc7f42de52bbe155.jpg"}
      ];

      const imgEl=document.getElementById("vp-img");
      const enEl=document.getElementById("vp-en");
      const jpEl=document.getElementById("vp-jp");
      const btnToggle=document.getElementById("vp-toggle");
      const btnShow=document.getElementById("vp-show");
      const btnNext=document.getElementById("vp-next");
      const btnShuffle=document.getElementById("vp-shuffle");

      let idx=0; let soundOn=false;

      function pickVoice(){
        const voices=speechSynthesis.getVoices();
        return voices.find(v=>/female/i.test(v.name)&&v.lang.startsWith("en"))
            || voices.find(v=>v.lang.startsWith("en"))
            || null;
      }
      let VP_VOICE=null;
      if("speechSynthesis" in window){
        speechSynthesis.onvoiceschanged=()=>{VP_VOICE=pickVoice();}
        VP_VOICE=pickVoice();
      }

      function speak(text){
        if(!soundOn||!("speechSynthesis" in window))return;
        const u=new SpeechSynthesisUtterance(text);
        if(VP_VOICE)u.voice=VP_VOICE;
        u.lang="en-GB";u.rate=0.95;u.pitch=1.05;
        speechSynthesis.cancel();speechSynthesis.speak(u);
      }

      function showCard(i){
        const it=vpItems[i];
        imgEl.src=it.img;
        imgEl.alt=it.en;
        enEl.textContent=it.en;
        jpEl.style.display="none";
        jpEl.textContent=it.jp;
        speak(it.en);
      }

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

      btnToggle.addEventListener("click",()=>{
        soundOn=!soundOn;
        btnToggle.textContent=soundOn?"🔊音声ON":"🔈音声OFF";
        if(soundOn)speak(vpItems[idx].en);
      });
      btnShow.addEventListener("click",()=>jpEl.style.display="block");
      btnNext.addEventListener("click",()=>{idx=(idx+1)%vpItems.length;showCard(idx);});
      btnShuffle.addEventListener("click",()=>{shuffle(vpItems);idx=0;showCard(idx);});

      showCard(idx);
    </script>

  </div>
</section>

<!-- 🔗 タコタの英語レッスン 英検4級シリーズ｜関連記事 No.2用 -->
<section class="tacota-related" aria-label="関連記事">

  <style>
    .tacota-related{max-width:920px;margin:28px auto;padding:16px;background:#faf6ee;border:1px solid #f0e7d7;
      border-radius:18px;font-family:'Segoe UI','Noto Sans JP',sans-serif;color:#333}
    .tacota-related h3{margin:0 0 14px;font-size:1.2em;color:#1e3a8a}
    .tacota-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    @media(max-width:820px){.tacota-grid{grid-template-columns:1fr 1fr}}
    @media(max-width:520px){.tacota-grid{grid-template-columns:1fr}}
    .t-card{display:flex;flex-direction:column;background:#fff;border:1px solid #eee;
      border-radius:14px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.05)}
    .t-thumb{aspect-ratio:16/9;background:#f4efe6}
    .t-thumb img{width:100%;height:100%;object-fit:cover;display:block}
    .t-body{padding:10px 12px}
    .t-title{font-weight:800;line-height:1.4}
    .t-desc{font-size:.92em;color:#555;margin-top:4px}
    .t-more{display:inline-block;margin:10px 12px 12px;padding:8px 12px;border-radius:10px;
      background:#1f2937;color:#fff;text-decoration:none;font-weight:700}
    .t-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
    .t-badge{font-size:.78em;background:#e8eefc;color:#234;padding:3px 8px;border-radius:999px}
  </style>

  <h3>🔗 関連記事・次のレッスン</h3>

  <div class="tacota-grid">

    <!-- No.1 -->
    <article class="t-card">
      <a class="t-thumb" href="https://jouniorsankosodate.com/tacota-lesson-eiken4-be/">
        <img decoding="async" src="https://jouniorsankosodate.com/wp-content/uploads/2025/12/3786d9324b0a83b0c02a3868dbb7698c.jpg" alt="英検4級 be動詞編">
      </a>
      <div class="t-body">
        <div class="t-title">📘 be動詞 編（No.1）</div>
        <div class="t-badges"><span class="t-badge">11フレーズ</span></div>
        <p class="t-desc">be good at／be afraid of など英検4級で必須の基本表現。</p>
      </div>
      <a class="t-more" href="https://jouniorsankosodate.com/tacota-lesson-eiken4-be/">▶ 開く</a>
    </article>

    <!-- No.2（今ここ） -->
    <article class="t-card">
      <a class="t-thumb" href="#">
        <img decoding="async" src="https://jouniorsankosodate.com/wp-content/uploads/2025/12/5187412ed924223da042fabb21017c0d.jpg" alt="英検4級 動詞＋前置詞編">
      </a>
      <div class="t-body">
        <div class="t-title">🎨 動詞＋前置詞 編（No.2／今ここ）</div>
        <div class="t-badges"><span class="t-badge">12フレーズ</span></div>
        <p class="t-desc">look at／listen to／wait for など、セットで覚えたい英検4級の重要表現。</p>
      </div>
      <a class="t-more" href="#">◎ 閲覧中</a>
    </article>

    <!-- No.3 -->
    <article class="t-card">
      <a class="t-thumb" href="https://jouniorsankosodate.com/tacota-lesson-eiken4-expressions/">
        <img decoding="async" src="https://jouniorsankosodate.com/wp-content/uploads/2025/12/488246207a21f28154bda84336121ad4.jpg" alt="英検4級 よく出る表現いろいろ 編">
      </a>
      <div class="t-body">
        <div class="t-title">📝 よく出る表現いろいろ 編（No.3）</div>
        <div class="t-badges"><span class="t-badge">11フレーズ</span></div>
        <p class="t-desc">It takes〜／want to〜 など、会話でそのまま使える頻出表現。</p>
      </div>
      <a class="t-more" href="https://jouniorsankosodate.com/tacota-lesson-eiken4-expressions/">▶ 開く</a>
    </article>

  </div>

  <div style="text-align:center;margin-top:16px">
    <a class="t-more" href="https://jouniorsankosodate.com/category/learn/english-flash/">📚 シリーズ一覧へ</a>
  </div>

</section>




<p class="wp-block-paragraph"></p>
<p>投稿 <a href="https://jouniorsankosodate.com/tacota-lesson-eiken4-vp/">🐙 タコタの英語レッスン｜英検４級 動詞＋前置詞 編（No.2）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/tacota-lesson-eiken4-vp/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>🐙 タコタの英語レッスン｜英検４級 be動詞 編（No.1）</title>
		<link>https://jouniorsankosodate.com/tacota-lesson-eiken4-be/</link>
					<comments>https://jouniorsankosodate.com/tacota-lesson-eiken4-be/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Mon, 01 Dec 2025 13:05:06 +0000</pubDate>
				<category><![CDATA[🐙 タコタの英語レッスンまとめ]]></category>
		<category><![CDATA[🟩 英検4級 英語シリーズ]]></category>
		<category><![CDATA[#タコタの英語レッスン]]></category>
		<category><![CDATA[＃フラッシュ]]></category>
		<category><![CDATA[＃無料アプリ]]></category>
		<category><![CDATA[＃英検４級]]></category>
		<category><![CDATA[#英語フレーズ]]></category>
		<category><![CDATA[#英語学習]]></category>
		<category><![CDATA[#英語学習アプリ]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=2101</guid>

					<description><![CDATA[<p>🐙 タコタの英語レッスン｜英検4級 よく出るフレーズ（be動詞編／No.1） まずは 音声を聞いて、イラストを見ながら“すらすら読める”ようになってみよう！ be動詞は英検4級の中でもいちばん大事な「基礎のき」。 be  [&#8230;]</p>
<p>投稿 <a href="https://jouniorsankosodate.com/tacota-lesson-eiken4-be/">🐙 タコタの英語レッスン｜英検４級 be動詞 編（No.1）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<!-- 🐙 タコタの英語レッスン｜英検4級 be動詞 編（No.1／アイキャッチ付き完全セット） -->
<section class="tacota-lesson">
  <!-- 🖼️ アイキャッチ -->
  <div style="text-align:center;margin-bottom:20px;">
    <img decoding="async" src="https://jouniorsankosodate.com/wp-content/uploads/2025/12/3786d9324b0a83b0c02a3868dbb7698c.jpg"
         alt="タコタの英語レッスン 英検4級 be動詞 編 アイキャッチ"
         style="width:100%;max-width:900px;border-radius:16px;box-shadow:0 4px 10px rgba(0,0,0,0.15);">
  </div>

  <!-- 🧭 タイトル＆説明 -->
  <div class="tacota-intro" style="max-width:760px;margin:0 auto 28px;padding:16px;text-align:center;background:#f8f4ed;border-radius:20px;">
    <h1 style="font-size:1.6em;color:#1e3a8a;font-weight:800;">
      🐙 タコタの英語レッスン｜英検4級 よく出るフレーズ（be動詞編／No.1）
    </h1>
    <p style="line-height:1.8;margin-top:10px;color:#333;">
      まずは <strong>音声を聞いて、イラストを見ながら“すらすら読める”ようになってみよう！</strong><br>
      be動詞は英検4級の中でもいちばん大事な「基礎のき」。<br>
      <strong>be good at／be interested in／be afraid of</strong> など、よく出る表現をタコタのイラストと英国英語音声で楽しくマスターしよう🎧
    </p>
  </div>

  <!-- 🎓 フラッシュカード本体（be動詞編） -->
  <div class="tacota-flash" id="tacota-eiken4-be">
    <style>
      .tacota-flash{--bg:#f8f4ed;--card:#fff;--accent:#3b82f6;--ok:#10b981;--text:#333}
      .tacota-flash{
        max-width:680px;margin:24px auto;padding:20px;
        background:var(--bg);border-radius:24px;text-align:center;
        font-family:'Segoe UI','Noto Sans JP',sans-serif;color:var(--text);
      }
      .tacota-flash .panel{
        background:var(--card);border-radius:20px;
        box-shadow:0 4px 15px rgba(0,0,0,.1);padding:16px;
      }
      .tacota-flash img{width:100%;border-radius:16px;margin-bottom:10px;}
      .tacota-flash .en{font-size:1.5em;font-weight:700;margin:8px 0;}
      .tacota-flash .jp{
        display:none;margin-top:10px;font-weight:600;
        background:#ecfdf5;padding:8px 12px;border-radius:12px;
      }
      .tacota-flash .ctrl{
        display:flex;justify-content:center;flex-wrap:wrap;
        gap:8px;margin-top:10px;
      }
      .tacota-flash button{
        border:none;border-radius:10px;padding:8px 14px;
        cursor:pointer;font-weight:700;font-size:1em;
      }
      .tacota-flash .toggle{background:#fbbf24;color:#222;}
      .tacota-flash .shuffle{background:#6366f1;color:#fff;}
      .tacota-flash .show{background:var(--ok);color:#fff;}
      .tacota-flash .next{background:#111827;color:#fff;}
      .tacota-flash .footer{
        margin-top:24px;padding-top:10px;
        border-top:2px dashed #ddd;font-size:.9em;color:#555;
      }
    </style>

    <div class="panel">
      <img id="e4be-img" alt="">
      <div class="en" id="e4be-en">—</div>
      <div class="jp" id="e4be-jp"></div>
      <div class="ctrl">
        <button class="toggle"  id="e4be-toggle">🔈音声OFF</button>
        <button class="shuffle" id="e4be-shuffle">🔀 シャッフル</button>
        <button class="show"    id="e4be-show">💬 日本語を見る</button>
        <button class="next"    id="e4be-next">➡ 次へ</button>
      </div>
    </div>

    <div class="footer">
      © 2025 じゅにさん子育てブログ｜🐙 タコタの英語レッスンシリーズ（英検4級 be動詞編／No.1）
    </div>

    <script>
      const e4beItems = [
        {
          en:"TacoTa is good at swimming.",
          jp:"タコタは泳ぐのが得意！",
          img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/a8b9f47677514071cd3e42dd1d2e0112.webp"
        },
        {
          en:"TacoTa is interested in space.",
          jp:"タコタは宇宙に興味があるよ。",
          img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/2b31225d1e1196e3fd670b4d0513d648.webp"
        },
        {
          en:"TacoTa is afraid of spiders.",
          jp:"タコタはクモがこわいんだ。",
          img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/26fb9e52a1485427944c90cbccca0134.webp"
        },
        {
          en:"TacoTa is different from other kids.",
          jp:"タコタはほかの子とちがうんだ。",
          img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/b6f2916de9786e492ff05978258ec5a9.webp"
        },
        {
          en:"TacoTa’s bag is full of snacks.",
          jp:"タコタのカバンはおやつでいっぱい！",
          img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/44bb5b8c32fcf5e069d773a9a62f0842.webp"
        },
        {
          en:"TacoTa is famous for his fast running.",
          jp:"タコタは足が速いことで有名。",
          img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/b4c7313f7a145d6fff2033a6275de7cb.webp"
        },
        {
          en:"TacoTa is late for school.",
          jp:"タコタは学校に遅れちゃった。",
          img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/a9c8d2ec53753fe7735462a0ca845940.webp"
        },
        {
          en:"TacoTa is popular with his class.",
          jp:"タコタはクラスで人気者。",
          img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/35d09729e7f438d4ef328dacf3efef8f.webp"
        },
        {
          en:"TacoTa’s house is close to a park.",
          jp:"タコタの家は公園の近く。",
          img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/33c1170290cd53d1aef65f2ee118b648.webp"
        },
        {
          en:"TacoTa is ready to play.",
          jp:"タコタは遊ぶ準備バッチリ！",
          img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/bf78566659b7cc198aabce54586d647f.webp"
        },
        {
          en:"TacoTa is excited about the trip.",
          jp:"タコタは遠足にワクワクしてる！",
          img:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/eadc90d4d38cc2127d73e3d1a79ae07c.webp"
        }
      ];

      const e4beImg   = document.getElementById("e4be-img");
      const e4beEn    = document.getElementById("e4be-en");
      const e4beJp    = document.getElementById("e4be-jp");
      const e4beTgl   = document.getElementById("e4be-toggle");
      const e4beShow  = document.getElementById("e4be-show");
      const e4beNext  = document.getElementById("e4be-next");
      const e4beShuf  = document.getElementById("e4be-shuffle");

      let e4beIdx = 0;
      let e4beSoundOn = false;
      let TAKOTA_E4BE_VOICE = null;

      function pickTakotaE4beVoice(){
        const voices = speechSynthesis.getVoices() || [];
        const enVoices = voices.filter(v =>
          (v.lang || "").toLowerCase().startsWith("en") ||
          /english/i.test(v.name || "")
        );
        const female =
          enVoices.find(v => /google uk english female/i.test(v.name || "")) ||
          enVoices.find(v => /female|woman/i.test(v.name || ""));
        return female || enVoices[0] || null;
      }

      if ("speechSynthesis" in window){
        const setVoice = () => { TAKOTA_E4BE_VOICE = pickTakotaE4beVoice(); };
        speechSynthesis.addEventListener("voiceschanged", setVoice);
        setVoice();
      }

      function takotaE4beSpeak(text){
        if (!("speechSynthesis" in window)) return;

        if (!TAKOTA_E4BE_VOICE){
          TAKOTA_E4BE_VOICE = pickTakotaE4beVoice();
        }

        const u = new SpeechSynthesisUtterance(text);

        if (TAKOTA_E4BE_VOICE){
          u.voice = TAKOTA_E4BE_VOICE;
          u.lang  = TAKOTA_E4BE_VOICE.lang || "en-GB";
        } else {
          u.lang = "en-GB";
        }

        u.rate  = 0.95;
        u.pitch = 1.05;

        speechSynthesis.cancel();
        speechSynthesis.speak(u);
      }

      function takotaE4beShowCard(i){
        const it = e4beItems[i];
        e4beImg.src = it.img;
        e4beImg.alt = it.en;
        e4beEn.textContent = it.en;
        e4beJp.style.display = "none";
        e4beJp.textContent   = it.jp;
        if(e4beSoundOn) takotaE4beSpeak(it.en);
      }

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

      e4beTgl.addEventListener("click",()=>{
        e4beSoundOn = !e4beSoundOn;
        e4beTgl.textContent = e4beSoundOn ? "🔊音声ON" : "🔈音声OFF";
        if(e4beSoundOn) takotaE4beSpeak(e4beItems[e4beIdx].en);
      });

      e4beShow.addEventListener("click",()=>{ e4beJp.style.display="block"; });

      e4beNext.addEventListener("click",()=>{
        e4beIdx = (e4beIdx+1) % e4beItems.length;
        takotaE4beShowCard(e4beIdx);
      });

      e4beShuf.addEventListener("click",()=>{
        takotaE4beShuffle(e4beItems);
        e4beIdx = 0;
        takotaE4beShowCard(e4beIdx);
      });

      takotaE4beShowCard(e4beIdx);
      if('speechSynthesis' in window){
        speechSynthesis.getVoices();
        speechSynthesis.onvoiceschanged = ()=>{};
      }
    </script>
  </div>
</section>




<!-- 🔗 タコタの英語レッスン 英検4級シリーズ｜関連記事 No.1用 -->
<section class="tacota-related" aria-label="関連記事">
  <style>
    .tacota-related{max-width:920px;margin:28px auto;padding:16px;background:#faf6ee;border:1px solid #f0e7d7;border-radius:18px;font-family:'Segoe UI','Noto Sans JP',sans-serif;color:#333}
    .tacota-related h3{margin:0 0 14px;font-size:1.2em;color:#1e3a8a}
    .tacota-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    @media(max-width:820px){.tacota-grid{grid-template-columns:1fr 1fr}}
    @media(max-width:520px){.tacota-grid{grid-template-columns:1fr}}
    .t-card{display:flex;flex-direction:column;background:#fff;border:1px solid #eee;border-radius:14px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.05)}
    .t-thumb{aspect-ratio:16/9;background:#f4efe6}
    .t-thumb img{width:100%;height:100%;object-fit:cover;display:block}
    .t-body{padding:10px 12px}
    .t-title{font-weight:800;line-height:1.4}
    .t-desc{font-size:.92em;color:#555;margin-top:4px}
    .t-more{display:inline-block;margin:10px 12px 12px;padding:8px 12px;border-radius:10px;background:#1f2937;color:#fff;text-decoration:none;font-weight:700}
    .t-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
    .t-badge{font-size:.78em;background:#e8eefc;color:#234;padding:3px 8px;border-radius:999px}
    .tacota-nextprev{margin-top:18px;text-align:center;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
    .t-navbtn{display:inline-block;padding:8px 14px;border-radius:999px;background:#1f2937;color:#fff;text-decoration:none;font-weight:700;font-size:.9em}
  </style>

  <h3>🔗 タコタの英語レッスン｜英検4級シリーズ</h3>
  <div class="tacota-grid">
    <!-- 今ここ：No.1 be動詞 編 -->
    <article class="t-card">
      <a class="t-thumb" href="#">
        <img decoding="async" src="https://jouniorsankosodate.com/wp-content/uploads/2025/12/3786d9324b0a83b0c02a3868dbb7698c.jpg" alt="タコタの英語レッスン｜英検4級 be動詞 編">
      </a>
      <div class="t-body">
        <div class="t-title">🐙 英検4級 be動詞 編（No.1）</div>
        <div class="t-badges">
          <span class="t-badge">11フレーズ</span>
          <span class="t-badge">be動詞</span>
          <span class="t-badge">音声つき</span>
        </div>
        <p class="t-desc">be動詞＋表現（be good at／be interested in など）を、タコタの例文でまとめてチェック。</p>
      </div>
      <a class="t-more" href="#">◎ 閲覧中</a>
    </article>

    <!-- No.2 動詞＋前置詞 編 -->
    <article class="t-card">
      <a class="t-thumb" href="https://jouniorsankosodate.com/tacota-lesson-eiken4-vp/">
        <img decoding="async" src="https://jouniorsankosodate.com/wp-content/uploads/2025/12/5187412ed924223da042fabb21017c0d.jpg" alt="タコタの英語レッスン｜英検4級 動詞＋前置詞 編">
      </a>
      <div class="t-body">
        <div class="t-title">🐙 動詞＋前置詞 編（No.2）</div>
        <div class="t-badges">
          <span class="t-badge">12フレーズ</span>
          <span class="t-badge">look for など</span>
        </div>
        <p class="t-desc">look for／listen to／wait for など、セットで覚えたい「動詞＋前置詞」表現を収録。</p>
      </div>
      <a class="t-more" href="https://jouniorsankosodate.com/tacota-lesson-eiken4-vp/">▶ 開く</a>
    </article>

    <!-- No.3 よく出る表現いろいろ 編 -->
    <article class="t-card">
      <a class="t-thumb" href="https://jouniorsankosodate.com/tacota-lesson-eiken4-expressions/">
        <img decoding="async" src="https://jouniorsankosodate.com/wp-content/uploads/2025/12/488246207a21f28154bda84336121ad4.jpg" alt="タコタの英語レッスン｜英検4級 よく出る表現いろいろ 編">
      </a>
      <div class="t-body">
        <div class="t-title">🐙 よく出る表現いろいろ 編（No.3）</div>
        <div class="t-badges">
          <span class="t-badge">11フレーズ</span>
          <span class="t-badge">It takes など</span>
        </div>
        <p class="t-desc">It takes／How often／want to／need to など、テストにも会話にも使える表現まとめ。</p>
      </div>
      <a class="t-more" href="https://jouniorsankosodate.com/tacota-lesson-eiken4-expressions/">▶ 開く</a>
    </article>
  </div>

  <!-- 前へ・次へナビ（No.1なので「次へ」だけ） -->
  <div class="tacota-nextprev">
    <a class="t-navbtn" href="https://jouniorsankosodate.com/tacota-lesson-eiken4-vp/">▶ No.2「動詞＋前置詞 編」へ</a>
  </div>
</section>

<p>投稿 <a href="https://jouniorsankosodate.com/tacota-lesson-eiken4-be/">🐙 タコタの英語レッスン｜英検４級 be動詞 編（No.1）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/tacota-lesson-eiken4-be/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>🐙タコタ式スペル練習② 行動・生活（20語）</title>
		<link>https://jouniorsankosodate.com/takota-spell-2-action-life/</link>
					<comments>https://jouniorsankosodate.com/takota-spell-2-action-life/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Thu, 06 Nov 2025 03:19:18 +0000</pubDate>
				<category><![CDATA[🐙英単語スペル練習]]></category>
		<category><![CDATA[🟦 英検3級 英語シリーズ]]></category>
		<category><![CDATA[🟩 英検4級 英語シリーズ]]></category>
		<category><![CDATA[#スペル練習]]></category>
		<category><![CDATA[＃無料アプリ]]></category>
		<category><![CDATA[#英作文]]></category>
		<category><![CDATA[#英単語スペル練習]]></category>
		<category><![CDATA[#英単語学習]]></category>
		<category><![CDATA[#英検3級]]></category>
		<category><![CDATA[＃英検４級]]></category>
		<category><![CDATA[＃英検５級]]></category>
		<category><![CDATA[#英語学習アプリ]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=1773</guid>

					<description><![CDATA[<p>英語学習シリーズ： 📗5級フラッシュ 📘4級フラッシュ 🏫中学英単語 🐙タコタ式スペル練習 💬タコタ英語レッスン タコタ式スペル練習② 行動・生活（20語） go, play, study など “毎日の行動”を表す基本 [&#8230;]</p>
<p>投稿 <a href="https://jouniorsankosodate.com/takota-spell-2-action-life/">🐙タコタ式スペル練習② 行動・生活（20語）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<!-- 🔗 英語学習シリーズ 回遊ナビ（パンくず風） -->
<style>
.series-nav-wrap{
  max-width:920px;margin:18px auto 14px;padding:8px 10px;
  background:#f8fafc;border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
  font-size:12px;color:#475569;
}
.series-nav-label{
  font-weight:700;margin-right:6px;
  display:inline-flex;align-items:center;gap:4px;
}
.series-nav-label::before{content:"🚩";}
.series-nav-links{
  display:inline-flex;flex-wrap:wrap;gap:6px;
}
.series-nav-link{
  padding:4px 10px;border-radius:999px;
  background:#e5e7eb;text-decoration:none;
  color:#334155;display:inline-flex;align-items:center;gap:4px;
  transition:all .2s ease;
}
.series-nav-link span{font-size:14px;}
.series-nav-link:hover,
.series-nav-link:focus-visible{
  background:#dbeafe;color:#1f2937;
}
.series-nav-link.is-current{
  background:#bfdbfe;font-weight:700;color:#111827;
}
@media(max-width:480px){
  .series-nav-wrap{border-radius:16px;font-size:11px;}
}

/* 🔙 戻るボタン共通 */
.series-back-wrap{margin:18px 0 8px;text-align:center;}
.series-back-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 18px;border-radius:999px;
  background:linear-gradient(135deg,#e0f2fe,#cffafe);
  color:#0f172a;font-weight:700;font-size:14px;text-decoration:none;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
  transition:all .28s cubic-bezier(.22,.61,.36,1);
}
.series-back-btn span{font-size:18px;}
.series-back-btn:hover,
.series-back-btn:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 8px 14px rgba(0,0,0,.12);
  background:linear-gradient(135deg,#dbeafe,#bae6fd);
}
@media(max-width:480px){
  .series-back-btn{width:100%;font-size:15px;padding:12px 18px;}
}

/* ⏮⏭ レッスン前後ナビ */
.lesson-nav{
  display:flex;justify-content:center;gap:10px;
  margin:26px 0 6px;flex-wrap:wrap;
}
.lesson-nav a{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 18px;border-radius:999px;
  background:#06b6d4;color:#fff;font-weight:700;
  text-decoration:none;font-size:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  transition:.2s;
}
.lesson-nav a:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.18);}
</style>

<div class="series-nav-wrap">
  <span class="series-nav-label">英語学習シリーズ：</span>
  <div class="series-nav-links">
    <a class="series-nav-link" href="https://jouniorsankosodate.com/eiken5-flash/"><span>📗</span>5級フラッシュ</a>
    <a class="series-nav-link" href="https://jouniorsankosodate.com/eiken4-series/"><span>📘</span>4級フラッシュ</a>
    <a class="series-nav-link" href="https://jouniorsankosodate.com/junior-flash-list/"><span>🏫</span>中学英単語</a>
    <a class="series-nav-link is-current" href="https://jouniorsankosodate.com/takota-spell/"><span>🐙</span>タコタ式スペル練習</a>
    <a class="series-nav-link" href="https://jouniorsankosodate.com/takota-lesson/"><span>💬</span>タコタ英語レッスン</a>
  </div>
</div>

<!-- 💚 タイトル・説明 -->
<div class="takota-desc" style="max-width:820px;margin:0 auto 18px;padding:16px 18px;background:#f0fdf4;border:2px solid #86efac;border-radius:14px;">
  <div style="display:flex;align-items:center;gap:10px;margin-bottom:8px;">
    <img decoding="async" src="https://jouniorsankosodate.com/wp-content/uploads/2025/11/5dca7321798b10fda919243235cffbda.jpg" alt="タコタ" style="width:58px;height:auto;border-radius:50%;">
    <h2 style="font-weight:900;font-size:1.4em;margin:0;">タコタ式スペル練習② 行動・生活（20語）</h2>
  </div>
  <p style="margin:0;line-height:1.8;font-size:15px;">
    go, play, study など “毎日の行動”を表す基本動詞20語。<br>
    「自分の一日」「週末の過ごし方」を書ける力をタコタと一緒に育てよう🐙🚶
  </p>
</div>

<!-- 🎧 タコタ音声 -->
<script>
let TAKOTA_VOICE=null;
function pickTakotaVoice(){
  const v=speechSynthesis.getVoices()||[];
  const pref=["en-US","en-GB","en-AU","en-CA","en-IN"];
  return v.find(x=>pref.includes(x.lang))
      || v.find(x=>(x.lang||"").startsWith("en"))
      || null;
}
if("speechSynthesis"in window){
  speechSynthesis.addEventListener("voiceschanged",()=>{TAKOTA_VOICE=pickTakotaVoice();});
}
function speakTakota(t){
  if(!("speechSynthesis"in window))return;
  if(!TAKOTA_VOICE)TAKOTA_VOICE=pickTakotaVoice();
  const u=new SpeechSynthesisUtterance(t);
  if(TAKOTA_VOICE){u.voice=TAKOTA_VOICE;u.lang=TAKOTA_VOICE.lang||"en-US";}
  else u.lang="en-US";
  u.rate=0.95;u.pitch=1.0;
  speechSynthesis.cancel();speechSynthesis.speak(u);
}
</script>

<!-- 🐙 スペル練習② 本体 -->
<div class="takota-strict" id="takotaStrict2">
  <style>
    .takota-strict{--ink:#111;--muted:#667;--bg:#f6f7fb;--card:#fff;--accent:#06b6d4;--ok:#16a34a;--ng:#ef4444}
    .takota-strict{max-width:820px;margin:16px auto;padding:16px;background:var(--bg);border-radius:16px;color:var(--ink);}
    .tk-card{background:var(--card);border-radius:16px;padding:16px;box-shadow:0 2px 10px rgba(0,0,0,.06);}
    .tk-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;}
    .tk-title{font-size:clamp(18px,2.6vw,22px);font-weight:900;margin:0;}
    .tk-problem{font-size:clamp(20px,2.8vw,24px);font-weight:900;margin:6px 0 0;}
    .tk-wordprev{font-size:clamp(18px,2.6vw,22px);margin-top:6px;font-weight:800;opacity:.95;}
    .tk-ime{font-size:13px;color:#b91c1c;display:none;margin-top:6px;}
    .tk-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
    .tk-slots{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0;}
    .tk-slot{width:46px;height:54px;border:2px solid #e5e7eb;border-radius:12px;
      display:grid;place-items:center;font-size:24px;font-weight:800;}
    .tk-slot.filled{border-color:#cbd5e1;background:#ffffff;}
    .tk-slot.error{border-color:var(--ng);animation:shake .18s linear 0s 2;}
    @keyframes shake{
      0%,100%{transform:translateX(0);}
      25%{transform:translateX(-2px);}
      50%{transform:translateX(2px);}
      75%{transform:translateX(-2px);}
    }
    .tk-keys{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;}
    .tk-key{padding:10px 12px;border-radius:10px;border:1px solid #e5e7eb;
      background:#fff;font-weight:800;cursor:pointer;}
    .tk-key[disabled]{opacity:.5;cursor:not-allowed;}
    .tk-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;}
    .tk-btn{padding:10px 14px;border-radius:12px;border:0;
      background:var(--accent);color:#fff;font-weight:800;cursor:pointer;}
    .tk-btn.ghost{background:#fff;color:#111;border:1px solid #e5e7eb;}
    .tk-btn.warn{background:#f59e0b;}
    .tk-btn.ok{background:var(--ok);}
    .tk-msg{font-weight:800;margin:8px 0;}
    .tk-msg.ok{color:var(--ok);}
    .tk-msg.ng{color:var(--ng);}
    .tk-progress{height:8px;background:#e5e7eb;border-radius:999px;
      overflow:hidden;margin-top:10px;}
    .tk-bar{height:100%;width:0;background:var(--accent);}
    .tk-mini{font-size:12px;color:var(--muted);}
  </style>

  <div class="tk-card">
    <div class="tk-head">
      <div>
        <div class="tk-title">タコタ式スペル練習② 行動・生活</div>
        <div class="tk-problem" id="tkProblem2">問題：—</div>
        <div class="tk-wordprev" id="tkWordPrev2"></div>
        <div class="tk-ime" id="tkImeWarn2">※ 日本語入力かも。キーボードを<strong>半角英数</strong>にしてね。</div>
      </div>
      <div class="tk-row">
        <button class="tk-btn ghost" id="speakBtn2">🔊 読む</button>
        <button class="tk-btn ghost" id="revealBtn2">🙈 隠す</button>
        <button class="tk-btn ghost" id="hintBtn2">ヒント</button>
        <button class="tk-btn warn" id="resetBtn2">リセット</button>
        <button class="tk-btn" id="restartBtn2" style="background:#334155">はじめから</button>
      </div>
    </div>

    <div class="tk-slots" id="slots2"></div>
    <div class="tk-keys" id="keys2"></div>

    <div class="tk-btns">
      <button class="tk-btn ghost" id="skipBtn2">スキップ</button>
      <button class="tk-btn ok" id="nextBtn2" disabled>つぎへ</button>
    </div>

    <div class="tk-msg" id="tkMsg2"></div>
    <div class="tk-progress"><div class="tk-bar" id="bar2"></div></div>
    <div class="tk-mini"><span id="count2">0</span> / <span id="total2">0</span></div>
  </div>
</div>

<script>
(() => {
  const WORDS = [
    {word:"go",jp:"行く"},{word:"come",jp:"来る"},{word:"play",jp:"遊ぶ／（スポーツを）する"},
    {word:"study",jp:"勉強する"},{word:"make",jp:"作る"},{word:"take",jp:"取る／連れていく"},
    {word:"do",jp:"する"},{word:"have",jp:"持っている／食べる"},{word:"eat",jp:"食べる"},
    {word:"drink",jp:"飲む"},{word:"read",jp:"読む"},{word:"watch",jp:"見る"},
    {word:"listen",jp:"聞く"},{word:"write",jp:"書く"},{word:"open",jp:"開ける"},
    {word:"close",jp:"閉める"},{word:"start",jp:"始める"},{word:"finish",jp:"終える"},
    {word:"visit",jp:"訪れる"},{word:"work",jp:"働く／作動する"}
  ];
  const REVEAL=true; const KEY='takota_strict_set2_v2';
  const speak = speakTakota;

  const $=id=>document.getElementById(id);
  const tkProblem=$('tkProblem2'),tkWordPrev=$('tkWordPrev2'),tkImeWarn=$('tkImeWarn2');
  const slotsEl=$('slots2'),keysEl=$('keys2');
  const hintBtn=$('hintBtn2'),resetBtn=$('resetBtn2'),restartBtn=$('restartBtn2');
  const nextBtn=$('nextBtn2'),skipBtn=$('skipBtn2'),speakBtn=$('speakBtn2'),revealBtn=$('revealBtn2');
  const tkMsg=$('tkMsg2'),bar=$('bar2'),count=$('count2'),total=$('total2');

  let state;try{state=JSON.parse(localStorage.getItem(KEY))||{i:0,reveal:REVEAL}}catch(_){state={i:0,reveal:REVEAL}}
  if(state.i>=WORDS.length)state.i=0;
  let cur=null,idx=0,locked=[],inputs=[];

  function prog(solved=false){
    total.textContent=WORDS.length;
    if(solved&&state.i===WORDS.length-1){
      count.textContent=WORDS.length;bar.style.width='100%';return;
    }
    count.textContent=Math.min(state.i+1,WORDS.length);
    bar.style.width=Math.round((state.i/WORDS.length)*100)+'%';
  }
  function slots(w){
    slotsEl.innerHTML='';inputs=[];
    locked=Array.from({length:w.length},()=> '');
    for(let i=0;i<w.length;i++){
      const el=document.createElement('div');
      el.className='tk-slot';el.textContent='•';
      el.addEventListener('click',()=>{idx=i;active();});
      slotsEl.appendChild(el);inputs.push(el);
    }
    idx=0;active();
  }
  function active(){
    inputs.forEach((el,i)=>{el.style.outline=(i===idx)?'3px solid rgba(14,165,233,.35)':'none';});
  }
  function keys(w){
    keysEl.innerHTML='';
    [...new Set(w.toLowerCase().split(''))].sort().forEach(ch=>{
      const b=document.createElement('button');
      b.className='tk-key';b.textContent=ch;
      b.addEventListener('click',()=>put(ch));
      keysEl.appendChild(b);
    });
  }
  function preview(){
    if(state.reveal){tkWordPrev.textContent=cur.word;revealBtn.textContent='🙈 隠す';}
    else{tkWordPrev.textContent='•'.repeat(cur.word.length);revealBtn.textContent='👁 単語表示';}
  }
  function show(i){
    cur=WORDS[i];
    tkProblem.textContent='問題：'+cur.jp;
    tkMsg.textContent='';
    slots(cur.word);keys(cur.word);preview();
    nextBtn.disabled=true;prog(false);
  }
  function done(){
    if(locked.join('')===cur.word.toLowerCase()){
      tkMsg.textContent='🎉 正解！ Good job!';
      tkMsg.className='tk-msg ok';
      nextBtn.disabled=false;prog(true);return true;
    }
    return false;
  }
  function put(chRaw){
    const t=cur.word.toLowerCase();
    if(idx>=t.length)return;
    const ch=(chRaw||'').toLowerCase();
    const exp=t[idx];
    if(ch===exp){
      locked[idx]=exp;
      inputs[idx].textContent=exp;
      inputs[idx].classList.add('filled');
      idx=Math.min(idx+1,t.length-1);
      active();tkImeWarn.style.display='none';
      done();
    }else{
      inputs[idx].classList.add('error');
      setTimeout(()=>inputs[idx].classList.remove('error'),220);
      tkMsg.textContent='❌ ちがうよ';
      tkMsg.className='tk-msg ng';
    }
  }
  document.addEventListener('keydown',e=>{
    if(!cur)return;
    const k=e.key;
    if(k==='Backspace'){
      if(locked[idx]){
        locked[idx]='';
        inputs[idx].textContent='•';
        inputs[idx].classList.remove('filled');
        tkMsg.textContent='';
      }else if(idx>0){
        idx--;active();
        locked[idx]='';
        inputs[idx].textContent='•';
        inputs[idx].classList.remove('filled');
      }
      e.preventDefault();return;
    }
    if(k.length===1){
      if(!/[a-zA-Z]/.test(k)){
        tkImeWarn.style.display='block';return;
      }
      tkImeWarn.style.display='none';
      put(k);e.preventDefault();return;
    }
    if(k==='Enter'&&!nextBtn.disabled){next();}
  });
  function reset(){slots(cur.word);tkMsg.textContent='';nextBtn.disabled=true;}
  function restart(){state.i=0;save();show(state.i);}
  function hint(){
    const t=cur.word.toLowerCase();
    const n=t.length>=6?2:1;
    for(let i=0;i<n;i++){
      if(!locked[i]){idx=i;active();put(t[i]);}
    }
  }
  function skip(){show(state.i);save();}
  function next(){
    state.i++;save();
    if(state.i>=WORDS.length){
      tkMsg.textContent='🎉 全問クリア！おめでとう！';
      tkMsg.className='tk-msg ok';
      nextBtn.disabled=true;
      count.textContent=WORDS.length;
      bar.style.width='100%';return;
    }
    show(state.i);
  }
  function save(){localStorage.setItem(KEY,JSON.stringify(state));}

  hintBtn.addEventListener('click',hint);
  resetBtn.addEventListener('click',reset);
  restartBtn.addEventListener('click',restart);
  skipBtn.addEventListener('click',skip);
  nextBtn.addEventListener('click',next);
  speakBtn.addEventListener('click',()=>speak(cur.word));
  revealBtn.addEventListener('click',()=>{
    state.reveal=!state.reveal;save();preview();
  });

  show(state.i);
})();
</script>

<!-- ⏮⏭ 前後レッスンナビ＋一覧 -->
<div class="lesson-nav">
  <a href="https://jouniorsankosodate.com/takota-spell-1-feelings-thoughts/">← レッスン① 感情・思考へ</a>
  <a href="https://jouniorsankosodate.com/takota-spell-3-school-family/">▶ レッスン③ 学校・友達へ</a>
</div>
<div class="series-back-wrap">
  <a class="series-back-btn" href="https://jouniorsankosodate.com/takota-spell/">
    <span>🐙</span>タコタ式スペル練習 一覧にもどる
  </a>
</div>

<p>投稿 <a href="https://jouniorsankosodate.com/takota-spell-2-action-life/">🐙タコタ式スペル練習② 行動・生活（20語）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/takota-spell-2-action-life/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>🐙 タコタ式スペル練習⑤ つなぎ・前置詞・形容詞（20語）</title>
		<link>https://jouniorsankosodate.com/takota-spell-5-link-prep-adj/</link>
					<comments>https://jouniorsankosodate.com/takota-spell-5-link-prep-adj/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Thu, 06 Nov 2025 03:18:58 +0000</pubDate>
				<category><![CDATA[🐙英単語スペル練習]]></category>
		<category><![CDATA[🟦 英検3級 英語シリーズ]]></category>
		<category><![CDATA[🟩 英検4級 英語シリーズ]]></category>
		<category><![CDATA[#スペル練習]]></category>
		<category><![CDATA[＃無料アプリ]]></category>
		<category><![CDATA[#英作文]]></category>
		<category><![CDATA[#英単語スペル練習]]></category>
		<category><![CDATA[#英単語学習]]></category>
		<category><![CDATA[#英検3級]]></category>
		<category><![CDATA[＃英検４級]]></category>
		<category><![CDATA[＃英検５級]]></category>
		<category><![CDATA[#英語学習アプリ]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=1776</guid>

					<description><![CDATA[<p>英語学習シリーズ： 📗5級フラッシュ 📘4級フラッシュ 🏫中学英単語 🐙タコタ式スペル練習 💬タコタ英語レッスン タコタ式スペル練習⑤ つなぎ・前置詞・形容詞（20語） 文と文をつなぐ語・前置詞・よく使う形容詞20語。  [&#8230;]</p>
<p>投稿 <a href="https://jouniorsankosodate.com/takota-spell-5-link-prep-adj/">🐙 タコタ式スペル練習⑤ つなぎ・前置詞・形容詞（20語）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<!-- 🐙タコタ式スペル練習⑤ つなぎ・前置詞・形容詞（20語） -->

<!-- 🔗 英語学習シリーズ 回遊ナビ（パンくず風） -->
<!-- 🧩 タコタ式共通ボタンスタイル -->
<style>
.tk-btn{
  appearance:none;
  border:none;
  border-radius:999px;
  padding:10px 16px;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  background:#fff;
  color:#111;
  transition:all .25s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.tk-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 10px rgba(0,0,0,.08);
}
.tk-btn.ghost{
  background:#fff;
  border:1px solid #e5e7eb;
}
.tk-btn.warn{
  background:#fee2e2;
  color:#991b1b;
}
.tk-btn.ok{
  background:#16a34a;
  color:#fff;
}
.tk-btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
}
</style>

<style>
.series-nav-wrap{
  max-width:920px;margin:18px auto 14px;padding:8px 10px;
  background:#f8fafc;border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
  font-size:12px;color:#475569;
}
.series-nav-label{font-weight:700;margin-right:6px;display:inline-flex;align-items:center;gap:4px;}
.series-nav-label::before{content:"🚩";}
.series-nav-links{display:inline-flex;flex-wrap:wrap;gap:6px;}
.series-nav-link{
  padding:4px 10px;border-radius:999px;background:#e5e7eb;text-decoration:none;
  color:#334155;display:inline-flex;align-items:center;gap:4px;transition:all .2s ease;
}
.series-nav-link span{font-size:14px;}
.series-nav-link:hover,.series-nav-link:focus-visible{background:#dbeafe;color:#1f2937;}
.series-nav-link.is-current{background:#bfdbfe;font-weight:700;color:#111827;}
@media(max-width:480px){.series-nav-wrap{border-radius:16px;font-size:11px;}}

/* 🔙 戻るボタン共通 */
.series-back-wrap{margin:18px 0 8px;text-align:center;}
.series-back-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 18px;border-radius:999px;
  background:linear-gradient(135deg,#e0f2fe,#cffafe);
  color:#0f172a;font-weight:700;font-size:14px;text-decoration:none;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
  transition:all .28s cubic-bezier(.22,.61,.36,1);
}
.series-back-btn span{font-size:18px;}
.series-back-btn:hover,.series-back-btn:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 8px 14px rgba(0,0,0,.12);
  background:linear-gradient(135deg,#dbeafe,#bae6fd);
}
@media(max-width:480px){.series-back-btn{width:100%;font-size:15px;padding:12px 18px;}}

/* ⏮⏭ レッスン前後ナビ */
.lesson-nav{display:flex;justify-content:center;gap:10px;margin:26px 0 6px;flex-wrap:wrap;}
.lesson-nav a{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 18px;border-radius:999px;
  background:#06b6d4;color:#fff;font-weight:700;text-decoration:none;font-size:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.15);transition:.2s;
}
.lesson-nav a:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.18);}
</style>

<div class="series-nav-wrap">
  <span class="series-nav-label">英語学習シリーズ：</span>
  <div class="series-nav-links">
    <a class="series-nav-link" href="https://jouniorsankosodate.com/eiken5-flash/"><span>📗</span>5級フラッシュ</a>
    <a class="series-nav-link" href="https://jouniorsankosodate.com/eiken4-series/"><span>📘</span>4級フラッシュ</a>
    <a class="series-nav-link" href="https://jouniorsankosodate.com/junior-flash-list/"><span>🏫</span>中学英単語</a>
    <a class="series-nav-link is-current" href="https://jouniorsankosodate.com/takota-spell/"><span>🐙</span>タコタ式スペル練習</a>
    <a class="series-nav-link" href="https://jouniorsankosodate.com/takota-lesson/"><span>💬</span>タコタ英語レッスン</a>
  </div>
</div>

<!-- 💚 タイトル・説明 -->
<div class="takota-desc" style="max-width:820px;margin:0 auto 18px;padding:16px 18px;background:#f0fdf4;border:2px solid #86efac;border-radius:14px;">
  <div style="display:flex;align-items:center;gap:10px;margin-bottom:8px;">
    <img decoding="async" src="https://jouniorsankosodate.com/wp-content/uploads/2025/11/5dca7321798b10fda919243235cffbda.jpg" alt="タコタ" style="width:58px;height:auto;border-radius:50%;">
    <h2 style="font-weight:900;font-size:1.4em;margin:0;">タコタ式スペル練習⑤ つなぎ・前置詞・形容詞（20語）</h2>
  </div>
  <p style="margin:0;line-height:1.8;font-size:15px;">
    文と文をつなぐ語・前置詞・よく使う形容詞20語。<br>
    because, with, important など、英検3級の英作文で「文をふくらませる」カギになる語をおさえよう✏️
  </p>
</div>

<!-- 🎧 タコタ音声（共通ロジック） -->
<script>
let TAKOTA_VOICE=null;
function pickTakotaVoice(){
  const v=speechSynthesis.getVoices()||[];
  const pref=["en-US","en-GB","en-AU","en-CA","en-IN"];
  return v.find(x=>pref.includes(x.lang))
      || v.find(x=>(x.lang||"").startsWith("en"))
      || null;
}
if("speechSynthesis"in window){
  speechSynthesis.addEventListener("voiceschanged",()=>{TAKOTA_VOICE=pickTakotaVoice();});
}
function speakTakota(t){
  if(!("speechSynthesis"in window))return;
  if(!TAKOTA_VOICE)TAKOTA_VOICE=pickTakotaVoice();
  const u=new SpeechSynthesisUtterance(t);
  if(TAKOTA_VOICE){u.voice=TAKOTA_VOICE;u.lang=TAKOTA_VOICE.lang||"en-US";}
  else u.lang="en-US";
  u.rate=0.95;u.pitch=1.0;
  speechSynthesis.cancel();speechSynthesis.speak(u);
}
</script>

<!-- 🐙 スペル練習⑤ 本体 -->
<script>
(() => {
  const WORDS = [
    {word:"because",jp:"〜だから"},{word:"and",jp:"そして"},{word:"but",jp:"しかし"},
    {word:"so",jp:"だから／それで"},{word:"then",jp:"それから"},{word:"in",jp:"〜の中に／で"},
    {word:"on",jp:"〜の上に／で"},{word:"at",jp:"〜で（場所・時刻）"},{word:"to",jp:"〜へ／〜に"},
    {word:"from",jp:"〜から"},{word:"for",jp:"〜のために"},{word:"with",jp:"〜といっしょに"},
    {word:"about",jp:"〜について"},{word:"by",jp:"〜で（手段）／そばに"},{word:"happy",jp:"うれしい"},
    {word:"busy",jp:"いそがしい"},{word:"fun",jp:"楽しい（名詞/形容）"},{word:"interesting",jp:"おもしろい"},
    {word:"favorite",jp:"いちばん好きな"},{word:"important",jp:"大切な"}
  ];
  const REVEAL=true;const KEY='takota_strict_set5_v1';
  const speak=speakTakota;

  const $=id=>document.getElementById(id);
  document.write(`
  <div class="takota-strict" id="takotaStrict5" style="max-width:820px;margin:16px auto;padding:16px;background:#f6f7fb;border-radius:16px;color:#111;">
    <div class="tk-card" style="background:#fff;border-radius:16px;padding:16px;box-shadow:0 2px 10px rgba(0,0,0,.06);">
      <div class="tk-head" style="display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;">
        <div>
          <div class="tk-title" style="font-weight:900;font-size:22px;">タコタ式スペル練習⑤ つなぎ・前置詞・形容詞</div>
          <div class="tk-problem" id="tkProblem5" style="font-weight:900;font-size:24px;">問題：—</div>
          <div class="tk-wordprev" id="tkWordPrev5" style="font-weight:800;font-size:22px;opacity:.95;"></div>
          <div class="tk-ime" id="tkImeWarn5" style="font-size:13px;color:#b91c1c;display:none;margin-top:6px;">※日本語入力かも。<strong>半角英数</strong>にしてね。</div>
        </div>
        <div class="tk-row" style="display:flex;gap:10px;flex-wrap:wrap;">
          <button class="tk-btn ghost" id="speakBtn5">🔊読む</button>
          <button class="tk-btn ghost" id="revealBtn5">🙈隠す</button>
          <button class="tk-btn ghost" id="hintBtn5">ヒント</button>
          <button class="tk-btn warn" id="resetBtn5">リセット</button>
          <button class="tk-btn" id="restartBtn5" style="background:#334155;color:#fff;">はじめから</button>
        </div>
      </div>
      <div class="tk-slots" id="slots5" style="display:flex;gap:10px;flex-wrap:wrap;margin:14px 0;"></div>
      <div class="tk-keys" id="keys5" style="display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;"></div>
      <div class="tk-btns" style="display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;">
        <button class="tk-btn ghost" id="skipBtn5">スキップ</button>
        <button class="tk-btn ok" id="nextBtn5" style="background:#16a34a;" disabled>つぎへ</button>
      </div>
      <div class="tk-msg" id="tkMsg5" style="font-weight:800;margin:8px 0;"></div>
      <div class="tk-progress" style="height:8px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin-top:10px;">
        <div class="tk-bar" id="bar5" style="height:100%;width:0;background:#06b6d4;"></div>
      </div>
      <div class="tk-mini" style="font-size:12px;color:#667;"> <span id="count5">0</span> / <span id="total5">0</span> </div>
    </div>
  </div>`);

  let state;try{state=JSON.parse(localStorage.getItem(KEY))||{i:0,reveal:REVEAL}}catch(_){state={i:0,reveal:REVEAL}}
  if(state.i>=WORDS.length)state.i=0;
  let cur=null,idx=0,locked=[],inputs=[];

  function prog(solved=false){
    const c=$("count5"),t=$("total5"),b=$("bar5");
    t.textContent=WORDS.length;
    if(solved&&state.i===WORDS.length-1){c.textContent=WORDS.length;b.style.width='100%';return;}
    c.textContent=Math.min(state.i+1,WORDS.length);
    b.style.width=Math.round((state.i/WORDS.length)*100)+'%';
  }
  function slots(w){
    const s=$("slots5");s.innerHTML='';inputs=[];
    locked=Array.from({length:w.length},()=>'');
    for(let i=0;i<w.length;i++){
      const el=document.createElement("div");
      el.className="tk-slot";
      el.style.cssText="width:46px;height:54px;border:2px solid #e5e7eb;border-radius:12px;display:grid;place-items:center;font-size:24px;font-weight:800;";
      el.textContent='•';
      el.addEventListener('click',()=>{idx=i;active();});
      s.appendChild(el);inputs.push(el);
    }
    idx=0;active();
  }
  function active(){
    inputs.forEach((el,i)=>{el.style.outline=(i===idx)?'3px solid rgba(14,165,233,.35)':'none';});
  }
  function keys(w){
    const k=$("keys5");k.innerHTML='';
    [...new Set(w.toLowerCase().split(''))].sort().forEach(ch=>{
      const b=document.createElement("button");
      b.className="tk-key";b.textContent=ch;
      b.style.cssText="padding:10px 12px;border-radius:10px;border:1px solid #e5e7eb;background:#fff;font-weight:800;cursor:pointer;";
      b.addEventListener('click',()=>put(ch));
      k.appendChild(b);
    });
  }
  function preview(){
    const w=$("tkWordPrev5"),r=$("revealBtn5");
    if(state.reveal){w.textContent=cur.word;r.textContent='🙈隠す';}
    else{w.textContent='•'.repeat(cur.word.length);r.textContent='👁単語表示';}
  }
  function show(i){
    cur=WORDS[i];
    $("tkProblem5").textContent='問題：'+cur.jp;
    $("tkMsg5").textContent='';
    slots(cur.word);keys(cur.word);preview();
    $("nextBtn5").disabled=true;
    prog(false);
  }
  function done(){
    if(locked.join('')===cur.word.toLowerCase()){
      $("tkMsg5").textContent='🎉 正解！Good job!';
      $("tkMsg5").style.color='#16a34a';
      $("nextBtn5").disabled=false;
      prog(true);
      return true;
    }
    return false;
  }
  function put(chRaw){
    const t=cur.word.toLowerCase();
    if(idx>=t.length)return;
    const ch=(chRaw||'').toLowerCase();
    const exp=t[idx];
    if(ch===exp){
      locked[idx]=exp;
      inputs[idx].textContent=exp;
      inputs[idx].classList.add('filled');
      idx=Math.min(idx+1,t.length-1);
      active();
      done();
    }else{
      inputs[idx].style.borderColor='#ef4444';
      setTimeout(()=>inputs[idx].style.borderColor='#e5e7eb',220);
      $("tkMsg5").textContent='❌ちがうよ';
      $("tkMsg5").style.color='#ef4444';
    }
  }
  document.addEventListener("keydown",e=>{
    if(!cur)return;
    const k=e.key;
    if(k==='Backspace'){
      if(locked[idx]){
        locked[idx]='';inputs[idx].textContent='•';
      }else if(idx>0){
        idx--;active();locked[idx]='';inputs[idx].textContent='•';
      }
      e.preventDefault();return;
    }
    if(k.length===1){
      if(!/[a-zA-Z]/.test(k))return;
      put(k);e.preventDefault();return;
    }
    if(k==='Enter'&&!$("nextBtn5").disabled){next();}
  });
  function next(){
    state.i++;save();
    if(state.i>=WORDS.length){
      $("tkMsg5").textContent='🎉 全問クリア！おめでとう！';
      $("tkMsg5").style.color='#16a34a';
      $("nextBtn5").disabled=true;
      return;
    }
    show(state.i);
  }
  function save(){localStorage.setItem(KEY,JSON.stringify(state));}

  $("hintBtn5").addEventListener("click",()=>{
    const t=cur.word.toLowerCase();
    const n=t.length>=6?2:1;
    for(let i=0;i<n;i++){
      if(!locked[i]){idx=i;put(t[i]);}
    }
  });
  $("resetBtn5").addEventListener("click",()=>{slots(cur.word);$("tkMsg5").textContent='';$("nextBtn5").disabled=true;});
  $("restartBtn5").addEventListener("click",()=>{state.i=0;save();show(state.i);});
  $("skipBtn5").addEventListener("click",()=>show(state.i));
  $("nextBtn5").addEventListener("click",next);
  $("speakBtn5").addEventListener("click",()=>speak(cur.word));
  $("revealBtn5").addEventListener("click",()=>{state.reveal=!state.reveal;save();preview();});

  show(state.i);
})();
</script>

<!-- ⏮⏭ 前レッスン＋一覧 -->
<div class="lesson-nav">
  <a href="https://jouniorsankosodate.com/takota-spell-4-time-frequency/">← レッスン④ 時間・頻度・季節へ</a>
  <a href="https://jouniorsankosodate.com/takota-spell/">🐙 全セット一覧を見る</a>
</div>
<div class="series-back-wrap">
  <a class="series-back-btn" href="https://jouniorsankosodate.com/takota-spell/">
    <span>🐙</span>タコタ式スペル練習 一覧にもどる
  </a>
</div>

<p>投稿 <a href="https://jouniorsankosodate.com/takota-spell-5-link-prep-adj/">🐙 タコタ式スペル練習⑤ つなぎ・前置詞・形容詞（20語）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/takota-spell-5-link-prep-adj/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
