style: 仕訳例の表見出しを科目に変更、モバイルでカード余白と仕訳表の折り返しを改善

Made-with: Cursor
This commit is contained in:
posimai 2026-04-18 23:45:57 +09:00
parent e96efb776e
commit ffedf3cff2
2 changed files with 17 additions and 8 deletions

View File

@ -169,13 +169,13 @@ header{display:flex;align-items:center;justify-content:space-between;padding:0 1
.formula-label{font-size:10px;color:var(--text3);font-family:'Geist',sans-serif;font-weight:600;letter-spacing:.07em;text-transform:uppercase;margin-bottom:6px}
.journal-wrap{overflow-x:auto;margin:12px 0}
.journal-table{width:100%;border-collapse:collapse;font-size:12px;min-width:320px}
.journal-table th{padding:5px 10px;text-align:left;font-size:10px;font-weight:600;color:var(--text3);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--border)}
.journal-table td{padding:8px 10px;border-bottom:1px solid var(--border2);color:var(--text2)}
.journal-table{width:100%;border-collapse:collapse;font-size:12px;min-width:280px;table-layout:fixed}
.journal-table th{padding:5px 8px;text-align:left;font-size:10px;font-weight:600;color:var(--text3);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--border)}
.journal-table td{padding:8px 8px;border-bottom:1px solid var(--border2);color:var(--text2);word-break:keep-all}
.journal-table tr:last-child td{border-bottom:none}
.dr{color:var(--text);font-weight:500}
.cr{color:var(--text2);padding-left:18px}
.amount{font-family:'JetBrains Mono',monospace;text-align:right;color:var(--text)}
.cr{color:var(--text2);padding-left:12px}
.amount{font-family:'JetBrains Mono',monospace;text-align:right;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
/* Keypoints */
.key-list{list-style:none;display:flex;flex-direction:column;gap:8px}
@ -228,8 +228,17 @@ header{display:flex;align-items:center;justify-content:space-between;padding:0 1
#sidebar{position:fixed;left:0;top:calc(52px + var(--safe-top));bottom:var(--safe-bottom);z-index:50;transform:translateX(-100%);transition:transform .25s cubic-bezier(.2,.9,.2,1);width:260px}
#sidebar.open{transform:translateX(0)}
.sidebar-toggle{display:flex}
#main{padding:16px}
#main{padding:12px}
.home-hero{padding:28px 0 20px}
.card{padding:16px;margin-bottom:12px}
.unit-header{margin-bottom:14px}
.unit-nav{padding-bottom:20px}
.home-cats{grid-template-columns:1fr}
.journal-table{min-width:0;font-size:11px}
.journal-table th,.journal-table td{padding:6px 4px}
.journal-table th{font-size:9px;padding:5px 4px}
.journal-table .cr{padding-left:6px}
.journal-table .amount{font-size:10px}
}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
@ -537,7 +546,7 @@ header{display:flex;align-items:center;justify-content:space-between;padding:0 1
const CATEGORIES = [
{ id:'commercial', label:'商業簿記', icon:'landmark', units:[
{ id:'c01', num:'C01', title:'仕訳の基礎復習', freq:'high', diff:1,
concept:`<p><strong>仕訳</strong>とは取引を借方(左)と貸方(右)に分けて記録する作業です。<span class="hl">借方合計 = 貸方合計</span> が常に成立します。</p><div class="viz-taccount"><div class="tac-header">T 勘 定</div><div class="tac-body"><div class="tac-side tac-dr"><div class="tac-side-label">借方(左側)</div><div class="tac-side-desc">資産の増加<br>負債の減少<br>純資産の減少<br>費用の発生</div></div><div class="tac-divider"></div><div class="tac-side tac-cr"><div class="tac-side-label">貸方(右側)</div><div class="tac-side-desc">資産の減少<br>負債の増加<br>純資産の増加<br>収益の発生</div></div></div></div><p>勘定科目は5グループに分類されます。</p><div class="viz-groups"><div class="vg-card vg-asset"><div class="vg-name">資産</div><div class="vg-rule">増加→借方<br>減少→貸方</div></div><div class="vg-card vg-liability"><div class="vg-name">負債</div><div class="vg-rule">増加→貸方<br>減少→借方</div></div><div class="vg-card vg-equity"><div class="vg-name">純資産</div><div class="vg-rule">増加→貸方<br>減少→借方</div></div><div class="vg-card vg-revenue"><div class="vg-name">収益</div><div class="vg-rule">発生→貸方<br>消滅→借方</div></div><div class="vg-card vg-expense"><div class="vg-name">費用</div><div class="vg-rule">発生→借方<br>消滅→貸方</div></div></div><p>商品¥100,000を掛けで仕入れた</p><div class="journal-wrap"><table class="journal-table"><tr><th>借方</th><th>金額</th><th>貸方</th><th>金額</th></tr><tr><td class="dr">仕入</td><td class="amount">100,000</td><td class="cr">買掛金</td><td class="amount">100,000</td></tr></table></div>`,
concept:`<p><strong>仕訳</strong>とは取引を借方(左)と貸方(右)に分けて記録する作業です。<span class="hl">借方合計 = 貸方合計</span> が常に成立します。</p><div class="viz-taccount"><div class="tac-header">T 勘 定</div><div class="tac-body"><div class="tac-side tac-dr"><div class="tac-side-label">借方(左側)</div><div class="tac-side-desc">資産の増加<br>負債の減少<br>純資産の減少<br>費用の発生</div></div><div class="tac-divider"></div><div class="tac-side tac-cr"><div class="tac-side-label">貸方(右側)</div><div class="tac-side-desc">資産の減少<br>負債の増加<br>純資産の増加<br>収益の発生</div></div></div></div><p>勘定科目は5グループに分類されます。</p><div class="viz-groups"><div class="vg-card vg-asset"><div class="vg-name">資産</div><div class="vg-rule">増加→借方<br>減少→貸方</div></div><div class="vg-card vg-liability"><div class="vg-name">負債</div><div class="vg-rule">増加→貸方<br>減少→借方</div></div><div class="vg-card vg-equity"><div class="vg-name">純資産</div><div class="vg-rule">増加→貸方<br>減少→借方</div></div><div class="vg-card vg-revenue"><div class="vg-name">収益</div><div class="vg-rule">発生→貸方<br>消滅→借方</div></div><div class="vg-card vg-expense"><div class="vg-name">費用</div><div class="vg-rule">発生→借方<br>消滅→貸方</div></div></div><p>商品¥100,000を掛けで仕入れた</p><div class="journal-wrap"><table class="journal-table"><tr><th>科目</th><th>金額</th><th>科目</th><th>金額</th></tr><tr><td class="dr">仕入</td><td class="amount">100,000</td><td class="cr">買掛金</td><td class="amount">100,000</td></tr></table></div>`,
examtips:['第1問の仕訳問題は5問×4点<strong>20点</strong>。確実に取りに行く単元。','勘定科目名は<strong>正式名称</strong>で書くこと(例:「売掛」ではなく「売掛金」)。略称は不正解。','複合仕訳(借方または貸方が複数行)も頻出。合計金額が一致するか必ず確認。'],
keypoints:['資産の増加 → 借方、減少 → 貸方','負債・純資産の増加 → 貸方、減少 → 借方','費用の発生 → 借方、収益の発生 → 貸方','<strong>貸借平均の原理</strong>:借方合計と貸方合計は必ず一致する'],
quiz:[

2
sw.js
View File

@ -1,5 +1,5 @@
// posimai-boki SW — stale-while-revalidate + skipWaiting
const CACHE = 'posimai-boki-v6';
const CACHE = 'posimai-boki-v7';
const STATIC = ['/', '/index.html', '/manifest.json', '/logo.png'];
self.addEventListener('install', e => {