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

kintone

Last updated at 2025-02-26Posted at 2025-02-26

印刷屋プラグインで作成した見積書の 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>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

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

概要

HTML & CSS の構成

HTML & CSS の構成解説

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

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

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

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

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

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