Spaces:

tomo2chin2
/

HTML2PDF_API

Paused

App Files Files Community

tomo2chin2 commited on Jul 5, 2025

Commit

d28ead3

verified ·

1 Parent(s): 9cb7667

Update test.html: Optimize layout for A4 2-page PDF generation

Browse files

Files changed (1) hide show

test.html +320 -0

test.html ADDED Viewed

	@@ -0,0 +1,320 @@

+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ビタミンDと歯周病の関係性</title>
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
+    <!-- FontAwesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <style>
+        :root {
+            --bg-color: #fdfdfc;
+            --text-color: #343a40;
+            --primary-color: #005f73; /* Deep teal */
+            --secondary-color: #0a9396; /* Cyan-teal */
+            --accent-color: #ee9b00; /* Orange */
+            --border-color: #dee2e6; /* Light gray */
+            --card-bg: #ffffff;
+        }
+        body {
+            font-family: 'Noto Sans JP', sans-serif;
+            line-height: 1.6;
+            color: var(--text-color);
+            background-color: var(--bg-color);
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            min-height: 100vh;
+            box-sizing: border-box;
+        }
+        .container {
+            width: 210mm; /* A4 width */
+            background-color: var(--card-bg);
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+            display: flex;
+            flex-direction: column;
+        }
+        .page {
+            width: 210mm; /* A4 width */
+            height: 297mm; /* A4 height */
+            padding: 15mm; /* This will be 0 in print */
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            gap: 12px; /* Reduced spacing between cards */
+        }
+        /* Header Styles */
+        .header {
+            text-align: center;
+            margin-bottom: 15px;
+            padding-bottom: 8px;
+            border-bottom: 2px solid var(--primary-color);
+        }
+        .header .main-title {
+            font-family: 'Noto Serif JP', serif;
+            font-size: 2.0em;
+            color: var(--primary-color);
+            margin-bottom: 5px;
+            line-height: 1.2;
+        }
+        .header .sub-info {
+            font-size: 0.9em;
+            color: #6c757d;
+        }
+        .header .sub-info span {
+            margin: 0 8px;
+        }
+        /* Card Styles */
+        .card {
+            background-color: var(--card-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            padding: 15px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+            flex-grow: 1; /* Allow cards to grow and fill space */
+            display: flex;
+            flex-direction: column;
+        }
+        .card-title {
+            font-family: 'Noto Serif JP', serif;
+            font-size: 1.2em;
+            color: var(--primary-color);
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+            border-bottom: 2px solid var(--secondary-color);
+            padding-bottom: 5px;
+        }
+        .card-title i {
+            color: var(--accent-color);
+            margin-right: 10px;
+            font-size: 1.2em;
+        }
+        .card-content {
+            font-size: 0.85em;
+            color: var(--text-color);
+            flex-grow: 1;
+        }
+        .card-content ul {
+            list-style: none;
+            padding-left: 0;
+            margin-top: 10px;
+        }
+        .card-content ul li {
+            position: relative;
+            padding-left: 18px;
+            margin-bottom: 6px;
+        }
+        .card-content ul li::before {
+            content: "\f00c"; /* FontAwesome checkmark */
+            font-family: "Font Awesome 6 Free";
+            font-weight: 900;
+            color: var(--secondary-color);
+            position: absolute;
+            left: 0;
+            top: 0;
+        }
+        /* Specific section styles */
+        .action-columns {
+            display: flex;
+            gap: 15px;
+            flex-grow: 1;
+        }
+        .action-columns .column {
+            flex: 1;
+            background-color: #f9f9f9;
+            border: 1px dashed var(--border-color);
+            border-radius: 6px;
+            padding: 12px;
+            display: flex;
+            flex-direction: column;
+        }
+        .action-columns .column h4 {
+            font-family: 'Noto Serif JP', serif;
+            color: var(--secondary-color);
+            margin-top: 0;
+            margin-bottom: 8px;
+            font-size: 1.0em;
+            display: flex;
+            align-items: center;
+        }
+        .action-columns .column h4 i {
+            margin-right: 8px;
+            color: var(--accent-color);
+        }
+        .action-columns .column p {
+            font-size: 0.85em;
+            margin-bottom: 6px;
+        }
+        /* Page 2 specific adjustments if needed */
+        .page:last-child {
+            margin-top: 15px; /* Visual separation if displayed consecutively on screen */
+        }
+        /* Print Specific Styles */
+        @media print {
+            @page {
+                size: A4;
+                margin: 15mm;
+            }
+            body {
+                background-color: white;
+                -webkit-print-color-adjust: exact; /* For background colors and shadows */
+                print-color-adjust: exact;
+            }
+            .container {
+                box-shadow: none;
+                width: auto; /* Let content define width within A4 margins */
+            }
+            .page {
+                width: 100%;
+                height: 267mm; /* A4 height minus top and bottom margins (297mm - 30mm) */
+                padding: 0; /* Margins handled by @page */
+                page-break-after: always; /* Force page break after each .page */
+                border: none; /* No border in print */
+                box-shadow: none; /* No shadow in print */
+                gap: 8px; /* Further reduce gap in print */
+            }
+            .page:last-child {
+                page-break-after: avoid; /* No page break after the last page */
+            }
+            .card {
+                box-shadow: none; /* Remove shadows for print */
+                border: 1px solid #ccc; /* Lighter border for print */
+            }
+            /* Crucial for maintaining 2-column layout on print */
+            .action-columns {
+                display: flex !important;
+                flex-direction: row !important; /* Ensure horizontal layout */
+                gap: 15px !important;
+                width: 100% !important;
+                box-sizing: border-box;
+            }
+            .action-columns .column {
+                flex: 1 !important;
+                width: 50% !important; /* Explicitly set width */
+                max-width: 50% !important; /* Ensure it doesn't expand too much */
+                box-sizing: border-box;
+                padding: 8px; /* Adjust padding for print if needed */
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- Page 1 -->
+        <div class="page">
+            <header class="header">
+                <h1 class="main-title">ビタミンDは歯周病にどう影響する？</h1>
+                <div class="sub-info">
+                    <span>著者: Emily Ming‐Chieh Lu</span>
+                    <span>|</span>
+                    <span>Journal of Periodontal Research</span>
+                    <span>|</span>
+                    <span>2023年</span>
+                </div>
+            </header>
+            <div class="card">
+                <h2 class="card-title"><i class="fa-solid fa-question-circle"></i> [WHY?] この研究、なぜ重要？ (背景と目的)</h2>
+                <div class="card-content">
+                    <p>ビタミンDは、骨の健康維持だけでなく、免疫機能の調整や強力な抗炎症作用を持つことが知られています。近年、血中ビタミンD濃度が低いと、歯を支える組織が破壊される慢性炎症性疾患である歯周炎の重症度が増すというエビデンスが示されています。</p>
+                    <p>本研究は、ビタミンDが歯周病の発症に影響を与える生物学的メカニズムを検証し、これまでの臨床研究の知見をまとめることを目的としています。</p>
+                </div>
+            </div>
+            <div class="card">
+                <h2 class="card-title"><i class="fa-solid fa-lightbulb"></i> [WHAT?] 結論は？ (研究の結論)</h2>
+                <div class="card-content">
+                    <p>ビタミンDは、その強力な抗菌、抗炎症、宿主調節作用を通じて、歯周病の病態形成に深く関与している可能性が高いです。十分なビタミンDを維持することが、歯周組織の健康をサポートする上で非常に重要であると強調されています。</p>
+                </div>
+            </div>
+            <div class="card">
+                <h2 class="card-title"><i class="fa-solid fa-tooth"></i> [ACTION PLAN] 明日の臨床と患者さんへ</h2>
+                <div class="action-columns">
+                    <div class="column">
+                        <h4><i class="fa-solid fa-user-doctor"></i> For Clinicians (術者向けアクション)</h4>
+                        <ul>
+                            <li>重度または難治性の歯周炎患者に対し、血中ビタミンDレベルの評価を検討する。</li>
+                            <li>患者に、食事、サプリメント、適度な日光浴を通じてビタミンDの十分な摂取を推奨する。</li>
+                            <li>ビタミンDが歯周病だけでなく、全身の炎症や骨代謝にも影響を与えることを患者に説明し、包括的な健康管理の重要性を伝える。</li>
+                        </ul>
+                    </div>
+                    <div class="column">
+                        <h4><i class="fa-solid fa-notes-medical"></i> For Patients (患者さんへの説明例)</h4>
+                        <p>「ビタミンDは、歯ぐきの健康を守るためにとても大切な栄養素です。骨を丈夫にするだけでなく、体の炎症を抑えたり、細菌と戦う力（免疫力）を高めたりする働きがあります。」</p>
+                        <p>「もしビタミンDが不足すると、歯周病が進行しやすくなったり、歯ぐきの炎症がひどくなったりする可能性があります。お食事やサプリメント、適度な日光浴で、ビタミンDを十分に摂ることを心がけましょう。」</p>
+                        <p>「ビタミンDをしっかり摂ることで、歯周病の治療効果を高め、全身の健康にも繋がりますよ。」</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Page 2 -->
+        <div class="page">
+            <div class="card">
+                <h2 class="card-title"><i class="fa-solid fa-flask"></i> [STUDY DESIGN] どんな方法で？ (研究方法)</h2>
+                <div class="card-content">
+                    <p>本論文は、これまでの複数の研究結果を統合し、ビタミンDと歯周病の関連性について議論するレビュー論文です。</p>
+                    <ul>
+                        <li>**基礎研究の知見:** 活性型ビタミンD生成酵素（1α-水酸化酵素）を欠損させた実験的歯周炎モデルでは、歯槽骨吸収と歯肉炎症が増悪することが示されている。また、ビタミンD受容体（VDR）遺伝子多型が歯周炎の重症度と関連することも報告されている。</li>
+                        <li>**臨床研究の知見:** 複数の臨床研究が、血中25OHD3（ビタミンDの貯蔵型）濃度と歯周病の炎症との間に逆相関（ビタミンDが低いほど炎症が強い）があることを一貫して示している。</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="card">
+                <h2 class="card-title"><i class="fa-solid fa-chart-bar"></i> [RESULTS] 主な結果は？ (主要データ)</h2>
+                <div class="card-content">
+                    <ul>
+                        <li>低血清ビタミンD濃度は、歯周炎の重症度増加と関連している。</li>
+                        <li>ビタミンDの生物学的機能は、その強力な抗菌、抗炎症、宿主調節特性によって媒介される。</li>
+                        <li>実験モデルにおいて、活性型ビタミンDの生成に関わる酵素が欠損すると、歯槽骨吸収と歯肉炎症が増大した。</li>
+                        <li>ビタミンD受容体（VDR）遺伝子多型も、歯周炎の重症度増加と関連が見られる。</li>
+                        <li>臨床研究では、血中25OHD3濃度と歯周病の炎症との間に一貫して逆相関が示されている。</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="card">
+                <h2 class="card-title"><i class="fa-solid fa-comments"></i> [DISCUSSION] 考察のポイント (議論)</h2>
+                <div class="card-content">
+                    <p>ビタミンDが歯周病の病態に与える影響は生物学的に妥当性があると考えられます。しかし、デザインの優れた長期的な研究が不足しているため、ビタミンDの状態が歯周病の進行や歯の喪失に直接与える影響については、まだ十分な裏付けがありません。</p>
+                    <p>今回のレビューは、歯周組織の健康を維持するためには、ビタミンDを十分に摂ることが重要であることを改めて強調しています。</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>