rex0220 印刷屋プラグイン見積書のCSSカスタマイズ２で作成した見積書のCSSを共通CSSに追加して、請求書に適用してみます。

概要

新しく作ったCSSで見積書と請求書のデザイン共通化したい場合など、共通CSSに登録して各帳票に適用します。

請求書のデザイン比較

見積書・請求書のデザイン比較

共通CSS設定

追加ボタンをクリックして、CSSを追加します。

請求書のカスタマイズ

既存の「請求書」を複写して、設定と確認を行ってみます。

クラス名を pcraft-inv から pcraft-est　にすべて変更します。

PAGE_HTML(
  TAG("div", ATTR("class", "pcraft-est-header"), "請求書"),

  TAG("div", ATTR("class", "pcraft-est-info"),

    // header left
    TAG("div", ATTR("class", "pcraft-est-left"),
      TAG("p", 宛名 & " 御中"), VTAG("br"),
      TAG("p", ATTR("class", "pcraft-est-estimate-amount"), "請求金額:", TAG("span", FVAL(合計金額))),
    ),

    // header right
    TAG("div", ATTR("class", "pcraft-est-right"),
      TAG("p", "請求番号: " & 請求番号),
      TAG("p", "発行日: " & DATE_FORMAT(請求日, "YYYY年M月D日")),
      TAG("p", "登録番号： T0000000000000"),
      TAG("p", "株式会社サンプルサンプルサンプル"),
      TAG("p", "開発 太郎"),
      VTAG("img", ATTR("class", "pcraft-est-seal", "width", "250", "height", "120", "src", "#{&f(20250224144344126E43A90D994A32B0C6FE39295544E7236)}"))
    )
  ),

  // table
  TABLE_HTML(見積明細,
    OPT("pref", "pcraft-est-item-"),
    ARRAY("#", ROWNO(見積明細) + 1),
    商品名, 数量, 単価, 金額
  ),

  // summary
  TAG("div", ATTR("class", "pcraft-est-summary-section"),
    // 備考
    TAG("div", ATTR("class", "pcraft-est-remarks-section"),
      TAG("strong", "備考:"), VTAG("br"),
      TAG("span", "ご注文ありがとうございます")
    ),
    // 合計
    TAG("div", ATTR("class", "pcraft-est-total-section"),
      TAG("table",
        TAG("tbody",
          TAG("tr", TAG("th", "小計"), TAG("td", FVAL(小計金額))),
          TAG("tr", TAG("th", "消費税 (10%)"), TAG("td", FVAL(消費税))),
          TAG("tr", TAG("th", TAG("strong", "合計")), TAG("td", TAG("strong", FVAL(合計金額))))
        )
      )
    )
  ),

  // footer
  TAG("div", ATTR("class", "pcraft-est-footer"),
    TAG("p", "お振込先: 〇〇〇〇銀行 〇〇支店（普）0000000 〇〇〇〇〇〇"),
    TAG("p", "＊お振込み手数料はご負担をお願い致します")  
  )
)