印刷屋プラグインで作成した見積書の HTML,CSS について、ChatGPT に解説してもらいました。
見積書カスタマイズの参考になれば。

概要

印刷屋プラグインで作成した見積書のプレビュー画面

HTML & CSS の構成

HTML & CSS の構成解説

1. `rex0220-pcraft-page` (全体コンテナ)

.rex0220-pcraft-page は見積書全体を囲む親要素で、見積書のレイアウトをまとめています。

2. `.pcraft-inv-header` (タイトル部)

見積書 のタイトルを中央寄せ (text-align: center) で大きく (font-size: 28px; font-weight: bold;) 表示します。

3. `.pcraft-inv-info` (見積書の基本情報)

見積書の宛先や発行元情報を左右 (display: flex; justify-content: space-between;) に分けて配置。
.pcraft-inv-left (左側):
- 会社名、見積金額、有効期限などを表示。
- 会社名の部分 (p タグ) は、下線 (border-bottom: 1px solid #000;) を引いて強調。
.pcraft-inv-right (右側):
- 見積書番号、発行日、発行会社名、担当者名を右寄せで表示 (text-align: right;)。
- position: absolute; で配置された .pcraft-inv-seal は電子印鑑画像で、適切な場所に重ねるように配置 (right: 100px; bottom: 0;)

4. `.pcraft-inv-item-table` (見積の明細表)

商品の詳細（商品名、数量、単価、金額）を表形式で表示。
border-collapse: collapse; により、罫線が重ならないよう調整。
text-align: right; を適用し、金額関連の項目を右寄せ。

5. `.pcraft-inv-summary-section` (合計金額と備考)

.pcraft-inv-remarks-section:
- 備考欄。枠 (border: 2px solid #000;) で囲んでメモ書きができるように設計。
.pcraft-inv-total-section:
- 小計、消費税、合計金額を表示する表を作成。

6. `.pcraft-inv-footer` (フッター)

.pcraft-inv-footer は、余白 (margin-top: 20px; padding-top: 10px; border-top: 2px solid #000;) を設けて、フッター情報（注意事項など）を記述する領域。

CSSのポイント

レイアウト関連

display: flex; を使用
- .pcraft-inv-info や .pcraft-inv-summary-section で flexbox を使用し、左右に要素を配置。
- justify-content: space-between; で左右の要素を均等に分布。
レスポンシブ対応
- .pcraft-inv-left に min-width: 420px; を指定し、レイアウト崩れを防止。
- flex-wrap: wrap; を使用し、狭い画面で要素が折り返されるよう設計。

テーブルデザイン

.pcraft-inv-item-table の th は text-align: center; で中央寄せ。
td:nth-child(3), td:nth-child(4), td:nth-child(5) に text-align: right; を指定し、数量・単価・金額を右寄せ。

電子印鑑のデザイン (`.pcraft-inv-seal`)

.pcraft-inv-seal (電子印鑑) は .pcraft-inv-right 内に配置されており、親要素 .pcraft-inv-right が position: relative; になっているため、
position: absolute; を持つ .pcraft-inv-seal は 親要素 .pcraft-inv-right の右下 (right: 100px; bottom: 0;) に配置 されます。
opacity: 0.8; を指定し、背景とのなじみを持たせる。
親要素 (.pcraft-inv-right) の影響:
- .pcraft-inv-seal の position: absolute; は 親要素 (.pcraft-inv-right) が relative であるため、その中での絶対位置を取る。
- .pcraft-inv-right が flex: 1; のため、左側の .pcraft-inv-left とバランスを取りながら配置 される。

まとめ

このHTMLとCSSは、見積書のレイアウトを整理し、見やすくする構成になっています。
主要なポイントは以下の4つ：

Flexbox を活用して左右配置を調整
テーブルデザインを統一して視認性を向上
電子印鑑を .pcraft-inv-right 内で適切に配置
.pcraft-inv-seal は position: absolute; で親要素 (.pcraft-inv-right) の右下に配置

この構成なら、印刷にも適したフォーマットの整った見積書を作ることができます！

プレビュー画面の HTML,CSS

見積書.css


.pcraft-inv-header {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.pcraft-inv-info {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
}

.pcraft-inv-info p {
  margin: 5px 0;
}

.pcraft-inv-left {
  text-align: left;
  flex: 1;
  min-width: 420px;
}

.pcraft-inv-left p {
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #000;
  display: inline-block;
  padding-bottom: 2px;
  margin-bottom: 10px;
}

.pcraft-inv-right {
  position: relative;
  text-align: right;
  flex: 1;
}

.pcraft-inv-seal {
  position: absolute;
  right: 100px;
  bottom: 0;
  width: 100px;
  height: auto;
  z-index: 10;
  opacity: 0.8;
}

.pcraft-inv-left .pcraft-inv-validity {
  font-size: 16px;
  font-weight: normal;
  border-bottom: none;
  display: block;
  margin-top: 5px;
}

.pcraft-inv-left .pcraft-inv-estimate-amount {
  font-size: 16px;
  font-weight: bold;
  display: block;
  margin-top: 5px;
  width: 240px;
}

.pcraft-inv-estimate-amount span {
  margin-left: 20px;
}

table.pcraft-inv-item-table {
  width: 100%;
  border: 2px solid #000;
  border-collapse: collapse;
}

table.pcraft-inv-item-table th,
table.pcraft-inv-item-table td {
  border: 1px solid #000;
  box-sizing: border-box;
  padding: 5px 10px;
}

table.pcraft-inv-item-table th {
  text-align: center;
}

table.pcraft-inv-item-table td:nth-child(1) {
  text-align: center;
}

table.pcraft-inv-item-table td:nth-child(3),
table.pcraft-inv-item-table td:nth-child(4),
table.pcraft-inv-item-table td:nth-child(5) {
  text-align: right;
}

.pcraft-inv-item-table th:nth-child(1) {
  width: 40px;
}

.pcraft-inv-item-table th:nth-child(2) {
  width: 288px;
}

.pcraft-inv-item-table th:nth-child(3) {
  width: 90PX;
}

.pcraft-inv-item-table th:nth-child(4),
.pcraft-inv-item-table th:nth-child(5) {
  width: 130px;
}

.pcraft-inv-summary-section {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.pcraft-inv-remarks-section {
  border: 2px solid #000;
  padding: 5px 10px;
  box-sizing: border-box;
  width: 400px;
}

.pcraft-inv-total-section table {
  width: 100%;
  border: 2px solid #000;
  border-collapse: collapse;
}

.pcraft-inv-total-section th,
.pcraft-inv-total-section td {
  border: 1px solid #000;
  padding: 6px 10px;
  text-align: right;
  width: 133px;
  box-sizing: border-box;
}

.pcraft-inv-total-section th {
  text-align: left;
}

.pcraft-inv-footer {
  margin-top: 20px;
  padding-top: 10px;
  border-top: 2px solid #000;
  text-align: left;
}

.pcraft-inv-footer p {
  margin-block: initial;
  font-size: 15px;
}

見積書.html

<div class="rex0220-pcraft-page">
    <div class="pcraft-inv-header">見積書</div>
    <div class="pcraft-inv-info">
        <div class="pcraft-inv-left">
            <p>株式会社あれこれ株式会社あれこれA 御中</p><br>
            <p class="pcraft-inv-estimate-amount">見積金額:<span>¥330,000</span></p>
            <p class="pcraft-inv-validity">見積の有効期限: 2025年3月24日</p>
        </div>
        <div class="pcraft-inv-right">
            <p>見積書番号: A-20250224-002</p>
            <p>発行日: 2025年2月24日</p>
            <p>株式会社サンプルサンプルサンプル</p>
            <p>開発 太郎</p>
            <img class="pcraft-inv-seal" width="250" height="120" src="data:image/svg+xml;charset=utf8,%20%3Csvg%20class%3D%22pcraft-inv-seal%22%20width%3D%22250%22%20height%3D%22120%22%20viewBox%3D%220%200%20250%20120%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22230%22%20height%3D%22100%22%20rx%3D%2220%22%20ry%3D%2220%22%20stroke%3D%22red%22%20stroke-width%3D%225%22%20fill%3D%22none%22%2F%3E%20%3Ctext%20x%3D%22125%22%20y%3D%2250%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2234%22%20font-weight%3D%22bold%22%20text-anchor%3D%22middle%22%20fill%3D%22red%22%3E%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%3C%2Ftext%3E%20%3Ctext%20x%3D%22125%22%20y%3D%2290%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2234%22%20font-weight%3D%22bold%22%20text-anchor%3D%22middle%22%20fill%3D%22red%22%3E%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%3C%2Ftext%3E%20%3C%2Fsvg%3E">
        </div>
    </div>
    <table class="pcraft-inv-item-table"><thead class="pcraft-inv-item-head"><tr class="pcraft-inv-item-header-row"><th class="pcraft-inv-item-td-label">#</th><th class="pcraft-inv-item-td-label">商品名</th><th class="pcraft-inv-item-td-label">数量</th><th class="pcraft-inv-item-td-label">単価</th><th class="pcraft-inv-item-td-label">金額</th></tr></thead><tbody class="pcraft-inv-item-body"><tr class="pcraft-inv-item-row"><td class="pcraft-inv-item-td-value">1</td><td class="pcraft-inv-item-td-value">A01 商品名XXXX</td><td class="pcraft-inv-item-td-value value-right">10</td><td class="pcraft-inv-item-td-value value-right">¥10,000</td><td class="pcraft-inv-item-td-value value-right">¥100,000</td></tr><tr class="pcraft-inv-item-row"><td class="pcraft-inv-item-td-value">2</td><td class="pcraft-inv-item-td-value">A02 商品名XXXX</td><td class="pcraft-inv-item-td-value value-right">5</td><td class="pcraft-inv-item-td-value value-right">¥20,000</td><td class="pcraft-inv-item-td-value value-right">¥100,000</td></tr><tr class="pcraft-inv-item-row"><td class="pcraft-inv-item-td-value">3</td><td class="pcraft-inv-item-td-value">A01 商品名XXXX</td><td class="pcraft-inv-item-td-value value-right">10</td><td class="pcraft-inv-item-td-value value-right">¥10,000</td><td class="pcraft-inv-item-td-value value-right">¥100,000</td></tr></tbody></table>
    <div class="pcraft-inv-summary-section">
        <div class="pcraft-inv-remarks-section">
            <strong>備考:</strong><br>
            <span>（備考内容を記入してください）<br>（備考備考備考備考）<br></span>
        </div>
        <div class="pcraft-inv-total-section">
            <table>
                <tbody><tr>
                    <th>小計</th>
                    <td>¥300,000</td>
                </tr>
                <tr>
                    <th>消費税 (10%)</th>
                    <td>¥30,000</td>
                </tr>
                <tr>
                    <th><strong>合計</strong></th>
                    <td><strong>¥330,000</strong></td>
                </tr>
            </tbody></table>
        </div>
    </div>
</div>