rex0220 印刷屋プラグイン 見積書のCSSカスタマイズ２

rex0220 印刷屋プラグイン 見積書の全体的なCSSカスタマイズを行ってみます。

概要

共通CSSを使わずに、見積書のデザインを CSS で装飾をしてみます。
共通CSSとデザインを大きく変える場合は、CSS のクラス名を変えて適用します。

• 見積書を左寄せ
• 宛名等の文字を大きく
• 社印を大きく
• 見積明細の罫線を変更

• CSS カスタマイズ前後の比較

CSS カスタマイズ

共通CSSを使わずに、個別CSSで対応します。
アプリ全体で利用できるデザインなら、共通CSSに追加して利用することも可能です。
今回は、見積書に適用するクラス名を変更して、カスタマイズします。

CSS

クラス名を pcraft-inv から pcraft-est　にすべて変更します。
あとは、個別にカスタマイズを入れていきます。

.pcraft-est-header {
  text-align: left;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 10px;
}

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

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

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

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

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

.pcraft-est-seal {
  position: absolute;
  right: 50px;
  top: 60px;
  width: 204px;
  height: auto;
  z-index: 10;
  opacity: 0.8;
}

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

.pcraft-est-left .pcraft-est-estimate-amount {
  font-size: 20px;
  /* font-weight: bold; */
  display: block;
  margin-top: 5px;
  width: 240px;
}

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

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

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

table.pcraft-est-item-table th {
  border-bottom: 2px solid #000;
  text-align: center;
}

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

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

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

.pcraft-est-item-table th:nth-child(2) {
  text-align: left;
  width: 288px;
}

.pcraft-est-item-table th:nth-child(3) {
  padding-right: 13px;
  text-align: right;
  width: 90PX;
}

.pcraft-est-item-table th:nth-child(4),
.pcraft-est-item-table th:nth-child(5) {
  padding-right: 13px;
  text-align: right;
  width: 130px;
}

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

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

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

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


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

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

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

HTML 計算式

こちらも、クラス名を 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(合計金額))),
      TAG("p", ATTR("class", "pcraft-est-validity"),
        "見積の有効期限: " & DATE_FORMAT(見積有効期限, "YYYY年M月D日")
      )
    ),

    // header right
    TAG("div", ATTR("class", "pcraft-est-right"),
      TAG("p", "見積書番号: " & 見積番号),
      TAG("p", "発行日: " & DATE_FORMAT(見積日, "YYYY年M月D日")),
      TAG("p", "株式会社サンプルサンプルサンプル"),
      TAG("p", "開発 太郎"),
      VTAG("img", ATTR("class", "pcraft-est-seal", "width", "250", "height", "120", "src", "data:image/svg+xml;charset=utf8,%20%3Csvg%20class%3D%22pcraft-est-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"))
    )
  ),

  // 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", HTML(FVAL(備考)))
    ),
    // 合計
    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(合計金額))))
        )
      )
    )
  )
)