Menu
Memo(JA)
Notebook(JA)
建てる
build
営む
living
買う・借りる
rent/buy
まち
cities
法令
Law
Memo(EN)
Notebook
Japanese Cities & Development
Cities in Japan
Urban Planning in Japan
Urban Planning
Architecture & Law in Japan
Architecture & Law
About Kento-kun
kentokun
Privacy Policy
privacy-policy
Memo(JA)
Notebook(JA)
建てる
build
営む
living
買う・借りる
rent/buy
まち
cities
法令
Law
Memo(EN)
Notebook
Japanese Cities & Development
Cities in Japan
Urban Planning in Japan
Urban Planning
Architecture & Law in Japan
Architecture & Law
About Kento-kun
kentokun
Privacy Policy
privacy-policy
Memo(JA)
Memo(EN)
About Kento-kun
Privacy Policy
Kentoくん10問チャレンジ｜宅建・都市計画法
</noscript><iframe id="kento-city-planning-quiz-frame" title="Kentoくん10問チャレンジ 宅建・都市計画法" loading="eager" data-no-lazy="1" srcdoc="<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Kentoくん10問チャレンジ｜宅建・都市計画法</title> <style> :root { --ink: #203142; --muted: #637487; --navy: #173b5e; --blue: #4b87c5; --sky: #e7f5ff; --cream: #fff8e8; --mint: #e5f5ec; --yellow: #ffe59a; --coral: #f1785b; --white: #fff; --line: #d9e3ec; --shadow: 0 18px 48px rgba(26, 59, 91, .12); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; background: radial-gradient(circle at 8% 4%, rgba(255,229,154,.68) 0 78px, transparent 79px), radial-gradient(circle at 92% 6%, rgba(255,255,255,.9) 0 102px, transparent 103px), linear-gradient(180deg, #eaf7ff 0, #f8fcff 380px, #f5f8f3 100%); line-height: 1.75; } button, a { font: inherit; } button { touch-action: manipulation; } .quiz-shell { width: min(100% - 28px, 980px); margin: 0 auto; padding: 28px 0 58px; } .quiz-card { position: relative; overflow: hidden; min-height: 680px; background: rgba(255,255,255,.96); border: 1px solid rgba(217,227,236,.85); border-radius: 34px; box-shadow: var(--shadow); } .quiz-view { display: none; padding: clamp(24px, 5vw, 58px); } .quiz-view.is-active { display: block; animation: fade-up .35s ease both; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 7px 14px; color: var(--navy); background: var(--yellow); border-radius: 999px; font-size: 14px; font-weight: 800; letter-spacing: .08em; } h1, h2, p { margin-top: 0; } h1 { margin-bottom: 18px; font-size: clamp(36px, 6.2vw, 64px); line-height: 1.16; letter-spacing: -.045em; } h1 span { color: var(--blue); } h2 { font-size: clamp(26px, 4vw, 40px); line-height: 1.35; } .lead { max-width: 620px; color: var(--muted); font-size: clamp(16px, 2vw, 19px); } .intro-grid { display: block; max-width: 760px; } .mode-title { margin: 32px 0 12px; color: var(--navy); font-size: 17px; font-weight: 800; } .mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .mode-button { min-height: 102px; padding: 17px 20px; text-align: left; color: var(--ink); background: var(--white); border: 2px solid var(--line); border-radius: 20px; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .mode-button:hover, .mode-button:focus-visible { transform: translateY(-3px); border-color: var(--blue); box-shadow: 0 12px 24px rgba(75,135,197,.15); outline: none; } .mode-button strong { display: block; margin-bottom: 3px; color: var(--navy); font-size: 19px; } .mode-button small { color: var(--muted); font-size: 13px; } .quiz-note { margin: 18px 0 0; color: var(--muted); font-size: 13px; } .progress-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; } .progress-label { color: var(--navy); font-weight: 800; } .score-label { color: var(--muted); font-size: 14px; } .progress-track { height: 10px; margin-bottom: 34px; overflow: hidden; background: #e9eff4; border-radius: 999px; } .progress-bar { width: 10%; height: 100%; background: linear-gradient(90deg, var(--blue), #76b3dd); border-radius: inherit; transition: width .35s ease; } .question-meta { color: var(--blue); font-size: 14px; font-weight: 800; letter-spacing: .08em; } .question-text { margin: 10px 0 16px; font-size: clamp(22px, 3.7vw, 32px); font-weight: 750; line-height: 1.65; letter-spacing: .01em; } .answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .answer-button { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 82px; color: var(--navy); background: var(--sky); border: 0; border-radius: 22px; font-size: clamp(19px, 3vw, 25px); font-weight: 800; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(75,135,197,.08); transition: transform .18s ease, background .18s ease, box-shadow .18s ease; } .answer-button[data-answer="false"] { color: #9b4a38; background: #fff0eb; } .answer-button:hover, .answer-button:focus-visible { transform: translateY(-2px); background: #d9efff; box-shadow: 0 10px 22px rgba(75,135,197,.16); outline: none; } .answer-button[data-answer="false"]:hover, .answer-button[data-answer="false"]:focus-visible { background: #ffe1d8; box-shadow: 0 10px 22px rgba(241,120,91,.14); } .answer-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; font-size: 36px; font-weight: 700; line-height: 1; } .answer-button:disabled { cursor: default; opacity: .58; transform: none; } .feedback { display: none; grid-template-columns: 92px minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 24px; padding: 22px; border-radius: 22px; } .feedback.is-visible { display: grid; animation: pop .28s ease both; } .feedback.is-correct { background: var(--mint); } .feedback.is-wrong { background: #fff0eb; } .feedback-mark { display: grid; place-items: center; width: 72px; height: 72px; color: var(--white); background: #2d916d; border-radius: 50%; font-size: 38px; font-weight: 900; } .feedback.is-wrong .feedback-mark { background: var(--coral); } .feedback-title { margin: 0 0 4px; font-size: 23px; line-height: 1.35; } .feedback-copy { margin: 0; color: #435466; } .feedback-actions { display: flex; grid-column: 1 / -1; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; } .next-button, .restart-button { min-height: 50px; padding: 11px 24px; color: var(--white); background: var(--navy); border: 0; border-radius: 999px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 18px rgba(23,59,94,.18); } .next-button:hover, .next-button:focus-visible, .restart-button:hover, .restart-button:focus-visible { background: #245579; outline: 3px solid rgba(75,135,197,.25); } .article-link { color: var(--blue); font-weight: 750; text-underline-offset: 4px; } .result-top { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 28px; align-items: center; } .score-circle { display: grid; place-items: center; width: 190px; height: 190px; margin: 18px 0; background: var(--sky); border: 12px solid #c9e7fb; border-radius: 50%; } .score-number { color: var(--navy); font-size: 51px; font-weight: 900; line-height: 1; } .score-number small { font-size: 20px; } .result-message { max-width: 580px; color: var(--muted); font-size: 18px; } .result-kento { width: 100%; max-height: 330px; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(31,60,88,.14)); } .result-kento.perfect { animation: cheer .8s ease-in-out infinite alternate; } .result-kento.good { animation: float 2.8s ease-in-out infinite; } .result-kento.retry { animation: nod 2.2s ease-in-out infinite; } .review { margin-top: 32px; } .review h3 { margin-bottom: 13px; color: var(--navy); font-size: 21px; } .review-list { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; } .review-item { padding: 15px 17px; background: #f7f9fb; border-left: 5px solid var(--coral); border-radius: 12px; } .review-item p { margin: 0 0 5px; font-size: 14px; } .review-item a { color: var(--blue); font-size: 13px; font-weight: 750; } .result-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .restart-button.secondary { color: var(--navy); background: var(--white); border: 2px solid var(--navy); box-shadow: none; } .restart-button.secondary:hover { color: var(--white); background: var(--navy); } .legal-note { margin: 22px 0 0; color: var(--muted); font-size: 12px; } @keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes cheer { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-10px) rotate(1deg); } } @keyframes nod { 0%,100% { transform: rotate(0); } 45% { transform: rotate(1.5deg); } 55% { transform: rotate(-1.5deg); } } @media (max-width: 720px) { .quiz-shell { width: min(100% - 16px, 980px); padding-top: 10px; } .quiz-card { min-height: 650px; border-radius: 24px; } .quiz-view { padding: 24px 18px 30px; } .result-top { grid-template-columns: 1fr; } .mode-grid { grid-template-columns: 1fr; } .mode-button { min-height: 86px; } .question-text { margin-bottom: 14px; font-size: 21px; } .answer-grid { gap: 10px; } .answer-button { min-height: 72px; padding: 10px 8px; font-size: 18px; } .feedback { grid-template-columns: 52px minmax(0, 1fr); gap: 13px; padding: 17px 15px; } .feedback-mark { width: 48px; height: 48px; font-size: 27px; } .feedback-title { font-size: 19px; } .feedback-copy { font-size: 14px; } .feedback-actions { grid-column: 1 / -1; } .next-button { flex: 1 1 100%; } .result-kento { width: 190px; height: 230px; margin: 0 auto; order: -1; } .score-circle { width: 160px; height: 160px; } .score-number { font-size: 43px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } } </style> </head> <body> <main class="quiz-shell"> <section class="quiz-card" aria-label="Kentoくん10問チャレンジ"> <div id="introView" class="quiz-view is-active"> <div class="intro-grid"> <div> <p class="eyebrow">宅建・都市計画法</p> <h1>Kentoくん<br><span>10問チャレンジ</span></h1> <p class="lead">これまで学んだ10テーマを、一問一答でまとめて復習しよう。正しいか、誤りかを選ぶだけ。回答後に短い解説を確認できます。</p> <p class="mode-title">挑戦するモードを選んでね</p> <div class="mode-grid"> <button class="mode-button" type="button" data-mode="ordered"> <strong>基礎から順番</strong> <small>動画の公開順に、基礎から復習</small> </button> <button class="mode-button" type="button" data-mode="random"> <strong>ランダム10問</strong> <small>同じ問題は重複せず、順番だけ変化</small> </button> </div> <p class="quiz-note">全10問／回答の途中で解説記事を開いても、このページの進捗は残ります。</p> </div> </div> </div> <div id="questionView" class="quiz-view"> <div class="progress-row"> <span id="progressLabel" class="progress-label">第1問 / 10</span> <span id="scoreLabel" class="score-label">現在 0問正解</span> </div> <div class="progress-track" aria-hidden="true"><div id="progressBar" class="progress-bar"></div></div> <p id="questionMeta" class="question-meta"></p> <h2 id="questionText" class="question-text"></h2> <div class="answer-grid" aria-label="回答を選択"> <button class="answer-button" type="button" data-answer="true"><span class="answer-icon">○</span>正しい</button> <button class="answer-button" type="button" data-answer="false"><span class="answer-icon">×</span>誤り</button> </div> <div id="feedback" class="feedback" role="status" aria-live="polite"> <div id="feedbackMark" class="feedback-mark"></div> <div> <h3 id="feedbackTitle" class="feedback-title"></h3> <p id="feedbackCopy" class="feedback-copy"></p> </div> <div class="feedback-actions"> <button id="nextButton" class="next-button" type="button">次の問題へ</button> <a id="articleLink" class="article-link" href="#" target="_blank" rel="noopener">詳しい解説記事を読む</a> </div> </div> </div> <div id="resultView" class="quiz-view"> <div class="result-top"> <div> <p class="eyebrow">チャレンジ完了</p> <h2 id="resultTitle">おつかれさまでした！</h2> <div class="score-circle" aria-label="得点"> <div id="scoreNumber" class="score-number">0<small>/10</small></div> </div> <p id="resultMessage" class="result-message"></p> </div> <img id="resultKento" class="result-kento" data-src="https://kentokun-urbanlife.com/wp-content/uploads/2024/06/%E3%83%9D%E3%83%BC%E3%82%BA2-e1721024265922.png" alt="挑戦をねぎらうKentoくん"> </div> <div id="review" class="review"></div> <div class="result-actions"> <button class="restart-button" type="button" data-restart="random">もう一度ランダム</button> <button class="restart-button secondary" type="button" data-restart="ordered">もう一度挑戦</button> </div> <p class="legal-note">法令基準日：各解説記事に記載。法改正後は、リンク先の更新情報も確認してください。</p> </div> </section> </main> <script> (() => { const questions = [ { episode: 1, theme: "高度地区", text: "高度地区は、用途地域内において、市街地の環境を維持し、または土地利用の増進を図るため、建築物の高さの最高限度または最低限度を定める地区である。", answer: true, explanation: "高度地区は用途地域内に定め、建築物の高さの最高限度または最低限度を定めます。高度利用地区との混同に注意しましょう。", url: "https://kentokun-urbanlife.com/koudo-chiku-height-limit/" }, { episode: 2, theme: "特定街区", text: "特定街区では、都市計画により、建築物の容積率、高さの最高限度、壁面の位置の制限を定める。", answer: true, explanation: "特定街区で定める基本の3点は、容積率、高さの最高限度、壁面の位置の制限です。", url: "https://kentokun-urbanlife.com/tokutei-gaiku-three-rules/" }, { episode: 3, theme: "準住居地域", text: "準住居地域は、道路沿道の特性に適した業務の利便を高めながら、その業務と調和する住居環境を守るために定める用途地域である。", answer: true, explanation: "準住居地域は、道路沿道の業務の利便と、それに調和した住居環境の保護を両立させる用途地域です。", url: "https://kentokun-urbanlife.com/jun-jukyo-chiiki-guide/" }, { episode: 4, theme: "特別用途地区", text: "特別用途地区は、用途地域が定められていない土地の区域で、地域の特性に応じて制限すべき建築物などの用途の概要を定める地区である。", answer: false, explanation: "この説明は特定用途制限地域です。特別用途地区は、用途地域内で用途制限を補完するために定めます。", url: "https://kentokun-urbanlife.com/tokubetsu-yoto-chiku-guide/" }, { episode: 5, theme: "準都市計画区域の開発許可", text: "準都市計画区域内で、店舗を建築するため、4,000㎡の土地について区画形質の変更を行う場合、原則として開発許可を受けなければならない。", answer: true, explanation: "準都市計画区域では、原則3,000㎡以上の開発行為が許可対象です。4,000㎡は基準以上になります。", url: "https://kentokun-urbanlife.com/quasi-city-planning-development-permit/" }, { episode: 6, theme: "市街化区域の農家住宅", text: "市街化区域内で、農業を営む人の住宅を建てるため、1,500㎡の土地について区画形質の変更を行う場合、開発許可を受けなくてもよい。", answer: false, explanation: "農家住宅の適用除外は市街化調整区域などでの例外です。市街化区域では、農家住宅という理由だけで許可不要にはなりません。", url: "https://kentokun-urbanlife.com/city-area-farmer-house-development-permit/" }, { episode: 7, theme: "第二種特定工作物", text: "市街化調整区域内で、観客席などの建築物を設けない9,000㎡の民間野球場をつくるため土地の区画形質を変更する場合、開発許可を受けなければならない。", answer: false, explanation: "建築物のない9,000㎡の野球場は1ha未満で、第二種特定工作物に当たりません。この目的では都市計画法上の開発行為になりません。", url: "https://kentokun-urbanlife.com/baseball-field-development-permit-1ha/" }, { episode: 8, theme: "市街化調整区域の病院", text: "市街化調整区域内で、病院を建築するため、1,200㎡の土地について区画形質の変更を行う場合、開発許可を受ける必要はない。", answer: false, explanation: "病院は現在、開発許可の適用除外施設ではありません。市街化調整区域では規模による適用除外もないため、開発許可が必要です。", url: "https://kentokun-urbanlife.com/urbanization-control-area-hospital-development-permit/" }, { episode: 9, theme: "少なくとも定める都市施設", text: "市街化区域と区域区分を定めていない都市計画区域では、都市計画として少なくとも、道路・病院・下水道を定めることとされている。", answer: false, explanation: "正しい組合せは道路・公園・下水道です。病院も都市施設ですが、『少なくとも定める3施設』には含まれません。", url: "https://kentokun-urbanlife.com/minimum-urban-facilities-road-park-sewer/" }, { episode: 10, theme: "市街地開発事業", text: "市街化調整区域では、市街地開発事業を都市計画に定めることはできない。", answer: true, explanation: "市街地開発事業を定められるのは、市街化区域または非線引き都市計画区域です。市街化調整区域は対象外です。", url: "https://kentokun-urbanlife.com/urban-development-projects-control-area/" } ]; const $ = selector => document.querySelector(selector); const $$ = selector => [...document.querySelectorAll(selector)]; const views = { intro: $("#introView"), question: $("#questionView"), result: $("#resultView") }; let order = []; let current = 0; let score = 0; let answers = []; let locked = false; const shuffle = items => { const copy = [...items]; for (let i = copy.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [copy[i], copy[j]] = [copy[j], copy[i]]; } return copy; }; const showView = name => { Object.entries(views).forEach(([key, node]) => node.classList.toggle("is-active", key === name)); window.scrollTo({ top: 0, behavior: "smooth" }); requestResize(); requestParentScroll(); }; const start = mode => { order = mode === "random" ? shuffle(questions) : [...questions]; current = 0; score = 0; answers = []; showView("question"); renderQuestion(); }; const renderQuestion = () => { locked = false; const item = order[current]; $("#progressLabel").textContent = `第${current + 1}問 / 10`; $("#scoreLabel").textContent = `現在 ${score}問正解`; $("#progressBar").style.width = `${(current + 1) * 10}%`; $("#questionMeta").textContent = item.theme; $("#questionText").textContent = item.text; $("#feedback").className = "feedback"; $$(".answer-button").forEach(button => { button.disabled = false; }); $("#questionText").focus?.(); requestResize(); requestParentScroll(); }; const answer = selected => { if (locked) return; locked = true; const item = order[current]; const correct = selected === item.answer; if (correct) score += 1; $("#scoreLabel").textContent = `現在 ${score}問正解`; answers.push({ item, selected, correct }); $$(".answer-button").forEach(button => { button.disabled = true; }); const feedback = $("#feedback"); feedback.className = `feedback is-visible ${correct ? "is-correct" : "is-wrong"}`; $("#feedbackMark").textContent = correct ? "○" : "×"; $("#feedbackTitle").textContent = correct ? "正解！" : `惜しい！ 正解は「${item.answer ? "正しい" : "誤り"}」`; $("#feedbackCopy").textContent = item.explanation; $("#articleLink").href = item.url; $("#nextButton").textContent = current === order.length - 1 ? "結果を見る" : "次の問題へ"; $("#nextButton").focus(); requestResize(); }; const next = () => { if (!locked) return; if (current < order.length - 1) { current += 1; renderQuestion(); } else { renderResult(); } }; const renderResult = () => { const percent = score * 10; const image = $("#resultKento"); $("#scoreNumber").innerHTML = `${score}<small>/10</small>`; if (score === 10) { $("#resultTitle").textContent = "全問正解！ すごい！"; $("#resultMessage").textContent = "都市計画法マスター級です。条文の言葉だけでなく、区域や制度の理由までしっかり整理できています。"; image.src = "https://kentokun-urbanlife.com/wp-content/uploads/2024/06/%E3%83%89%E3%83%A4%E9%A1%94-e1718415143621.png"; image.alt = "全問正解を誇らしく喜ぶKentoくん"; image.className = "result-kento perfect"; } else if (score >= 8) { $("#resultTitle").textContent = "かなり仕上がってるよ！"; $("#resultMessage").textContent = `正解率${percent}%！ 間違えたところだけ記事で確認すれば、さらに安定します。`; image.src = "https://kentokun-urbanlife.com/wp-content/uploads/2024/06/%E3%83%89%E3%83%A4%E9%A1%94-e1718415143621.png"; image.alt = "高得点を喜ぶKentoくん"; image.className = "result-kento good"; } else if (score >= 5) { $("#resultTitle").textContent = "いい調子。ここから伸びるよ！"; $("#resultMessage").textContent = `正解率${percent}%です。間違えた問題は、区域と制度の目的をつなげて復習してみよう。`; image.src = "https://kentokun-urbanlife.com/wp-content/uploads/2024/06/%E3%83%9D%E3%83%BC%E3%82%BA2-e1721024265922.png"; image.alt = "挑戦をねぎらうKentoくん"; image.className = "result-kento good"; } else { $("#resultTitle").textContent = "挑戦したことが、まず一歩！"; $("#resultMessage").textContent = `正解率${percent}%です。大丈夫。一問ずつ短い解説を読み直せば、次はきっと増やせるよ。`; image.src = "https://kentokun-urbanlife.com/wp-content/uploads/2024/06/%E3%83%9D%E3%83%BC%E3%82%BA2-e1721024265922.png"; image.alt = "一緒に復習しようと応援するKentoくん"; image.className = "result-kento retry"; } const mistakes = answers.filter(entry => !entry.correct); const review = $("#review"); if (mistakes.length === 0) { review.innerHTML = '<h3>復習結果</h3><p>間違えた問題はありません。次の10問も一緒に挑戦しよう！</p>'; } else { review.innerHTML = `<h3>間違えた${mistakes.length}問を復習</h3><ul class="review-list">${mistakes.map(({ item }) => ` <li class="review-item"> <p>${item.theme}：正解は「${item.answer ? "正しい" : "誤り"}」</p> <a href="${item.url}" target="_blank" rel="noopener">詳しい解説記事を読む</a> </li>`).join("")}</ul>`; } showView("result"); }; const requestResize = () => { requestAnimationFrame(() => { const height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); parent.postMessage({ type: "kento-quiz-resize", height }, "*"); }); }; const requestParentScroll = () => { requestAnimationFrame(() => { parent.postMessage({ type: "kento-quiz-scroll-top" }, "*"); [120, 400, 900].forEach(delay => { window.setTimeout(() => parent.postMessage({ type: "kento-quiz-scroll-top" }, "*"), delay); }); }); }; $$("[data-mode]").forEach(button => button.addEventListener("click", () => start(button.dataset.mode))); $$(".answer-button").forEach(button => button.addEventListener("click", () => answer(button.dataset.answer === "true"))); $("#nextButton").addEventListener("click", next); $$("[data-restart]").forEach(button => button.addEventListener("click", () => start(button.dataset.restart))); window.addEventListener("load", requestResize); window.addEventListener("resize", requestResize); new ResizeObserver(requestResize).observe(document.body); })(); </script> </body> </html> ">
ホーム
Kentoくん10問チャレンジ｜宅建・都市計画法
閉じる
