HTMLスタイル（md１号）

md１号｜HTMLスタイル指定プロンプト（固定デザイン用）

■ md１号｜スタイル指定プロンプト（Web＋A4印刷対応）
以下の指示に従って、HTMLを md１号スタイル で生成してください。
________________________________________
【md１号｜固定スタイル宣言】
これから生成するHTMLは、md１号（mds-civil風） スタイルで出力すること。
内容（文章・項目・リンク）は都度変更可。ただし 色・文字・配置・余白・罫線の設計は固定し、勝手に変えないこと。
________________________________________
1. 出力形式（固定）
• DOCTYPEから始まる 完全な1ファイルHTML
• CSSは <head> 内に内包（外部CSS禁止）
• JavaScript禁止（使わない）
• フォントは日本語Web標準ゴシック系
• PC表示は2カラム、スマホは1カラムに縦並び
• 余計な装飾（影・大きな角丸・派手なグラデーション）禁止
________________________________________
2. カラーパレット（固定）
CSS変数として必ず定義し、以後は変数で統一：
• --md-blue: #185F99（TEL等の主青）
• --md-red: #9D2918（e-mail等の赤）
• --md-text: #222222（本文）
• --md-muted:#666666（補足）
• --md-line: #cfcfcf（罫線）
• --md-bg: #ffffff（背景）
• --md-nav: #efefef（ナビ背景）
• --md-nav2: #f7f7f7（薄面）
________________________________________
3. フォント・文字（固定）
• font-family: "Hiragino Kaku Gothic ProN","Meiryo","Noto Sans JP",Arial,sans-serif;
• 本文：14px、行間1.6
• 見出し：太字600程度（過度な太字禁止）
• パンくず：12px、--md-muted
________________________________________
4. ページ構造（固定：この順番）
必ず以下の構造で組むこと。
(1) ヘッダー（上段）
• 左：ロゴ領域（画像or文字ロゴ）＋小さめ肩書（例：建設コンサルタント）
• 右：連絡先ブロック
o 1行目：TEL（大きめ・太字・--md-blue）
o 2〜3行目：住所（小さめ・--md-text〜--md-muted）
o 最終行：e-mail（--md-red）
• ヘッダー直下：濃い区切り線（濃グレー〜黒）を1本
(2) グローバルナビ（タブ型）
• 横並び（8〜10項目想定）
• 背景 --md-nav
• 各タブは四角、区切り線 --md-line
• 現在タブは背景を白寄りにして文字を濃く（強調は最小限）
(3) パンくず
• トップ > Q&A > ... 形式
• 12px、--md-muted
(4) 2カラム本文
• 左：本文 68〜72%
• 右：サイドバー 28〜32%
• カラム間は適度な余白（16〜24px程度）
________________________________________
5. 左カラム（本文）デザイン固定
• 記事タイトル（例：Q14…）は --md-blue・太字・大きめ（18〜20px程度）
• タイトル下に薄い罫線 --md-line
• 本文ブロックは 白背景＋枠線 --md-line
• 角丸は基本なし（付けても2pxまで）
• 箇条書きは浅めインデント（読みやすく）
• 小見出しは本文より少し太字、サイズ14〜15px程度
________________________________________
6. 右カラム（サイドバー）固定
• 見出し（例：ブログ）は 薄グレー帯（--md-nav2）＋枠線 --md-line＋太字
• 日付は --md-muted、タイトルは --md-text
• 各行に薄い区切り線 --md-line
________________________________________
7. 印刷（A4縦）対応（固定）
• @page { size: A4 portrait; margin: 10mm; }
• 印刷時は背景を白に統一
• ナビやサイドバーは印刷で 表示する/しない を選べるようにCSSクラスで制御可能にする
（例：.no-print{display:none;} を用意）
________________________________________
8. 出力命令（最重要）
• 上記 md１号スタイルを厳守してHTMLを出力すること
• 私が渡す「内容（本文・見出し・メニュー・サイドバー項目）」に合わせて中身を差し替えること
• スタイルは一切変更しないこと