tomo2chin2/HTML2PDF_API
0
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>ビタミンDと歯周病の関係性</title>
7 <!-- Google Fonts -->
8 <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">
9 <!-- FontAwesome -->
10 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
11 <style>
12 :root {
13 --bg-color: #fdfdfc;
14 --text-color: #343a40;
15 --primary-color: #005f73; /* Deep teal */
16 --secondary-color: #0a9396; /* Cyan-teal */
17 --accent-color: #ee9b00; /* Orange */
18 --border-color: #dee2e6; /* Light gray */
19 --card-bg: #ffffff;
20 }
21
22 body {
23 font-family: 'Noto Sans JP', sans-serif;
24 line-height: 1.6;
25 color: var(--text-color);
26 background-color: var(--bg-color);
27 margin: 0;
28 padding: 0;
29 display: flex;
30 justify-content: center;
31 align-items: flex-start;
32 min-height: 100vh;
33 box-sizing: border-box;
34 }
35
36 .container {
37 width: 210mm; /* A4 width */
38 background-color: var(--card-bg);
39 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
40 display: flex;
41 flex-direction: column;
42 }
43
44 .page {
45 width: 210mm; /* A4 width */
46 height: 297mm; /* A4 height */
47 padding: 15mm; /* This will be 0 in print */
48 box-sizing: border-box;
49 display: flex;
50 flex-direction: column;
51 gap: 12px; /* Reduced spacing between cards */
52 }
53
54 /* Header Styles */
55 .header {
56 text-align: center;
57 margin-bottom: 15px;
58 padding-bottom: 8px;
59 border-bottom: 2px solid var(--primary-color);
60 }
61
62 .header .main-title {
63 font-family: 'Noto Serif JP', serif;
64 font-size: 2.0em;
65 color: var(--primary-color);
66 margin-bottom: 5px;
67 line-height: 1.2;
68 }
69
70 .header .sub-info {
71 font-size: 0.9em;
72 color: #6c757d;
73 }
74
75 .header .sub-info span {
76 margin: 0 8px;
77 }
78
79 /* Card Styles */
80 .card {
81 background-color: var(--card-bg);
82 border: 1px solid var(--border-color);
83 border-radius: 8px;
84 padding: 15px;
85 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
86 flex-grow: 1; /* Allow cards to grow and fill space */
87 display: flex;
88 flex-direction: column;
89 }
90
91 .card-title {
92 font-family: 'Noto Serif JP', serif;
93 font-size: 1.2em;
94 color: var(--primary-color);
95 margin-bottom: 8px;
96 display: flex;
97 align-items: center;
98 border-bottom: 2px solid var(--secondary-color);
99 padding-bottom: 5px;
100 }
101
102 .card-title i {
103 color: var(--accent-color);
104 margin-right: 10px;
105 font-size: 1.2em;
106 }
107
108 .card-content {
109 font-size: 0.85em;
110 color: var(--text-color);
111 flex-grow: 1;
112 }
113
114 .card-content ul {
115 list-style: none;
116 padding-left: 0;
117 margin-top: 10px;
118 }
119
120 .card-content ul li {
121 position: relative;
122 padding-left: 18px;
123 margin-bottom: 6px;
124 }
125
126 .card-content ul li::before {
127 content: "\f00c"; /* FontAwesome checkmark */
128 font-family: "Font Awesome 6 Free";
129 font-weight: 900;
130 color: var(--secondary-color);
131 position: absolute;
132 left: 0;
133 top: 0;
134 }
135
136 /* Specific section styles */
137 .action-columns {
138 display: flex;
139 gap: 15px;
140 flex-grow: 1;
141 }
142
143 .action-columns .column {
144 flex: 1;
145 background-color: #f9f9f9;
146 border: 1px dashed var(--border-color);
147 border-radius: 6px;
148 padding: 12px;
149 display: flex;
150 flex-direction: column;
151 }
152
153 .action-columns .column h4 {
154 font-family: 'Noto Serif JP', serif;
155 color: var(--secondary-color);
156 margin-top: 0;
157 margin-bottom: 8px;
158 font-size: 1.0em;
159 display: flex;
160 align-items: center;
161 }
162
163 .action-columns .column h4 i {
164 margin-right: 8px;
165 color: var(--accent-color);
166 }
167
168 .action-columns .column p {
169 font-size: 0.85em;
170 margin-bottom: 6px;
171 }
172
173 /* Page 2 specific adjustments if needed */
174 .page:last-child {
175 margin-top: 15px; /* Visual separation if displayed consecutively on screen */
176 }
177
178 /* Print Specific Styles */
179 @media print {
180 @page {
181 size: A4;
182 margin: 15mm;
183 }
184
185 body {
186 background-color: white;
187 -webkit-print-color-adjust: exact; /* For background colors and shadows */
188 print-color-adjust: exact;
189 }
190
191 .container {
192 box-shadow: none;
193 width: auto; /* Let content define width within A4 margins */
194 }
195
196 .page {
197 width: 100%;
198 height: 267mm; /* A4 height minus top and bottom margins (297mm - 30mm) */
199 padding: 0; /* Margins handled by @page */
200 page-break-after: always; /* Force page break after each .page */
201 border: none; /* No border in print */
202 box-shadow: none; /* No shadow in print */
203 gap: 8px; /* Further reduce gap in print */
204 }
205 .page:last-child {
206 page-break-after: avoid; /* No page break after the last page */
207 }
208
209 .card {
210 box-shadow: none; /* Remove shadows for print */
211 border: 1px solid #ccc; /* Lighter border for print */
212 }
213
214 /* Crucial for maintaining 2-column layout on print */
215 .action-columns {
216 display: flex !important;
217 flex-direction: row !important; /* Ensure horizontal layout */
218 gap: 15px !important;
219 width: 100% !important;
220 box-sizing: border-box;
221 }
222
223 .action-columns .column {
224 flex: 1 !important;
225 width: 50% !important; /* Explicitly set width */
226 max-width: 50% !important; /* Ensure it doesn't expand too much */
227 box-sizing: border-box;
228 padding: 8px; /* Adjust padding for print if needed */
229 }
230 }
231 </style>
232</head>
233<body>
234 <div class="container">
235 <!-- Page 1 -->
236 <div class="page">
237 <header class="header">
238 <h1 class="main-title">ビタミンDは歯周病にどう影響する？</h1>
239 <div class="sub-info">
240 <span>著者: Emily Ming‐Chieh Lu</span>
241 <span>|</span>
242 <span>Journal of Periodontal Research</span>
243 <span>|</span>
244 <span>2023年</span>
245 </div>
246 </header>
247
248 <div class="card">
249 <h2 class="card-title"><i class="fa-solid fa-question-circle"></i> [WHY?] この研究、なぜ重要？ (背景と目的)</h2>
250 <div class="card-content">
251 <p>ビタミンDは、骨の健康維持だけでなく、免疫機能の調整や強力な抗炎症作用を持つことが知られています。近年、血中ビタミンD濃度が低いと、歯を支える組織が破壊される慢性炎症性疾患である歯周炎の重症度が増すというエビデンスが示されています。</p>
252 <p>本研究は、ビタミンDが歯周病の発症に影響を与える生物学的メカニズムを検証し、これまでの臨床研究の知見をまとめることを目的としています。</p>
253 </div>
254 </div>
255
256 <div class="card">
257 <h2 class="card-title"><i class="fa-solid fa-lightbulb"></i> [WHAT?] 結論は？ (研究の結論)</h2>
258 <div class="card-content">
259 <p>ビタミンDは、その強力な抗菌、抗炎症、宿主調節作用を通じて、歯周病の病態形成に深く関与している可能性が高いです。十分なビタミンDを維持することが、歯周組織の健康をサポートする上で非常に重要であると強調されています。</p>
260 </div>
261 </div>
262
263 <div class="card">
264 <h2 class="card-title"><i class="fa-solid fa-tooth"></i> [ACTION PLAN] 明日の臨床と患者さんへ</h2>
265 <div class="action-columns">
266 <div class="column">
267 <h4><i class="fa-solid fa-user-doctor"></i> For Clinicians (術者向けアクション)</h4>
268 <ul>
269 <li>重度または難治性の歯周炎患者に対し、血中ビタミンDレベルの評価を検討する。</li>
270 <li>患者に、食事、サプリメント、適度な日光浴を通じてビタミンDの十分な摂取を推奨する。</li>
271 <li>ビタミンDが歯周病だけでなく、全身の炎症や骨代謝にも影響を与えることを患者に説明し、包括的な健康管理の重要性を伝える。</li>
272 </ul>
273 </div>
274 <div class="column">
275 <h4><i class="fa-solid fa-notes-medical"></i> For Patients (患者さんへの説明例)</h4>
276 <p>「ビタミンDは、歯ぐきの健康を守るためにとても大切な栄養素です。骨を丈夫にするだけでなく、体の炎症を抑えたり、細菌と戦う力（免疫力）を高めたりする働きがあります。」</p>
277 <p>「もしビタミンDが不足すると、歯周病が進行しやすくなったり、歯ぐきの炎症がひどくなったりする可能性があります。お食事やサプリメント、適度な日光浴で、ビタミンDを十分に摂ることを心がけましょう。」</p>
278 <p>「ビタミンDをしっかり摂ることで、歯周病の治療効果を高め、全身の健康にも繋がりますよ。」</p>
279 </div>
280 </div>
281 </div>
282 </div>
283
284 <!-- Page 2 -->
285 <div class="page">
286 <div class="card">
287 <h2 class="card-title"><i class="fa-solid fa-flask"></i> [STUDY DESIGN] どんな方法で？ (研究方法)</h2>
288 <div class="card-content">
289 <p>本論文は、これまでの複数の研究結果を統合し、ビタミンDと歯周病の関連性について議論するレビュー論文です。</p>
290 <ul>
291 <li>**基礎研究の知見:** 活性型ビタミンD生成酵素（1α-水酸化酵素）を欠損させた実験的歯周炎モデルでは、歯槽骨吸収と歯肉炎症が増悪することが示されている。また、ビタミンD受容体（VDR）遺伝子多型が歯周炎の重症度と関連することも報告されている。</li>
292 <li>**臨床研究の知見:** 複数の臨床研究が、血中25OHD3（ビタミンDの貯蔵型）濃度と歯周病の炎症との間に逆相関（ビタミンDが低いほど炎症が強い）があることを一貫して示している。</li>
293 </ul>
294 </div>
295 </div>
296
297 <div class="card">
298 <h2 class="card-title"><i class="fa-solid fa-chart-bar"></i> [RESULTS] 主な結果は？ (主要データ)</h2>
299 <div class="card-content">
300 <ul>
301 <li>低血清ビタミンD濃度は、歯周炎の重症度増加と関連している。</li>
302 <li>ビタミンDの生物学的機能は、その強力な抗菌、抗炎症、宿主調節特性によって媒介される。</li>
303 <li>実験モデルにおいて、活性型ビタミンDの生成に関わる酵素が欠損すると、歯槽骨吸収と歯肉炎症が増大した。</li>
304 <li>ビタミンD受容体（VDR）遺伝子多型も、歯周炎の重症度増加と関連が見られる。</li>
305 <li>臨床研究では、血中25OHD3濃度と歯周病の炎症との間に一貫して逆相関が示されている。</li>
306 </ul>
307 </div>
308 </div>
309
310 <div class="card">
311 <h2 class="card-title"><i class="fa-solid fa-comments"></i> [DISCUSSION] 考察のポイント (議論)</h2>
312 <div class="card-content">
313 <p>ビタミンDが歯周病の病態に与える影響は生物学的に妥当性があると考えられます。しかし、デザインの優れた長期的な研究が不足しているため、ビタミンDの状態が歯周病の進行や歯の喪失に直接与える影響については、まだ十分な裏付けがありません。</p>
314 <p>今回のレビューは、歯周組織の健康を維持するためには、ビタミンDを十分に摂ることが重要であることを改めて強調しています。</p>
315 </div>
316 </div>
317 </div>
318 </div>
319</body>
320</html>