院内勉強会資料

要素として構成 5. PDF化時の90%縮小を考慮したレイアウト設計 6. **1ページ目：最大45行、2ページ目：最大40行を厳守** ## 必須HTML構造 ```html 院内勉強会資料

``` ## PDF最適化版CSS（このまま使用） ```css /* Webフォントのプリロード最適化 */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap'); /* リセット */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* 基本設定 */ html { font-size: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { width: 210mm; margin: 0 auto; font-family: 'Noto Sans JP', 'IPAGothic', 'メイリオ', 'Meiryo', sans-serif; font-weight: 300; font-size: 10pt; line-height: 1.6; color: #333; background: #fff; } /* ページ設定（PDF化時のマージンとスケールを考慮） */ .page { width: 210mm; height: 297mm; /* PDFマージン15mm + scale 0.9を考慮したパディング調整 */ padding: 10mm 15mm 15mm 15mm; page-break-after: always; page-break-inside: avoid; position: relative; background: white; overflow: hidden; } .page:last-child { page-break-after: auto; } /* タイポグラフィ（スケール0.9を考慮して調整） */ h1 { font-size: 18pt; font-weight: 700; color: #2c5aa0; margin-bottom: 2mm; line-height: 1.2; } h2 { font-size: 14pt; font-weight: 700; color: #333; margin: 6mm 0 3mm 0; padding-bottom: 1.5mm; border-bottom: 2px solid #e0e0e0; } h3 { font-size: 12pt; font-weight: 700; margin: 4mm 0 2mm 0; color: #444; } p { font-size: 10pt; margin-bottom: 2.5mm; text-align: justify; } ul { margin: 2mm 0 2mm 4mm; padding-left: 4mm; } li { font-size: 9.5pt; margin-bottom: 1.5mm; line-height: 1.5; } /* メタ情報 */ .meta-info { font-size: 9pt; color: #666; margin-bottom: 3mm; } /* ボックススタイル（Playwrightレンダリング最適化） */ .info-box { background-color: #f0f4f8; border-left: 4px solid #2c5aa0; padding: 3mm 4mm; margin: 4mm 0; border-radius: 0 3px 3px 0; box-sizing: border-box; } .doctor-box { background-color: #e8f1fd; border-left: 5px solid #2c5aa0; padding: 4mm; margin: 5mm 0; border-radius: 0 3px 3px 0; box-sizing: border-box; } .doctor-box h3 { color: #2c5aa0; } .hygienist-box { background-color: #e8f5e9; border-left: 5px solid #5cb85c; padding: 4mm; margin: 5mm 0; border-radius: 0 3px 3px 0; box-sizing: border-box; } .hygienist-box h3 { color: #5cb85c; } .staff-box { background-color: #fff8e8; border-left: 5px solid #f0ad4e; padding: 4mm; margin: 5mm 0; border-radius: 0 3px 3px 0; box-sizing: border-box; } .staff-box h3 { color: #f0ad4e; } .highlight-box { background-color: #fffaf0; border: 2px solid #f0ad4e; padding: 4mm; margin: 5mm 0; border-radius: 5px; box-sizing: border-box; } /* 参考資料（最小限の表示） */ .reference-note { font-size: 8pt; color: #999; text-align: right; margin-top: 5mm; border-top: 1px solid #e0e0e0; padding-top: 2mm; } /* テーブル */ table { width: 100%; border-collapse: collapse; margin: 4mm 0; font-size: 9pt; } th, td { padding: 1.5mm 2.5mm; border: 1px solid #ddd; text-align: left; } th { background-color: #f5f5f5; font-weight: 400; } /* 印刷専用設定（Playwright print mediaエミュレーション対応） */ @media print { * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } body { margin: 0; padding: 0; width: 100%; } .page { margin: 0; box-shadow: none; page-break-after: always; width: 100%; height: 297mm; padding: 10mm 15mm 15mm 15mm; } .page:last-child { page-break-after: auto; } /* 背景色を確実に印刷 */ .info-box, .doctor-box, .hygienist-box, .staff-box, .highlight-box, th { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } } /* 画面表示用 */ @media screen { body { background: #e0e0e0; padding: 10mm 0; } .page { margin: 0 auto 10mm auto; box-shadow: 0 0 10px rgba(0,0,0,0.1); } } /* Webkit固有の印刷最適化 */ @media print and (-webkit-min-device-pixel-ratio:0) { .page { -webkit-transform: scale(1); transform: scale(1); } } ``` ## YAMLデータの要約・配分戦略 ### 情報の優先度と配分 1. **タイトル・メタ情報**：最小限に圧縮（4行） 2. **導入・目標**：エッセンスのみ（8行） 3. **メインコンテンツ**：重要度で選別・要約 4. **実践内容**：具体的手順を簡潔に 5. **まとめ・宿題**：必須項目のみ ### 要約の基本ルール - 長い文章 → 要点を1文に凝縮（50-80文字） - 詳細な説明 → キーワードと結論のみ - 多数の項目 → 最重要3-4項目に集約 - 理論的内容 → 実践に必要な部分のみ ## 厳格なページ構成と行数管理 ### 1ページ目（45行以内） 1. **ヘッダー部**（4行） - タイトル（h1）：最大30文字に要約（2行） - カテゴリ表示：`[metadata.category]`（1行） - 空行（1行） 2. **導入文**（3行） - content.summaryを60文字に要約 - 「本日は〜について学びます」形式 3. **学習目標**（5行） - info-box使用 - 「本日の目標」＋最重要2項目（各20-30文字） 4. **基礎知識セクション**（33行） - 最重要2セクションを選択 - 各セクション構成： - h2見出し（2行） - 要約文（2-3行、50-80文字） - 重要ポイント箇条書き（3項目×2行＝6行） - セクション間空行（1行） ### 2ページ目（40行以内） 1. **実践セクション**（20行） - highlight-box使用 - h3「実践ポイント」（2行） - 手順を5ステップ以内に要約（各30文字） - 具体的な動作を優先 2. **まとめ**（10行） - h3「本日のまとめ」（2行） - 重要ポイント2つ（各40文字） - 締めの言葉（1文、50文字） 3. **宿題**（6行） - staff-box使用 - 「次回まで」＋2項目（各20文字） 4. **参考資料**（4行） - reference-noteクラス - 空行込みで最下部配置 ## コンテンツ要約の具体的手法 ### セクション処理 ``` 元のセクション（500文字） ↓ 1. キーワード抽出（5-6個） 2. 主張・結論を1文に（50文字） 3. 実践ポイントを3つ選択（各30文字） ``` ### 箇条書き圧縮 ``` 元の箇条書き（10項目） ↓ 1. 重要度でランク付け 2. TOP3を選択 3. 各項目を20-30文字に要約 ``` ### 実習内容の要約 ``` 詳細な手順説明 ↓ 1. 主要ステップを5つ以内に 2. 各ステップを動詞で開始 3. 「〜する」形式で20-30文字 ``` ## 行数カウント方法 - h1, h2, h3：見出し行＋下マージン - 段落：文字数÷25（1行25文字）＋下マージン - 箇条書き：項目数×1.5行 - ボックス：内容行数＋パディング2行 ## 最終確認事項 1. 1ページ目：45行以内か 2. 2ページ目：40行以内か 3. 重要情報が適切に要約されているか 4. 実践的内容が含まれているか 5. 全体で2ページに収まっているか **必ず最初から行数を計算し、範囲内に収まるよう情報を要約・配分すること。**