https://a495ab83.blog-dyb.pages.dev/others/Recent content in 雑記 on 幻想亀の自叙伝Hugoja-jpSun, 04 Oct 2026 00:00:00 +0900https://a495ab83.blog-dyb.pages.dev/others/%E3%83%96%E3%83%A9%E3%82%B8%E3%83%AA%E3%82%A2%E3%83%B3%E6%9F%94%E8%A1%93%E3%83%AD%E3%82%B0/Tue, 01 Sep 2026 13:49:22 +0000https://a495ab83.blog-dyb.pages.dev/others/%E3%83%96%E3%83%A9%E3%82%B8%E3%83%AA%E3%82%A2%E3%83%B3%E6%9F%94%E8%A1%93%E3%83%AD%E3%82%B0/<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script> <div class="bjj-dashboard"> <div class="bjj-cards"> <div class="bjj-card"> <p>通算練習回数</p> <strong>10 回</strong> </div> <div class="bjj-card"> <p>今月の練習回数</p> <strong>2 回</strong> </div> <div class="bjj-card"> <p>現在の帯</p> <strong>白</strong> </div> </div> <div class="bjj-chart-wrap"> <h3 class="bjj-chart-title">月別練習回数</h3> <div class="bjj-canvas-box"> <canvas id="bjjChart" height="280"></canvas> </div> </div> <div class="bjj-table-wrap"> <h3 class="bjj-table-title">月別サマリー</h3> <table class="bjj-table"> <thead> <tr><th>年</th><th>月</th><th>合計練習回数</th><th>帯</th><th>ストライプ</th></tr> </thead> <tbody> <tr><td>2026</td><td>08</td><td>1</td><td>白</td><td>0</td></tr> <tr><td>2026</td><td>09</td><td>7</td><td>白</td><td>0</td></tr> <tr><td>2026</td><td>10</td><td>2</td><td>白</td><td>0</td></tr> </tbody> </table> </div> </div> <style> .bjj-dashboard { margin: 1rem 0 1.5rem; } .bjj-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; } .bjj-card { border-radius: 12px; padding: 0.85rem 0.95rem; background: #ffffff; border: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); } .bjj-card p { margin: 0 0 0.3rem; font-size: 0.82rem; color: #6b7280; } .bjj-card strong { font-size: 1.15rem; letter-spacing: 0.01em; } .bjj-chart-wrap { border-radius: 14px; padding: 0.8rem 0.8rem 0.2rem; border: 1px solid #e5e7eb; background: #ffffff; margin-bottom: 0.9rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); } .bjj-chart-title, .bjj-table-title { margin: 0 0 0.5rem; font-size: 0.98rem; } .bjj-canvas-box { position: relative; height: 280px; } .bjj-chart-wrap canvas { width: 100%; height: 100%; display: block; } .bjj-table-wrap { width: 100%; box-sizing: border-box; border-radius: 14px; padding: 0.8rem 0.9rem; border: 1px solid #e5e7eb; background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); overflow-x: auto; } .bjj-table { display: table !important; width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.9rem; } .bjj-table th, .bjj-table td { padding: 0.45rem 0.6rem; border-bottom: 1px solid #e5e7eb; text-align: center; } .bjj-table th { color: #6b7280; font-weight: 600; } @media (max-width: 720px) { .bjj-cards { grid-template-columns: 1fr; } .bjj-chart-wrap canvas { height: 100% !important; } .bjj-canvas-box { height: 240px; } } </style> <script> (function () { const monthLabels = ["2026/08","2026/09","2026/10","2026/11","2026/12","2027/01"]; const monthCounts = [1,7,2,0,0,0]; const bjjEl = document.getElementById("bjjChart"); if (!bjjEl || typeof Chart === "undefined") return; const isMobile = window.innerWidth <= 720; const axisTitleSize = isMobile ? 10 : 12; const tickSize = isMobile ? 9 : 11; if (window.__bjjChartInstance) { window.__bjjChartInstance.destroy(); } window.__bjjChartInstance = new Chart(bjjEl, { type: "bar", data: { labels: monthLabels, datasets: [ { label: "練習回数", data: monthCounts, backgroundColor: "rgba(15, 106, 179, 0.65)", borderColor: "#0f6ab3", borderWidth: 1, maxBarThickness: 48 } ] }, options: { responsive: true, maintainAspectRatio: false, animation: false, plugins: { legend: { display: false } }, scales: { x: { title: { display: !isMobile, text: "年/月", color: "#6b7280", font: { size: axisTitleSize, weight: "bold" } }, grid: { display: false }, ticks: { font: { size: tickSize }, maxRotation: 0 } }, y: { beginAtZero: true, title: { display: !isMobile, text: "練習回数", color: "#0f6ab3", font: { size: axisTitleSize, weight: "bold" } }, ticks: { font: { size: tickSize }, precision: 0 }, grid: { color: "rgba(15, 23, 42, 0.08)" } } } } }); })(); </script>