rex0220 印刷屋プラグイン 見積書の HTML,CSS について

[印刷屋プラグイン](https://qiita.com/rex0220/items/9be2d9b20a3a1f016c76)で作成した見積書の HTML,CSS について、ChatGPT に解説してもらいました。
見積書カスタマイズの参考になれば。

# 概要

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

![2025-02-26_12h11_32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/30066945-ca20-4d93-b34b-f4edb968d5a6.png)

## HTML & CSS の構成

![2025-02-26_12h11_32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/f8bb10ac-1c65-417a-a4b5-3c827b6fc37e.png)


## 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つ**：
1. **Flexbox を活用して左右配置を調整**
2. **テーブルデザインを統一して視認性を向上**
3. **電子印鑑を `.pcraft-inv-right` 内で適切に配置**
4. **`.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>
```