A4対応・動的書取り練習帳ジェネレーター

書取り練習帳設定フォーム

:root{--font-selected:'Klee One' , serif;--grid-border-style:dashed}body{font-family:'Helvetica Neue',Arial,sans-serif;margin:0;padding:0;background-color:#f4f6f9;color:#333}.control-panel{max-width:800px;margin:30px auto;padding:25px;background-color:#fff;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.08)}.control-panel h2{margin-top:0;color:#2c3e50;border-bottom:2px solid #3498db;padding-bottom:8px;font-size:16pt}.form-group{margin-bottom:18px}.form-group label{display:block;margin-bottom:6px;font-weight:bold;color:#4a5568}input[type="text"]{width:100%;padding:12px;font-size:11pt;border:1px solid #cbd5e0;border-radius:4px;box-sizing:border-box}select{width:100%;padding:12px;font-size:11pt;border:1px solid #cbd5e0;border-radius:4px;background-color:#fff}.btn-submit{background-color:#3498db;color:#fff;padding:12px 24px;border:none;border-radius:4px;font-size:11pt;font-weight:bold;cursor:pointer;transition:background-color .2s}.btn-submit:hover{background-color:#2980b9}.btn-print{background-color:#2ecc71;color:#fff;padding:12px 24px;border:none;border-radius:4px;font-size:11pt;font-weight:bold;cursor:pointer;margin-left:10px}.btn-print:hover{background-color:#27ae60}.preview-container{display:flex;flex-direction:column;align-items:center;margin-bottom:50px}.a4-page{width:210mm;height:297mm;padding:20mm 15mm;background-color:#fff;box-shadow:0 4px 15px rgba(0,0,0,.1);margin-bottom:20px;box-sizing:border-box;position:relative}.practice-row{display:flex;margin-bottom:12mm}.char-box{width:26mm;height:26mm;border:2px solid #1a1a1a;margin-right:-2px;position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background:#fff}.char-box::before{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:1px var(--grid-border-style) #a0aec0;pointer-events:none}.char-box::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px var(--grid-border-style) #a0aec0;pointer-events:none}.char-text{font-family: var(--font-selected);font-size:19mm;line-height:1;z-index:5;user-select:none}.model-text{color:#1a1a1a}.trace-text{color:#e2e8f0}@media print{body{background-color:#fff;color:#000}.control-panel{display:none}.preview-container{margin:0;display:block}.a4-page{width:210mm;height:297mm;padding:20mm 15mm;margin:0;box-shadow:none;page-break-after:always;page-break-inside:avoid}@page { size: A4 portrait; margin: 0; }}:root{--grid-border-style:dashed}.char-box::before{border-left:1px var(--grid-border-style) #a0aec0}.char-box::after{border-top:1px var(--grid-border-style) #a0aec0}

書取り練習帳 設定フォーム

書取り練習帳設定フォーム