[{"data":1,"prerenderedAt":285},["ShallowReactive",2],{"content-/financial-statements-quiz":3,"all-pages-for-dir":283,"og-image-/financial-statements-quiz":284},{"id":4,"title":5,"body":6,"category":264,"description":265,"extension":266,"meta":267,"navigation":268,"ogImage":269,"path":270,"project_name":271,"published":272,"publishedAt":273,"seo":274,"stem":275,"tags":276,"todo":269,"unpublished":272,"updatedAt":269,"__hash__":282},"pages/2026-05/2026-05-12/financial-statements-quiz.md","財務諸表クイズの実装 - SVGハイライト連動と左右2カラムレイアウト",{"type":7,"value":8,"toc":251},"minimark",[9,22,27,30,33,46,49,56,59,62,65,69,76,82,85,89,98,146,157,160,167,176,179,182,185,189,192,203,210,213,217,224,227,247],[10,11,12,13,17,18,21],"p",{},"決算書の入門書（2026年版）を裁断してTurso DBに取り込み終えたので、トピック6（貸借対照表のしくみ）から18問のクイズを作って財務諸表クイズページにした。SVGを",[14,15,16],"code",{},"\u003CBsShikumi>","Vueコンポーネント化して、各クイズの",[14,19,20],{},"highlight","フィールドでマゼンタ強調箇所を制御する仕組みも入れた。",[23,24,26],"h2",{"id":25},"bspl-のブラケット構造svg作成","BS/PL のブラケット構造SVG作成",[10,28,29],{},"朝はBS/PLのブラケット構造SVGを作るところから始めた。svg-diagramスキルでBSとPLを同じ系統で書き出したら、純資産ボックスの底辺が資産ボックスより上で止まっていた。スキルに「資産と負債+純資産を横並びにする際は図形の高さを揃える」というルールを追加し、純資産ボックスを下に伸ばして底辺を合わせた。",[10,31,32],{},"その後、Illustratorからエクスポートした自作SVG（アセット1〜4.svg）をpreview.htmlに取り込む工程に移った。AxisProNフォントを使ったままだったので環境依存で崩れる。3つの処理をまとめて適用した。",[34,35,36,40,43],"ul",{},[37,38,39],"li",{},"フォント置換（環境非依存のシステムフォントへ）",[37,41,42],{},"「資産・負債・純資産」の円バッジを背景マゼンタ＋白文字",[37,44,45],{},"外側パネルの白背景を透明に",[23,47,48],{"id":48},"マゼンタの色を印刷マゼンタに揃える",[10,50,51,52,55],{},"最初はsvg-diagramスキルの既定マゼンタを使っていたが、紫寄りに転んでいると指摘を受けた。",[14,53,54],{},"#ed1e79","（CMYK由来の印刷マゼンタ）に差し替え、svg-diagramスキルのパレット定義もこちらに作り直した。",[23,57,58],{"id":58},"図セットの外周マージン整合ルールをスキルに追加",[10,60,61],{},"3枚（BS/PL/CF）を等幅で並べたら、BSだけ左右マージンが詰まって見えた。viewBoxとwidth/heightが揃っていなかった。BSのviewBoxを修正してキャンバス寸法を343.62 × 468.615で統一し、コンテンツ周りに約10pxの余白が左右対称で揃うようにした。",[10,63,64],{},"svg-diagramスキルに「14. 図セット（BS/PL/CFなど）の外周マージン整合（必須）」セクションを追加した。同じシリーズの図を並べる際は、viewBoxを揃えてから書き出すルールに固定した。",[23,66,68],{"id":67},"phase-1-パイロット-トピック6から18問のクイズ","Phase 1 パイロット - トピック6から18問のクイズ",[10,70,71,72,75],{},"Turso DBから書籍ID ",[14,73,74],{},"kessansho-kihon-50-2020"," のトピック6本文を引いて、Nuxtページとしてクイズを実装した。最初は単一カラムでSVGとクイズが縦に並んでいたが、PCで見るとスクロール量が多い。レイアウト変更を依頼された。",[77,78,79],"blockquote",{},[10,80,81],{},"左側に図、右側にクイズを配置してください。Q1が画面縦方向の中央に表示されるようにしてください。回答後はQ2が今度は中央に表示されるようになり、マウスのスクロールを減らしてほしい。",[10,83,84],{},"左固定SVG / 右スクロールクイズの2カラムに改修した。Q1が画面中央に来て、回答するとQ2が中央へスクロールしてくる動きにした。",[23,86,88],{"id":87},"svgをvueコンポーネント化してハイライト連動","SVGをVueコンポーネント化してハイライト連動",[10,90,91,92,94,95,97],{},"各クイズに",[14,93,20],{},"フィールドを持たせ、SVGを",[14,96,16],{},"コンポーネント化した。propsで受け取ったハイライト対象に応じて、該当パスにマゼンタクラスを当てる作りにした。",[99,100,105],"pre",{"className":101,"code":102,"language":103,"meta":104,"style":104},"language-vue shiki shiki-themes vitesse-light vitesse-light","\u003CBsShikumi :highlight=\"currentQuiz.highlight\" />\n","vue","",[14,106,107],{"__ignoreMap":104},[108,109,112,116,120,123,126,129,132,136,139,141,143],"span",{"class":110,"line":111},"line",1,[108,113,115],{"class":114},"shFtX","\u003C",[108,117,119],{"class":118},"sHkkW","BsShikumi",[108,121,122],{"class":114}," :",[108,124,20],{"class":125},"senZ8",[108,127,128],{"class":114},"=",[108,130,131],{"class":114},"\"",[108,133,135],{"class":134},"s4oTP","currentQuiz",[108,137,138],{"class":114},".",[108,140,20],{"class":134},[108,142,131],{"class":114},[108,144,145],{"class":114}," />\n",[10,147,148,149,152,153,156],{},"初回実装で表示が崩れて、Viteのコンパイルエラーを覗いたら原因が分かった。SVGの",[14,150,151],{},"\u003Cdefs>\u003Cstyle>","をVue SFCのテンプレートに直接書いていたため、Vueテンプレートパーサーが",[14,154,155],{},"\u003Cstyle>","タグを誤解釈していた。CSSをscopedブロックに移して解決した。",[23,158,159],{"id":159},"ハイライト範囲が広すぎた問題",[10,161,162,163,166],{},"最初の実装では",[14,164,165],{},"all","ハイライトをQ1/Q12/Q15/Q16に当てていたが、画面を見ると問題と無関係な箇所までマゼンタに染まっていた。",[10,168,169,171,172,175],{},[14,170,165],{},"タイプを除外し、各クイズのハイライト対象を見直した。特にQ1の「B/Sが明らかにするのは」は、当初タイトル文字だけを強調していたが、本質は「資金の運用形態と調達源泉のバランス」なので",[14,173,174],{},"balance","（運用形態＋調達源泉の両軸）に再割り当てした。",[10,177,178],{},"それに合わせて問題順序も「B/S英語名 → 左側 → 右側 → 明らかにするもの」と易→難に並べ替えた。",[23,180,181],{"id":181},"下部ボックスをグレー背景に",[10,183,184],{},"SVG下部の「何にお金を投資したのか？」「どうやってお金を集めたか？」の2ボックスは常時マゼンタにしていたが、画面で見ると主張が強すぎてクイズのハイライトと喧嘩していた。グレー背景（#e6e6e6）＋黒文字（#333）に落として、マゼンタはクイズ連動時だけが目立つようにした。",[23,186,188],{"id":187},"phase-23-と-svg-タイポグラフィガイド","Phase 2/3 と SVG タイポグラフィガイド",[10,190,191],{},"Phase 2（B/S編 12トピック・236問）が完了したあと、Phase 3（P/L編 トピック18〜26）に進んだ。Agentサブエージェントを並列で起動して3ラウンドに分けた。",[34,193,194,197,200],{},[37,195,196],{},"R1: T18〜T21（4並列） → 73問追加",[37,198,199],{},"R2: T22〜T25（4並列） → 累計144問",[37,201,202],{},"R3: T26（1並列） → 9トピック完成",[10,204,205,206,209],{},"並列展開のあと、",[14,207,208],{},"memo/2026-05-12/svg-figure-typography-guide.md"," を新規作成した。フォント階層L1〜L9のpx値・font-weight・用途を表にまとめたガイドだ。初版でSVGの文字が小さくなりがちな原因も書いた。",[10,211,212],{},"ガイドを作ったあとはphase2-parallel-tasks.md / phase3-parallel-tasks.md にも階層を反映し、Pl* 9ファイルを3並列で監査・修正した。タイポグラフィガイドの逆流反映で、既存ファイルの文字サイズが新ルールに揃った。",[23,214,216],{"id":215},"計画書とurl構造","計画書とURL構造",[10,218,219,220,223],{},"計画書 ",[14,221,222],{},"memo/2026-05-12/kihon-50-2026-update-plan.md"," を更新した。Phase 1パイロット完了の状態を反映し、TOC + 個別ページのURL構造も決めた。クイズページから貸借対照表のしくみ6に直接飛ぶ動線を廃止し、目次ページ経由でトピック6〜17の一覧に入る形に変えた。",[23,225,226],{"id":226},"学び",[34,228,229,235,241,244],{},[37,230,231,232,234],{},"SVGの",[14,233,151],{},"はVue SFCに直貼りすると壊れる。CSSはscopedブロックに移す",[37,236,237,238,240],{},"ハイライトは「広く取りすぎない」が正解。",[14,239,165],{},"は逃げ",[37,242,243],{},"図セットを並べる前に、viewBox/width/heightを揃える。後から直すと既存の整合が崩れる",[37,245,246],{},"スキルに新ルールを追加したら、既存ファイルへ逆流反映するまでが1セット",[248,249,250],"style",{},"html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":104,"searchDepth":252,"depth":252,"links":253},2,[254,255,256,257,258,259,260,261,262,263],{"id":25,"depth":252,"text":26},{"id":48,"depth":252,"text":48},{"id":58,"depth":252,"text":58},{"id":67,"depth":252,"text":68},{"id":87,"depth":252,"text":88},{"id":159,"depth":252,"text":159},{"id":181,"depth":252,"text":181},{"id":187,"depth":252,"text":188},{"id":215,"depth":252,"text":216},{"id":226,"depth":252,"text":226},"dev","BS/PL/CFのブラケット構造SVGをスキル化し、クイズ回答に応じてマゼンタで該当箇所を強調する財務諸表学習ページを実装。書籍2026年版の取り込みからPhase 3のサブエージェント並列展開まで。","md",{},true,null,"/financial-statements-quiz","eurekapu-nuxt4",false,"2026-05-12T00:00:00.000Z",{"title":5,"description":265},"2026-05/2026-05-12/financial-statements-quiz",[277,103,278,279,280,281],"svg","nuxt","quiz","financial-statements","accounting","u3By8-ZRq8HYpoEaXme8iE7rUi-Y0tb6bFmUTSBwSt8",[],"https://log.eurekapu.com/og/blog/financial-statements-quiz.png?v=2026-05-12T00%3A00%3A00.000Z&title=%E8%B2%A1%E5%8B%99%E8%AB%B8%E8%A1%A8%E3%82%AF%E3%82%A4%E3%82%BA%E3%81%AE%E5%AE%9F%E8%A3%85%20-%20SVG%E3%83%8F%E3%82%A4%E3%83%A9%E3%82%A4%E3%83%88%E9%80%A3%E5%8B%95%E3%81%A8%E5%B7%A6%E5%8F%B32%E3%82%AB%E3%83%A9%E3%83%A0%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88&author=Kei%20Komatsu&sig=b43bfdfa8d5b3a54",1782528835765]