<?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>👧英語学習 アーカイブ - じゅにさん子育てブログ</title>
	<atom:link href="https://jouniorsankosodate.com/category/learn/english-flash/feed/" rel="self" type="application/rss+xml" />
	<link>https://jouniorsankosodate.com/category/learn/english-flash/</link>
	<description>勉強が苦手な子でも、わかる・できる・続けられる</description>
	<lastBuildDate>Thu, 30 Jul 2026 07:12:50 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0.2</generator>

<image>
	<url>https://jouniorsankosodate.com/wp-content/uploads/2026/02/cropped-44f1f7a5e508593f7c057572c07f45a3-32x32.jpg</url>
	<title>👧英語学習 アーカイブ - じゅにさん子育てブログ</title>
	<link>https://jouniorsankosodate.com/category/learn/english-flash/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>英検３級 フラッシュ英単語 No.10｜頻出副詞（音声対応）</title>
		<link>https://jouniorsankosodate.com/eiken3-set10/</link>
					<comments>https://jouniorsankosodate.com/eiken3-set10/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Thu, 30 Jul 2026 06:58:31 +0000</pubDate>
				<category><![CDATA[🟦 英検3級 英語シリーズ]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=7247</guid>

					<description><![CDATA[<p>英検３級 フラッシュ英単語 No.10｜頻出副詞（音声対応） 英検３級 フラッシュ英単語 No.10 頻出副詞 日本語からスタート 🔊 音声ON — — 英語⇆日本語 ▶ 読み上げ わかった 👍 わからん！あとで復習 📌 [&#8230;]</p>
<p>投稿 <a href="https://jouniorsankosodate.com/eiken3-set10/">英検３級 フラッシュ英単語 No.10｜頻出副詞（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<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:#2563eb;
  --accent-weak:#dbeafe;

  --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:#eff6ff;
}

.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,#dbeafe,#bfdbfe);
  color:#1e3a8a;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
  transition:.25s;
}

.series-back-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 14px rgba(0,0,0,.12);
}

/* 前へ・次へ */
.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);
  transition:.25s;
}

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

.series-nav-btn.next{
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;
}

.series-nav-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 14px rgba(0,0,0,.12);
}

@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>
<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/eiken3-series-2/">

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

  </a>

</div>

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

</div>

<script>
const ITEMS = [
  { word:"already", jp:"すでに" },
  { word:"almost", jp:"ほとんど" },
  { word:"also", jp:"〜もまた" },
  { word:"cheaply", jp:"安く" },
  { word:"easily", jp:"簡単に" },
  { word:"finally", jp:"ついに・最後に" },
  { word:"instead", jp:"代わりに" },
  { word:"maybe", jp:"たぶん" },
  { word:"probably", jp:"おそらく" },
  { word:"recently", jp:"最近" },
  { word:"still", jp:"まだ・今でも" },
  { word:"together", jp:"一緒に" },
  { word:"usually", jp:"たいてい" },
  { word:"yet", 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>


<p>投稿 <a href="https://jouniorsankosodate.com/eiken3-set10/">英検３級 フラッシュ英単語 No.10｜頻出副詞（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/eiken3-set10/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>英検３級 フラッシュ英単語 No.9｜頻出形容詞②（音声対応）</title>
		<link>https://jouniorsankosodate.com/eiken3-set9/</link>
					<comments>https://jouniorsankosodate.com/eiken3-set9/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Thu, 30 Jul 2026 06:57:51 +0000</pubDate>
				<category><![CDATA[🟦 英検3級 英語シリーズ]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=7245</guid>

					<description><![CDATA[<p>英検３級 フラッシュ英単語 No.9｜頻出形容詞②（音声対応） 英検３級 フラッシュ英単語 No.9 頻出形容詞② 日本語からスタート 🔊 音声ON — — 英語⇆日本語 ▶ 読み上げ わかった 👍 わからん！あとで復習 [&#8230;]</p>
<p>投稿 <a href="https://jouniorsankosodate.com/eiken3-set9/">英検３級 フラッシュ英単語 No.9｜頻出形容詞②（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<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:#2563eb;
  --accent-weak:#dbeafe;

  --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:#eff6ff;
}

.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,#dbeafe,#bfdbfe);
  color:#1e3a8a;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
  transition:.25s;
}

.series-back-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 14px rgba(0,0,0,.12);
}

/* 前へ・次へ */
.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);
  transition:.25s;
}

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

.series-nav-btn.next{
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;
}

.series-nav-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 14px rgba(0,0,0,.12);
}

@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>
<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/eiken3-series-2/">

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

  </a>

</div>

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

</div>

<script>
const ITEMS = [
  { word:"important", jp:"重要な" },
  { word:"impossible", jp:"不可能な" },
  { word:"international", jp:"国際的な" },
  { word:"local", jp:"地元の" },
  { word:"necessary", jp:"必要な" },
  { word:"own", jp:"自分自身の" },
  { word:"patient", jp:"忍耐強い" },
  { word:"polite", jp:"丁寧な・礼儀正しい" },
  { word:"popular", jp:"人気のある" },
  { word:"possible", jp:"可能な" },
  { word:"proud", jp:"誇りに思っている" },
  { word:"safe", jp:"安全な" },
  { word:"similar", jp:"似ている" },
  { word:"strange", jp:"奇妙な・見知らぬ" },
  { word:"traditional", jp:"伝統的な" },
  { word:"useful", jp:"役に立つ" },
  { word:"usual", 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>


<p>投稿 <a href="https://jouniorsankosodate.com/eiken3-set9/">英検３級 フラッシュ英単語 No.9｜頻出形容詞②（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/eiken3-set9/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>英検３級 フラッシュ英単語 No.8｜頻出形容詞①（音声対応）</title>
		<link>https://jouniorsankosodate.com/eiken3-set8/</link>
					<comments>https://jouniorsankosodate.com/eiken3-set8/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Thu, 30 Jul 2026 06:52:03 +0000</pubDate>
				<category><![CDATA[🟦 英検3級 英語シリーズ]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=7243</guid>

					<description><![CDATA[<p>英検３級 フラッシュ英単語 No.8｜頻出形容詞①（音声対応） 英検３級 フラッシュ英単語 No.8 頻出形容詞① 日本語からスタート 🔊 音声ON — — 英語⇆日本語 ▶ 読み上げ わかった 👍 わからん！あとで復習 [&#8230;]</p>
<p>投稿 <a href="https://jouniorsankosodate.com/eiken3-set8/">英検３級 フラッシュ英単語 No.8｜頻出形容詞①（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<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:#2563eb;
  --accent-weak:#dbeafe;

  --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:#eff6ff;
}

.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,#dbeafe,#bfdbfe);
  color:#1e3a8a;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
  transition:.25s;
}

.series-back-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 14px rgba(0,0,0,.12);
}

/* 前へ・次へ */
.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);
  transition:.25s;
}

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

.series-nav-btn.next{
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;
}

.series-nav-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 14px rgba(0,0,0,.12);
}

@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>
<div class="wrap" id="app" aria-live="polite">

<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"
       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/eiken3-series-2/">

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

  </a>

</div>

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

</div>

<script>
const ITEMS = [
  { word:"able", jp:"〜できる" },
  { word:"active", jp:"活発な" },
  { word:"afraid", jp:"恐れて" },
  { word:"ancient", jp:"古代の" },
  { word:"available", jp:"利用できる・手に入る" },
  { word:"careful", jp:"注意深い" },
  { word:"common", jp:"共通の・よくある" },
  { word:"convenient", jp:"便利な" },
  { word:"crowded", jp:"混雑した" },
  { word:"different", jp:"異なる" },
  { word:"difficult", jp:"難しい" },
  { word:"electronic", jp:"電子の" },
  { word:"famous", jp:"有名な" },
  { word:"foreign", jp:"外国の" },
  { word:"free", jp:"自由な・無料の" },
  { word:"global", jp:"地球規模の" },
  { word:"helpful", 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>


<p>投稿 <a href="https://jouniorsankosodate.com/eiken3-set8/">英検３級 フラッシュ英単語 No.8｜頻出形容詞①（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/eiken3-set8/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>英検３級 フラッシュ英単語 No.7｜学校・社会の重要名詞（音声対応）</title>
		<link>https://jouniorsankosodate.com/eiken3-set7/</link>
					<comments>https://jouniorsankosodate.com/eiken3-set7/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Thu, 30 Jul 2026 06:51:06 +0000</pubDate>
				<category><![CDATA[🟦 英検3級 英語シリーズ]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=7241</guid>

					<description><![CDATA[<p>英検３級 フラッシュ英単語 No.7｜学校・社会の重要名詞（音声対応） 英検３級 フラッシュ英単語 No.7 学校・社会の重要名詞 日本語からスタート 🔊 音声ON — — 英語⇆日本語 ▶ 読み上げ わかった 👍 わか [&#8230;]</p>
<p>投稿 <a href="https://jouniorsankosodate.com/eiken3-set7/">英検３級 フラッシュ英単語 No.7｜学校・社会の重要名詞（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<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:#2563eb;
  --accent-weak:#dbeafe;

  --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:#eff6ff;
}

.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,#dbeafe,#bfdbfe);
  color:#1e3a8a;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
  transition:.25s;
}

.series-back-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 14px rgba(0,0,0,.12);
}

/* 前へ・次へ */
.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);
  transition:.25s;
}

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

.series-nav-btn.next{
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;
}

.series-nav-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 14px rgba(0,0,0,.12);
}

@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>
<div class="wrap" id="app" aria-live="polite">

<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"
       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/eiken3-series-2/">

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

  </a>

</div>

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

</div>

<script>
const ITEMS = [
  { word:"solution", jp:"解決策" },
  { word:"space", jp:"宇宙・空間" },
  { word:"trash", jp:"ゴミ" },
  { word:"tourist", jp:"観光客" },
  { word:"tradition", jp:"伝統" },
  { word:"view", jp:"眺め・意見" },
  { word:"volunteer", jp:"ボランティア" },
  { word:"way", jp:"方法・道" },
  { word:"skill", jp:"技能・技術" },
  { word:"report", jp:"報告・レポート" },
  { word:"project", jp:"計画・課題" },
  { word:"speech", jp:"スピーチ・演説" },
  { word:"contest", jp:"コンテスト・競技会" },
  { word:"exam", jp:"試験" },
  { word:"grade", 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>


<p>投稿 <a href="https://jouniorsankosodate.com/eiken3-set7/">英検３級 フラッシュ英単語 No.7｜学校・社会の重要名詞（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/eiken3-set7/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>英検３級 フラッシュ英単語 No.6｜社会・生活の名詞③（音声対応）</title>
		<link>https://jouniorsankosodate.com/eiken3-set6/</link>
					<comments>https://jouniorsankosodate.com/eiken3-set6/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Thu, 30 Jul 2026 06:50:10 +0000</pubDate>
				<category><![CDATA[🟦 英検3級 英語シリーズ]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=7239</guid>

					<description><![CDATA[<p>英検３級 フラッシュ英単語 No.6｜社会・生活の名詞③（音声対応） 英検３級 フラッシュ英単語 No.6 社会・生活の名詞③ 日本語からスタート 🔊 音声ON — — 英語⇆日本語 ▶ 読み上げ わかった 👍 わからん [&#8230;]</p>
<p>投稿 <a href="https://jouniorsankosodate.com/eiken3-set6/">英検３級 フラッシュ英単語 No.6｜社会・生活の名詞③（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>英検３級 フラッシュ英単語 No.6｜社会・生活の名詞③（音声対応）</title>

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

  --accent:#2563eb;
  --accent-weak:#dbeafe;

  --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:#eff6ff;
}

.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,#dbeafe,#bfdbfe);
  color:#1e3a8a;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
  transition:.25s;
}

.series-back-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 14px rgba(0,0,0,.12);
}

/* 前へ・次へ */
.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);
  transition:.25s;
}

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

.series-nav-btn.next{
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;
}

.series-nav-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 14px rgba(0,0,0,.12);
}

@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>
<div class="wrap" id="app" aria-live="polite">

<header>

  <h1>
    英検３級 フラッシュ英単語
    <span class="badge">No.6 社会・生活の名詞③</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/eiken3-series-2/">

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

  </a>

</div>

<!-- 前へ・次へ -->
<div class="series-nav-wrap">
  <a class="series-nav-btn prev" href="https://jouniorsankosodate.com/eiken3-set5/">← 前のレッスンへ</a>
  <a class="series-nav-btn next" href="https://jouniorsankosodate.com/eiken3-set7/">次のレッスンへ →</a>
</div>

</div>

<script>
const ITEMS = [
  { word:"language", jp:"言語" },
  { word:"meaning", jp:"意味" },
  { word:"member", jp:"会員・メンバー" },
  { word:"memory", jp:"思い出・記憶" },
  { word:"method", jp:"方法" },
  { word:"nature", jp:"自然" },
  { word:"neighbor", jp:"近所の人" },
  { word:"opinion", jp:"意見" },
  { word:"opportunity", jp:"機会" },
  { word:"passenger", jp:"乗客" },
  { word:"population", jp:"人口" },
  { word:"praise", jp:"賞賛" },
  { word:"purpose", jp:"目的" },
  { word:"reason", jp:"理由" },
  { word:"relationship", jp:"関係" },
  { word:"result", jp:"結果" },
  { word:"rule", jp:"ルール・規則" },
  { word:"schedule", jp:"予定" },
  { word:"science", jp:"科学" },
  { word:"society", 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>


<p>投稿 <a href="https://jouniorsankosodate.com/eiken3-set6/">英検３級 フラッシュ英単語 No.6｜社会・生活の名詞③（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/eiken3-set6/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>英検３級 フラッシュ英単語 No.5｜社会・生活の名詞②（音声対応）</title>
		<link>https://jouniorsankosodate.com/eiken3-set5/</link>
					<comments>https://jouniorsankosodate.com/eiken3-set5/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Thu, 30 Jul 2026 06:49:25 +0000</pubDate>
				<category><![CDATA[🟦 英検3級 英語シリーズ]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=7237</guid>

					<description><![CDATA[<p>英検３級 フラッシュ英単語 No.5｜社会・生活の名詞②（音声対応） 英検３級 フラッシュ英単語 No.5 社会・生活の名詞② 日本語からスタート 🔊 音声ON — — 英語⇆日本語 ▶ 読み上げ わかった 👍 わからん [&#8230;]</p>
<p>投稿 <a href="https://jouniorsankosodate.com/eiken3-set5/">英検３級 フラッシュ英単語 No.5｜社会・生活の名詞②（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>英検３級 フラッシュ英単語 No.5｜社会・生活の名詞②（音声対応）</title>

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

  --accent:#2563eb;
  --accent-weak:#dbeafe;

  --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:#eff6ff;
}

.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,#dbeafe,#bfdbfe);
  color:#1e3a8a;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
  transition:.25s;
}

.series-back-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 14px rgba(0,0,0,.12);
}

/* 前へ・次へ */
.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);
  transition:.25s;
}

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

.series-nav-btn.next{
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;
}

.series-nav-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 14px rgba(0,0,0,.12);
}

@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>
<div class="wrap" id="app" aria-live="polite">

<header>

  <h1>
    英検３級 フラッシュ英単語
    <span class="badge">No.5 社会・生活の名詞②</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/eiken3-series-2/">

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

  </a>

</div>

<!-- 前へ・次へ -->
<div class="series-nav-wrap">
  <a class="series-nav-btn prev" href="https://jouniorsankosodate.com/eiken3-set4/">← 前のレッスンへ</a>
  <a class="series-nav-btn next" href="https://jouniorsankosodate.com/eiken3-set6/">次のレッスンへ →</a>
</div>

</div>

<script>
const ITEMS = [
  { word:"direction", jp:"方向・指示" },
  { word:"disease", jp:"病気" },
  { word:"earth", jp:"地球" },
  { word:"education", jp:"教育" },
  { word:"effort", jp:"努力" },
  { word:"environment", jp:"環境" },
  { word:"event", jp:"出来事・イベント" },
  { word:"experience", jp:"経験" },
  { word:"fact", jp:"事実" },
  { word:"factory", jp:"工場" },
  { word:"feature", jp:"特徴" },
  { word:"festival", jp:"祭り" },
  { word:"future", jp:"未来・将来" },
  { word:"government", jp:"政府" },
  { word:"habit", jp:"習慣" },
  { word:"health", jp:"健康" },
  { word:"history", jp:"歴史" },
  { word:"information", jp:"情報" },
  { word:"interview", jp:"面接・インタビュー" },
  { word:"knowledge", 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>


<p>投稿 <a href="https://jouniorsankosodate.com/eiken3-set5/">英検３級 フラッシュ英単語 No.5｜社会・生活の名詞②（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/eiken3-set5/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>英検３級 フラッシュ英単語 No.4｜社会・生活の名詞①（音声対応）</title>
		<link>https://jouniorsankosodate.com/eiken3-set4/</link>
					<comments>https://jouniorsankosodate.com/eiken3-set4/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Thu, 30 Jul 2026 06:48:41 +0000</pubDate>
				<category><![CDATA[🟦 英検3級 英語シリーズ]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=7235</guid>

					<description><![CDATA[<p>英検３級 フラッシュ英単語 No.4｜社会・生活の名詞①（音声対応） 英検３級 フラッシュ英単語 No.4 社会・生活の名詞① 日本語からスタート 🔊 音声ON — — 英語⇆日本語 ▶ 読み上げ わかった 👍 わからん [&#8230;]</p>
<p>投稿 <a href="https://jouniorsankosodate.com/eiken3-set4/">英検３級 フラッシュ英単語 No.4｜社会・生活の名詞①（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>英検３級 フラッシュ英単語 No.4｜社会・生活の名詞①（音声対応）</title>

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

  --accent:#2563eb;
  --accent-weak:#dbeafe;

  --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:#eff6ff;
}

.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,#dbeafe,#bfdbfe);
  color:#1e3a8a;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
  transition:.25s;
}

.series-back-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 14px rgba(0,0,0,.12);
}

/* 前へ・次へ */
.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);
  transition:.25s;
}

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

.series-nav-btn.next{
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;
}

.series-nav-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 14px rgba(0,0,0,.12);
}

@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>
<div class="wrap" id="app" aria-live="polite">

<header>

  <h1>
    英検３級 フラッシュ英単語
    <span class="badge">No.4 社会・生活の名詞①</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/eiken3-series-2/">

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

  </a>

</div>

<!-- 前へ・次へ -->
<div class="series-nav-wrap">
  <a class="series-nav-btn prev" href="https://jouniorsankosodate.com/eiken3-set3/">← 前のレッスンへ</a>
  <a class="series-nav-btn next" href="https://jouniorsankosodate.com/eiken3-set5/">次のレッスンへ →</a>
</div>

</div>

<script>
const ITEMS = [
  { word:"activity", jp:"活動" },
  { word:"advantage", jp:"利点・メリット" },
  { word:"advice", jp:"助言・アドバイス" },
  { word:"amount", jp:"量" },
  { word:"area", jp:"地域・場所" },
  { word:"art", jp:"芸術・美術" },
  { word:"attention", jp:"注意・注目" },
  { word:"century", jp:"世紀" },
  { word:"chance", jp:"機会・チャンス" },
  { word:"choice", jp:"選択" },
  { word:"climate", jp:"気候" },
  { word:"communication", jp:"意思疎通" },
  { word:"community", jp:"地域社会・コミュニティ" },
  { word:"company", jp:"会社" },
  { word:"condition", jp:"状態・条件" },
  { word:"culture", jp:"文化" },
  { word:"customer", jp:"客" },
  { word:"danger", jp:"危険" },
  { word:"decision", jp:"決断" },
  { word:"difference", 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>


<p>投稿 <a href="https://jouniorsankosodate.com/eiken3-set4/">英検３級 フラッシュ英単語 No.4｜社会・生活の名詞①（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/eiken3-set4/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>英検３級 フラッシュ英単語 No.3｜頻出動詞③（音声対応）</title>
		<link>https://jouniorsankosodate.com/eiken3-set3/</link>
					<comments>https://jouniorsankosodate.com/eiken3-set3/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Thu, 30 Jul 2026 06:48:01 +0000</pubDate>
				<category><![CDATA[🟦 英検3級 英語シリーズ]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=7233</guid>

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

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

  --accent:#2563eb;
  --accent-weak:#dbeafe;

  --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:#eff6ff;
}

.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,#dbeafe,#bfdbfe);
  color:#1e3a8a;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
  transition:.25s;
}

.series-back-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 14px rgba(0,0,0,.12);
}

/* 前へ・次へ */
.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);
  transition:.25s;
}

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

.series-nav-btn.next{
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;
}

.series-nav-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 14px rgba(0,0,0,.12);
}

@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>
<div class="wrap" id="app" aria-live="polite">

<header>

  <h1>
    英検３級 フラッシュ英単語
    <span class="badge">No.3 頻出動詞③</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/eiken3-series-2/">

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

  </a>

</div>

<!-- 前へ・次へ -->
<div class="series-nav-wrap">
  <a class="series-nav-btn prev" href="https://jouniorsankosodate.com/eiken3-set2/">← 前のレッスンへ</a>
  <a class="series-nav-btn next" href="https://jouniorsankosodate.com/eiken3-set4/">次のレッスンへ →</a>
</div>

</div>

<script>
const ITEMS = [
  { word:"invite", jp:"招待する" },
  { word:"join", jp:"参加する" },
  { word:"lead", jp:"導く・つながる" },
  { word:"lend", jp:"貸す" },
  { word:"offer", jp:"提供する・申し出る" },
  { word:"produce", jp:"生産する・作り出す" },
  { word:"protect", jp:"保護する・守る" },
  { word:"prove", jp:"証明する" },
  { word:"provide", jp:"提供する" },
  { word:"raise", jp:"上げる・育てる" },
  { word:"reach", jp:"到達する・届く" },
  { word:"receive", jp:"受け取る" },
  { word:"refuse", jp:"断る" },
  { word:"remember", jp:"覚えておく・思い出す" },
  { word:"save", 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>


<p>投稿 <a href="https://jouniorsankosodate.com/eiken3-set3/">英検３級 フラッシュ英単語 No.3｜頻出動詞③（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/eiken3-set3/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>英検３級 フラッシュ英単語 No.2｜頻出動詞②（音声対応）</title>
		<link>https://jouniorsankosodate.com/eiken3-set2/</link>
					<comments>https://jouniorsankosodate.com/eiken3-set2/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Thu, 30 Jul 2026 06:46:39 +0000</pubDate>
				<category><![CDATA[🟦 英検3級 英語シリーズ]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=7231</guid>

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

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

  --accent:#2563eb;
  --accent-weak:#dbeafe;

  --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:#eff6ff;
}

.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,#dbeafe,#bfdbfe);
  color:#1e3a8a;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
  transition:.25s;
}

.series-back-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 14px rgba(0,0,0,.12);
}

/* 前へ・次へ */
.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);
  transition:.25s;
}

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

.series-nav-btn.next{
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;
}

.series-nav-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 14px rgba(0,0,0,.12);
}

@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>
<div class="wrap" id="app" aria-live="polite">

<header>

  <h1>
    英検３級 フラッシュ英単語
    <span class="badge">No.2 頻出動詞②</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/eiken3-series-2/">

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

  </a>

</div>

<!-- 前へ・次へ -->
<div class="series-nav-wrap">
  <a class="series-nav-btn prev" href="https://jouniorsankosodate.com/eiken3-set1/">← 前のレッスンへ</a>
  <a class="series-nav-btn next" href="https://jouniorsankosodate.com/eiken3-set3/">次のレッスンへ →</a>
</div>

</div>

<script>
const ITEMS = [
  { word:"describe", jp:"描写する・説明する" },
  { word:"destroy", jp:"破壊する" },
  { word:"discover", jp:"発見する" },
  { word:"disappear", jp:"消える" },
  { word:"discuss", jp:"話し合う" },
  { word:"encourage", jp:"励ます" },
  { word:"explain", jp:"説明する" },
  { word:"express", jp:"表現する" },
  { word:"fail", jp:"失敗する・試験に落ちる" },
  { word:"forget", jp:"忘れる" },
  { word:"happen", jp:"起こる" },
  { word:"hold", jp:"開催する・手につかむ" },
  { word:"improve", jp:"上達する・改善する" },
  { word:"increase", jp:"増える・増やす" },
  { word:"introduce", 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>


<p>投稿 <a href="https://jouniorsankosodate.com/eiken3-set2/">英検３級 フラッシュ英単語 No.2｜頻出動詞②（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/eiken3-set2/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>英検３級 フラッシュ英単語 No.1｜頻出動詞①（音声対応）</title>
		<link>https://jouniorsankosodate.com/eiken3-set1/</link>
					<comments>https://jouniorsankosodate.com/eiken3-set1/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Thu, 30 Jul 2026 06:45:35 +0000</pubDate>
				<category><![CDATA[🟦 英検3級 英語シリーズ]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=7227</guid>

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

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

  --accent:#2563eb;
  --accent-weak:#dbeafe;

  --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:#eff6ff;
}

.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,#dbeafe,#bfdbfe);
  color:#1e3a8a;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
  transition:.25s;
}

.series-back-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 14px rgba(0,0,0,.12);
}

/* 前へ・次へ */
.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);
  transition:.25s;
}

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

.series-nav-btn.next{
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;
}

.series-nav-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 14px rgba(0,0,0,.12);
}

@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>
<div class="wrap" id="app" aria-live="polite">

<header>

  <h1>
    英検３級 フラッシュ英単語
    <span class="badge">No.1 頻出動詞①</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/eiken3-series-2/">

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

  </a>

</div>

<!-- 前へ・次へ -->
<div class="series-nav-wrap">
  <a class="series-nav-btn next" href="https://jouniorsankosodate.com/eiken3-set2/">次のレッスンへ →</a>
</div>

</div>

<script>
const ITEMS = [
  { word:"agree", jp:"同意する" },
  { word:"allow", jp:"許す" },
  { word:"announce", jp:"発表する" },
  { word:"appear", jp:"現れる" },
  { word:"arrive", jp:"到着する" },
  { word:"attend", jp:"出席する" },
  { word:"belong", jp:"所属する" },
  { word:"borrow", jp:"借りる" },
  { word:"cause", jp:"引き起こす" },
  { word:"choose", jp:"選ぶ" },
  { word:"collect", jp:"集める" },
  { word:"compare", jp:"比較する" },
  { word:"continue", jp:"続ける" },
  { word:"create", jp:"創り出す" },
  { word:"decide", 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>


<p>投稿 <a href="https://jouniorsankosodate.com/eiken3-set1/">英検３級 フラッシュ英単語 No.1｜頻出動詞①（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/eiken3-set1/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
