[{"data":1,"prerenderedAt":188},["ShallowReactive",2],{"content-/lesson-layout-shared-typography":3,"all-pages-for-dir":165,"related-/lesson-layout-shared-typography":166,"og-image-/lesson-layout-shared-typography":187},{"id":4,"title":5,"body":6,"category":144,"concepts":145,"description":146,"extension":147,"meta":148,"navigation":149,"ogImage":145,"path":150,"project_name":151,"published":152,"publishedAt":153,"seo":154,"source":155,"stem":156,"tags":157,"todo":145,"unpublished":152,"updatedAt":145,"__hash__":164},"pages/2026-09/2026-09-11/lesson-layout-shared-typography.md","講座ページをミラーカラムに揃え、タイポグラフィとSVG拡大を共通モジュール化する",{"type":7,"value":8,"toc":133},"minimark",[9,14,18,21,24,27,30,33,36,39,42,45,48,51,54,57,60,63,66,69,72,75,78,81,84,87,90,93,96,99,102,105,108,111,130],[10,11,13],"h2",{"id":12},"同じ講座なのに片方だけ矢印キーで動く","同じ講座なのに、片方だけ矢印キーで動く",[15,16,17],"p",{},"税務講座の入門ページを開くと、左に見出しの列が並び、右に本文が流れる。矢印キーを叩けば隣へ移る。読み進めるあいだ、マウスに手を伸ばさなくて済む。",[15,19,20],{},"一方、書いたばかりの財務諸表Q&Aは1本ずつ独立したページになっていて、次を読むには一覧へ戻って選び直す。200問ぶんこれを繰り返す気にはならない。",[15,22,23],{},"そこで、Q&Aの記事をまるごと税務講座と同じミラーカラムに寄せることにした。頭にプロジェクト名、講義ノート、記事タイトルの階層が出て、矢印キーで隣へ動く。今どこを読んでいるのかが上に出る。",[15,25,26],{},"おそらくセクショントピックで全部まとめられるだろう、という見当もあった。Q&Aは問いごとに独立していて、税務講座のように章と節が積み上がっているわけではない。それでも節に相当する単位さえ決まれば、同じ器に流し込めるはずだ、と踏んだ。",[10,28,29],{"id":29},"お手本はどう組まれているか",[15,31,32],{},"指示そのものは「こういう感じのミラーカラムレイアウトに全部してくれませんか」の一言で済む。ただ、実装より先に、お手本のページがどう組まれているかを確認させた。見てもらったのは、ページの構成、データの形、キー操作が入っているかどうかの3点だ。",[15,34,35],{},"寄せる先の作りを読まないまま似た見た目を組み直すと、あとで本物と細部が食い違う。似ているが同じではないページが2種類できて、直すたびに両方を触ることになる。",[15,37,38],{},"確認が済んでから、7問ぶんの表示を切り替えさせた。「決算情報の入手と実務」の7問は、税大講本と同じミラーカラムで出るようになった。見当のほうも外れてはいなかった。",[10,40,41],{"id":41},"歯抜けのページが404を返す",[15,43,44],{},"Q&Aには200問ぶんの器がある。本文が入っているのはまだ一部で、残りは歯抜けだ。番号だけあるページを開くと404が返ってくる。",[15,46,47],{},"書いていないのだから404で正しい、とも言える。ところが、矢印キーで渡り歩く前提だと話が変わる。左右に動いた先が404なら、そこで移動が止まる。その先に何問あるのかも伝わらない。",[15,49,50],{},"「404にするんじゃなくて、簡易的なページでいい。TBDとか一言入れるだけでいい」と伝えた。返ってきたのは「執筆予定（TBD）」の1ページで、開いても404にはならなくなった。",[15,52,53],{},"見てから、条件をひとつ足した。ページを作ったうえでミラーカラムは維持してほしい。つまり、矢印キーで全部動きたい。",[15,55,56],{},"プレースホルダーもミラーカラムのまま表示され、← → キーで200問すべてを渡れるようになった。書いていない場所には「執筆予定」の札が立っているだけで、移動は止まらない。",[10,58,59],{"id":59},"すでにやっている気がする",[15,61,62],{},"次に、見た目そのものに手を入れた。対象は、コンテンツ領域の左右のマージン、本文の文字の大きさ、h1からh6までのフォント設定だ。これをコンポーネントにまとめて、どの講座にも同じものを当てたい。",[15,64,65],{},"講座はこれから増える。増えるたびに同じ指定を書き写していては、直すときにどれが正なのか分からなくなる。",[15,67,68],{},"伝えている途中で引っかかった。すでにやっているような気もする。もともと公開している講座のレイアウトを見てくれ、と付け足した。",[15,70,71],{},"勘は当たっていた。仕組みは前からあって、新しく書いたQ&A側がそこに乗っていなかった。まず「すでにあった仕組みと、ずれていた点」を並べてもらった。",[15,73,74],{},"そのうえで、本文のタイポグラフィを共通モジュールに切り出させ、税大講本とQ&Aの両方に当てた。揃ったのは、本文カラム760px中央、文字1.125rem、行間2、それにh1からh6までの設定だ。Q&Aの記事も、税大講本と同じ設定で描画される。",[15,76,77],{},"新規に作るのではなく、あるものに乗せ直す作業だった。自分の「気がする」を口に出しておいてよかった、と思う。",[10,79,80],{"id":80},"クリックしても拡大しない",[15,82,83],{},"共通の見た目を当てたQ&Aを見ていて、部品がひとつ抜けているのに気付いた。SVGをクリックしたときに拡大表示するモーダルが、こちらには付いていない。",[15,85,86],{},"拡大できなければ、図は本文の幅に収まったサイズのまま読むことになる。線と文字の細かい図では、そこが読めるかどうかの分かれ目になる。",[15,88,89],{},"これも共通化させた。ライトボックスをモジュールに寄せて、本文の見た目とあわせて全講座に一括で当てた。Q&AのSVGをクリックすると、税大講本と同じモーダルが開く。",[15,91,92],{},"抜けに気付けたのは、両方のページを行き来していたからだ。共通化は同じ設定を当てる作業だと思っていたが、実際には「あちらにあって、こちらにない部品」を探す作業でもあった。",[10,94,95],{"id":95},"テーブルの幅という例外",[15,97,98],{},"もうひとつ、先に言葉にしておきたい制約があった。コンテンツのmax-widthは税務講座にも設けてある。ただしテーブルだけはその外に出して、コンテンツ幅いっぱいに広げてよいことにしている。表をmax-widthに押し込むと幅がギチギチになって読みづらいからだ。",[15,100,101],{},"共通モジュールに寄せるとき、この例外ごと均されると困る。税大講本のほうを正確に見てほしい、と伝えた。",[15,103,104],{},"確認の結果、その挙動は共通モジュールでもそのまま残っていた。税大講本の幅の決まり方は変更前と同じで、テーブルだけがmax-widthの外に出る。",[15,106,107],{},"ついでに、直前に出したはずの指摘が、すでに直っていたことにも気付いた。再読み込みしたら反映されていた。直っていなかったのではなく、自分が古い画面を見ていた。",[10,109,110],{"id":110},"今日の整理",[112,113,114,118,121,124,127],"ul",{},[115,116,117],"li",{},"お手本があるなら、実装より先にお手本の組み方を読ませる。ページの構成、データの形、キー操作の有無を押さえてからでないと「同じにして」は始まらない",[115,119,120],{},"歯抜けを404で返すと、キー操作の導線がそこで切れる。中身がなくてもページは返す。TBDの一言で足りる",[115,122,123],{},"「すでにやっている気がする」は当たった。仕組みはあって、新しく足した側が乗っていなかった",[115,125,126],{},"共通化の前に、例外の制約を言葉にしておく。テーブルだけmax-widthの外、のような取り決めは黙っていると一緒に均される",[115,128,129],{},"直っていないように見えたら、まず再読み込み",[15,131,132],{},"ライトボックスは、自分が気付いたから戻ってきた。気付かないまま揃っていない部品が、まだどこかに残っている可能性は消えていない。次に講座を足すとき、同じ探し方をもう一度やることになる。",{"title":134,"searchDepth":135,"depth":135,"links":136},"",2,[137,138,139,140,141,142,143],{"id":12,"depth":135,"text":13},{"id":29,"depth":135,"text":29},{"id":41,"depth":135,"text":41},{"id":59,"depth":135,"text":59},{"id":80,"depth":135,"text":80},{"id":95,"depth":135,"text":95},{"id":110,"depth":135,"text":110},"dev",null,"財務諸表のQ&A記事を既存の税務講座と同じミラーカラムに寄せ、歯抜けのページをTBDのプレースホルダーにして矢印キーで200問を渡れるようにした記録。本文タイポグラフィとSVG拡大モーダルの共通モジュール化まで。","md",{},true,"/lesson-layout-shared-typography","eurekapu-nuxt4",false,"2026-09-11T00:00:00.000Z",{"title":5,"description":146},"make-diary","2026-09/2026-09-11/lesson-layout-shared-typography",[158,159,160,161,162,163],"Nuxt","レイアウト","コンポーネント設計","タイポグラフィ","ライトボックス","開発日記","1XjceKjk8-g1OxLjKrxBakuQII1-MbBgDMG5IrPocQc",[],[167,171,175,179,183],{"title":168,"path":169,"publishedAt":170},"形骸化した学習ゲートをやめ、pre-commitでCodexのコードレビューを自動化した","/codex-commit-review-gate","2026-09-14T00:00:00.000Z",{"title":172,"path":173,"publishedAt":174},"Nuxt Content の記事タイトルが本文に出ない問題を DocPage 側の自動分岐で解消した","/docpage-auto-title-display","2026-06-29T00:00:00.000Z",{"title":176,"path":177,"publishedAt":178},"簿記学習ノートの演習を自作問題集ベースに再設計し、クラウド会計風の帳簿アプリを実装した日","/bookkeeping-notes-practice-redesign","2026-06-11T00:00:00.000Z",{"title":180,"path":181,"publishedAt":182},"投資判断クイズを2カラムレイアウトへ移行：1ページ完成→コンポーネント化→横展開","/investment-quiz-2col-refactor","2026-05-14T00:00:00.000Z",{"title":184,"path":185,"publishedAt":186},"Vue.jsで帳票画像ナビゲーションUIを共通コンポーネント化する","/vue-image-navigation-panel","2026-01-22T00:00:00.000Z","https://log.eurekapu.com/og/blog/lesson-layout-shared-typography.png?v=2026-09-11T00%3A00%3A00.000Z&title=%E8%AC%9B%E5%BA%A7%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E3%83%9F%E3%83%A9%E3%83%BC%E3%82%AB%E3%83%A9%E3%83%A0%E3%81%AB%E6%8F%83%E3%81%88%E3%80%81%E3%82%BF%E3%82%A4%E3%83%9D%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%81%A8SVG%E6%8B%A1%E5%A4%A7%E3%82%92%E5%85%B1%E9%80%9A%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E5%8C%96%E3%81%99%E3%82%8B&author=Kei%20Komatsu&sig=45678bb13300a295",1789529463752]