薬剤個別ページ CSS コンポーネントカタログ

1. ボックス系コンポーネント（7種類）

info-box（情報ボックス・青系）

エビデンス、補足情報、研究データなどに使用

臨床試験のエビデンス

PROMINENT試験では、ペマフィブラートがトリグリセリドを平均26.2%低下させることが示されました。

10,497例を対象とした大規模試験で、安全性も確認されています。

<div class="info-box">
    <h5>臨床試験のエビデンス</h5>
    <p>内容...</p>
</div>

alert-box（注意ボックス・黄系）

警告、注意事項、副作用情報などに使用

注意: 腎機能が低下している患者では用量調整が必要です。

eGFR 30mL/min/1.73m²未満では慎重投与となります。

<div class="alert-box">
    <p><strong>注意</strong>: 内容...</p>
</div>

highlight-box（ハイライトボックス・緑系）

重要ポイント、利点、成功事例などに使用

ポイント: ペマフィブラートは肝選択性が高く、筋肉への影響が少ないため、横紋筋融解症のリスクが低い。

<div class="highlight-box">
    <p><strong>ポイント</strong>: 内容...</p>
</div>

key-point-box（キーポイントボックス・オレンジ系）

処方のコツ、実践的アドバイス、覚えておくべき要点に使用

処方のコツ

食後投与で消化器症状を軽減できる
スタチンとの併用で相乗効果が期待できる
定期的な肝機能検査を忘れずに

<div class="key-point-box">
    <h5>処方のコツ</h5>
    <ul>...</ul>
</div>

quote-box（引用ボックス・グレー系）

ガイドラインからの引用、専門家の意見などに使用

「高トリグリセリド血症の治療において、ペマフィブラートは第一選択薬の一つとして推奨される」

動脈硬化性疾患予防ガイドライン2022年版

<div class="quote-box">
    <blockquote>引用文...</blockquote>
    <cite>出典</cite>
</div>

simple-box（シンプルボックス・白背景）

構造化された情報、フローチャート、リストなどに使用

投与方法

1日2回、朝夕食後に投与
1回0.1mg（1錠）から開始
効果不十分な場合は0.2mg（2錠）まで増量可能

<div class="simple-box">
    <h4>タイトル</h4>
    <ol>...</ol>
</div>

plain-box（プレーンボックス・枠線のみ）

シンプルなグループ化、軽い強調に使用

標準的な投与量：0.1mg×2回/日（朝夕食後）

最大投与量：0.2mg×2回/日

<div class="plain-box">
    <p>内容...</p>
</div>

2. テーブル系コンポーネント（4種類）

comparison-table（比較テーブル）

薬剤比較、効果比較などに使用。ダークネイビーのヘッダーが特徴

項目	ペマフィブラートパルモディア®	フェノフィブラートリピディル®
作用機序	選択的PPARαモジュレーター	PPARα活性化薬
TG低下率	-30～-50%	-20～-40%
肝選択性	高い	中程度

<div class="comparison-table-wrapper">
    <div class="comparison-table">
        <table>...</table>
    </div>
</div>

data-table（データテーブル）

薬価、用量、検査値などの数値データに使用

規格	薬価	1日薬価
0.1mg錠	32.90円	65.80円
0.2mg錠	該当なし	-

<div class="data-table">
    <table>...</table>
</div>

clinical-table（臨床テーブル）

臨床データ、副作用頻度、検査値推移などに使用。青いヘッダーが特徴

副作用	発現頻度	対処法
肝機能異常	1-5%	定期的な肝機能検査
筋肉痛	<1%	CK値モニタリング

<div class="clinical-table">
    <table>...</table>
</div>

summary-table（サマリーテーブル）

要約情報、簡潔なまとめに使用。コンパクトな表示

分類	内容
適応症	高脂血症（トリグリセリド高値）
用法用量	1回0.1mg、1日2回

<div class="summary-table">
    <table>...</table>
</div>

3. セクション系コンポーネント（4種類）

content-section（基本コンテンツセクション）

通常のコンテンツエリア。Level 3などの詳細情報に使用

作用機序の詳細

ペマフィブラートは選択的PPARαモジュレーター（SPPARMα）として、従来のフィブラート系薬剤とは異なる作用を示します。

SPPARMαの特徴

PPARαの特定領域に選択的に結合し、有益な遺伝子のみを活性化します。

<div class="content-section">
    <h2>タイトル</h2>
    <p>内容...</p>
</div>

development-story（開発ストーリーセクション）

薬剤の開発経緯、歴史的背景などに使用。アイコン付き

ペマフィブラート開発物語

2017年、日本の製薬企業が世界初のSPPARMαとして開発に成功。従来のフィブラート系薬剤の課題を克服し、より安全で効果的な治療薬として誕生しました。

<div class="development-story">
    <h2>開発物語</h2>
    <p>内容...</p>
</div>

clinical-evidence（臨床エビデンスセクション）

臨床試験結果、エビデンスの詳細などに使用

主要臨床試験

PROMINENT試験

10,497例を対象とした国際共同第III相試験。心血管イベント抑制効果は示されなかったが、安全性と脂質改善効果が確認されました。

<div class="clinical-evidence">
    <h2>臨床試験</h2>
    <h3>試験名</h3>
    <p>結果...</p>
</div>

safety-comparison（安全性比較セクション）

副作用、安全性プロファイルの比較などに使用

安全性プロファイル

ペマフィブラートは肝選択性が高く、筋肉への分布が少ないため、横紋筋融解症のリスクが従来のフィブラート系薬剤より低いことが特徴です。

<div class="safety-comparison">
    <h2>安全性</h2>
    <p>内容...</p>
</div>

4. グリッド系コンポーネント（4種類）

content-grid（コンテンツグリッド・2列固定）

効能一覧、特徴リストなどに使用。PC表示で2列固定

脂質改善効果

TGを30-50%低下、HDL-Cを10-20%上昇

抗炎症作用

CRPやフィブリノゲンを低下

血管保護作用

動脈硬化の進展を抑制

肝機能改善

NAFLDの改善効果も期待

<div class="content-grid">
    <div class="content-item">
        <h4>タイトル</h4>
        <p>内容</p>
    </div>
    <div class="content-item">...</div>
</div>

data-grid（データグリッド・数値表示用）

統計データ、数値の強調表示に使用

TG低下率

-45%

HDL-C上昇率

+15%

LDL-C変化

±0%

CRP低下

-20%

<div class="data-grid">
    <div class="content-item">
        <h4>指標</h4>
        <p>数値</p>
    </div>
</div>

固定列数グリッド（grid-2, grid-3, grid-4）

固定列数でレイアウトしたい場合に使用

朝食後

0.1mg 1錠

昼食後

投与なし

夕食後

0.1mg 1錠

<div class="grid-3">
    <div class="plain-box">...</div>
    <div class="plain-box">...</div>
    <div class="plain-box">...</div>
</div>

5. その他の重要なクラス

カード要素

汎用的なカード表示に使用

薬剤情報カード

このようにカード形式で情報をグループ化できます。

ホバー時にシャドウが強調されます。

<div class="card">
    <h3>タイトル</h3>
    <p>内容...</p>
</div>

6. レスポンシブ対応について

自動的なレスポンシブ対応

すべてのコンポーネントは以下のブレークポイントで自動的に最適化されます：

768px以下（タブレット）: グリッドが1列に、テーブルが横スクロール可能に
480px以下（モバイル）: すべてのグリッドが1列に、パディング調整

特に比較テーブルは、モバイルで項目列（最初の列）が固定表示されます。

7. 使用上の注意とベストプラクティス

コンポーネント選択の原則

新規作成より既存活用: 新しいクラスを作るのではなく、既存のものから選択
用途より見た目で選択: 「処方のコツ」でもinfo-boxが適切な場合もある
入れ子を避ける: 色付きボックスの中に色付きボックスは避ける
白背景を基本に: 大きな領域は白背景（content-section）を使用

避けるべきパターン:

インラインスタイルの多用（style="..."）
独自クラスの作成
過度な入れ子構造
テーブルの中にボックスを入れる