<?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/tag/%E8%8B%B1%E6%A4%9C/feed/" rel="self" type="application/rss+xml" />
	<link>https://jouniorsankosodate.com/tag/英検/</link>
	<description>受験のその先へ｜子どもたちのより良い未来を育てる</description>
	<lastBuildDate>Sat, 02 May 2026 06:10:49 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0</generator>

<image>
	<url>https://jouniorsankosodate.com/wp-content/uploads/2026/02/cropped-44f1f7a5e508593f7c057572c07f45a3-32x32.jpg</url>
	<title>英検 アーカイブ - じゅにさん子育てブログ</title>
	<link>https://jouniorsankosodate.com/tag/英検/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>英検５級 フラッシュ英単語 No.2｜家族・人を表す名詞（音声対応）</title>
		<link>https://jouniorsankosodate.com/flash-no2/</link>
					<comments>https://jouniorsankosodate.com/flash-no2/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Wed, 22 Oct 2025 11:21:00 +0000</pubDate>
				<category><![CDATA[🟧英検５級 英語シリーズ]]></category>
		<category><![CDATA[＃フラッシュ]]></category>
		<category><![CDATA[＃暗記]]></category>
		<category><![CDATA[＃無料アプリ]]></category>
		<category><![CDATA[#英単語]]></category>
		<category><![CDATA[＃英検５級]]></category>
		<category><![CDATA[英検]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=1371</guid>

					<description><![CDATA[<p>英検５級 フラッシュ英単語 No.2｜家族・人を表す名詞（音声対応） 英検５級 フラッシュ英単語 No.2 家族・人を表す名詞 日本語からスタート 🔊 音声ON — — 英語⇆日本語 ▶ 読み上げ わかった 👍 わからん [&#8230;]</p>
<p>投稿 <a href="https://jouniorsankosodate.com/flash-no2/">英検５級 フラッシュ英単語 No.2｜家族・人を表す名詞（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>英検５級 フラッシュ英単語 No.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:active{transform:translateY(1px);}

.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-nav-wrap{
  margin:32px 0 12px;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

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

.series-nav-btn.nav-back{
  color:#2563eb;
  border:2px solid #bfdbfe;
}

.series-nav-btn.next{
  color:#1d4ed8;
  border:2px solid #bfdbfe;
  background:linear-gradient(135deg,#eff6ff,#dbeafe);
}

.series-nav-btn:hover{transform:translateY(-2px);}

@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-nav-btn{
    width:100%;
    font-size:15px;
    padding:12px 18px;
  }
}
</style>
</head>

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

  <header>
    <h1>英検５級 フラッシュ英単語 <span class="badge">No.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-nav-wrap">
    <a href="https://jouniorsankosodate.com/eiken5-no1/" class="series-nav-btn nav-back">
      ← 前のレッスンへ
    </a>

    <a href="https://jouniorsankosodate.com/category/learn/english-flash/" class="series-nav-btn nav-back">
      英単語フラッシュのカテゴリ一覧に戻る
    </a>

    <a href="https://jouniorsankosodate.com/eiken5-no3/" class="series-nav-btn next">
      次のレッスンへ →
    </a>
  </div>

</div>

<script>
const ITEMS = [
  {word:"family",jp:"家族"},
  {word:"father",jp:"父"},
  {word:"mother",jp:"母"},
  {word:"brother",jp:"兄弟"},
  {word:"sister",jp:"姉妹"},
  {word:"friend",jp:"友達"},
  {word:"teacher",jp:"先生"},
  {word:"student",jp:"生徒"},
  {word:"boy",jp:"男の子"},
  {word:"girl",jp:"女の子"}
];

let _voice = null;

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

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

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

(() => {
  const card = document.getElementById("card");
  const frontText = document.getElementById("frontText");
  const backText = document.getElementById("backText");
  const posEl = document.getElementById("pos");
  const totalEl = document.getElementById("total");
  const bar = document.getElementById("bar");
  const jpFirst = document.getElementById("jpFirst");
  const speakOnChk = document.getElementById("speakOn");

  const flipBtn = document.getElementById("flipBtn");
  const speakBtn = document.getElementById("speakBtn");
  const knownBtn = document.getElementById("knownBtn");
  const wrongBtn = document.getElementById("wrongBtn");
  const shuffleBtn = document.getElementById("shuffleBtn");
  const resetBtn = document.getElementById("resetBtn");

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

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

  totalEl.textContent = order.length;

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

  function speak(text){
    try{
      if(!("speechSynthesis" in window)) return;
      if(!_voice) _voice = pickVoice();

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

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

      u.rate = 0.9;
      u.pitch = 1.05;
      speechSynthesis.cancel();
      speechSynthesis.speak(u);
    }catch(e){}
  }

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

  function render(){
    const it = currentItem();

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

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

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

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

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

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

    idx++;
    render();
  }

  function showResult(){
    studyArea.style.display = "none";
    resultBox.style.display = "block";

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

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

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

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

  card.addEventListener("click", flip);
  flipBtn.addEventListener("click", flip);

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

  knownBtn.addEventListener("click", nextCard);

  wrongBtn.addEventListener("click", () => {
    const currentIndex = order[idx];
    if(!reviewList.includes(currentIndex)){
      reviewList.push(currentIndex);
    }
    nextCard();
  });

  reviewBtn.addEventListener("click", () => {
    if(reviewList.length === 0) return;
    const list = [...reviewList];
    reviewList = [];
    startStudy(list);
  });

  againBtn.addEventListener("click", resetAll);
  shuffleBtn.addEventListener("click", shuffleOrder);
  resetBtn.addEventListener("click", resetAll);

  jpFirst.addEventListener("change", e => {
    showJpFirst = e.target.checked;
    render();
  });

  speakOnChk.addEventListener("change", e => {
    speakOn = e.target.checked;
    if(speakOn) speak(currentItem().word);
  });

  window.addEventListener("keydown", e => {
    if(e.key === " "){
      e.preventDefault();
      flip();
    }
  });

  render();
})();
</script>
</body>
</html>



<p class="wp-block-paragraph"></p>



<p class="wp-block-paragraph"></p>
<p>投稿 <a href="https://jouniorsankosodate.com/flash-no2/">英検５級 フラッシュ英単語 No.2｜家族・人を表す名詞（音声対応）</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/flash-no2/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
