mai
/
posimai-boki
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: mai:e96efb776e89212f6b598c498ddfdcc0c38eb6b0
Branches Tags
mai:main
...
compare: mai:9812dc601cdf6c5ad5ced85402bd2b52fa68188b
Branches Tags
mai:main

2 Commits
e96efb776e ... 9812dc601c

Author SHA1 Message Date
posimai 9812dc601c fix: フレックス内スクロール復元（#main に min-height:0、#app をビューポート高に固定） 
Made-with: Cursor
 2026-04-18 23:46:30 +09:00
posimai ffedf3cff2 style: 仕訳例の表見出しを科目に変更、モバイルでカード余白と仕訳表の折り返しを改善 
Made-with: Cursor
 2026-04-18 23:45:57 +09:00
2 changed files with 22 additions and 13 deletions
Show Stats Expand all files Collapse all files

33
index.html
View File

@ -70,7 +70,7 @@
}
html{height:100%}
html,body{background:var(--bg);color:var(--text);font-family:'Geist',sans-serif;overflow:hidden}
body{min-height:100%;min-height:-webkit-fill-available}
body{min-height:100%;min-height:-webkit-fill-available;height:100%}
.aurora{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.aurora-blob{position:absolute;border-radius:50%;will-change:transform}
@ -82,7 +82,7 @@ body{min-height:100%;min-height:-webkit-fill-available}
@keyframes ab3{from{transform:translate(0,0) scale(1)}to{transform:translate(-50px,60px) scale(0.93)}}
[data-theme="light"] .aurora-blob{opacity:0.35}
#app{position:relative;z-index:1;box-sizing:border-box;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}
#app{position:relative;z-index:1;box-sizing:border-box;height:100vh;height:100dvh;max-height:100dvh;display:flex;flex-direction:column;min-height:0;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}
/* Header */
header{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:52px;border-bottom:1px solid var(--border);background:rgba(12,18,33,0.75);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);flex-shrink:0}
@ -95,10 +95,10 @@ header{display:flex;align-items:center;justify-content:space-between;padding:0 1
.icon-btn:hover{color:var(--accent);border-color:var(--accent-border)}
/* Body */
#body{flex:1;display:flex;overflow:hidden}
#body{flex:1;min-height:0;display:flex;overflow:hidden}
/* Sidebar */
#sidebar{width:240px;flex-shrink:0;border-right:1px solid var(--border);overflow-y:auto;background:rgba(12,18,33,0.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;flex-direction:column}
#sidebar{width:240px;flex-shrink:0;min-height:0;border-right:1px solid var(--border);overflow-y:auto;-webkit-overflow-scrolling:touch;background:rgba(12,18,33,0.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;flex-direction:column}
[data-theme="light"] #sidebar{background:rgba(239,246,255,0.6)}
.sidebar-search{padding:10px 12px;border-bottom:1px solid var(--border)}
.search-wrap{position:relative}
@ -123,7 +123,7 @@ header{display:flex;align-items:center;justify-content:space-between;padding:0 1
.sidebar-item.done .item-check{opacity:1}
/* Main */
#main{flex:1;overflow-y:auto;padding:24px 28px}
#main{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:24px 28px;touch-action:pan-y}
/* Home */
.home-hero{text-align:center;padding:36px 0 28px;max-width:500px;margin:0 auto}
@ -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-v8';
const STATIC = ['/', '/index.html', '/manifest.json', '/logo.png'];
self.addEventListener('install', e => {