前回の続きです。今回は、税込・税抜価格の表示で書いたHTML式を題材に、divとspanを見ていきます。

背景・課題

開発中、データベースのPriceカラムは税抜き価格だということが発覚。税抜き価格だけでなく、税込み価格を表示する必要が出てきたので、税込み用のカラム（PriceIncludingTax）を新設し、価格の前に通貨記号（例：¥）も付けています。

表示の要件は「税込を主表示（濃色・太字・大きめ）／税抜を控えめに併記（薄色・細字・小さめ・括弧付き）」でした。

対応方法

Claudeの提案をもとに書いたのが、次のPower Fx式です（HtmlTextプロパティ）。

With(
  {
    MyTextColor: "#3C3C43",  // 主表示（税込）の色
    MyDescColor: "#6D6D72",  // 控えめ（税抜）の色
    WiIncl: gblCurrency.Symbol & Text(locWcCurrentProductRecord.PriceIncludingTax, gblCurrency.Format),
    WiExcl: gblCurrency.Symbol & Text(locWcCurrentProductRecord.Price, gblCurrency.Format)
  },
  "<div style='font-family:Segoe UI, sans-serif; font-size:" & gblFontSize24 & "px; color:" & MyTextColor & "; font-weight:600; white-space:nowrap;'>" &
    WiIncl &
    " <span style='color:" & MyDescColor & "; font-size:" & gblFontSize20 & "px; font-weight:normal;'>(" &
    gblCurrency.Excl & " " & WiExcl &
    ")</span>" &
  "</div>"
)

下記はApp.Formulasで定義した名前付き計算式です。

gblCurrency=
    //Symbol:通貨記号, Code:ISO通貨コード, Format:小数桁数を含む表示形式, Prefix:記号を前に置くか後ろに置くか(trueが前置き), Excl: 税抜きを表すラベル
    { Symbol: "¥",  Code: "JPY", Format: "#,##0", Prefix: true ,Excl: "税抜" }; //日本用

gblFontSize20= 20;  //フォントサイズ20
gblFontSize24= 24;  //フォントサイズ24

変数を埋めると、こんなHTMLが生成されます。

<div style='font-family:Segoe UI, sans-serif; font-size:24px; color:#3C3C43; font-weight:600; white-space:nowrap;'>
  ¥3,300
  <span style='color:#6D6D72; font-size:20px; font-weight:normal;'>(税抜 ¥3,000)</span>
</div>

出てくるHTMLの基本

<div>：ブロック要素。表示全体を1つの箱にまとめる、基本のコンテナです。
<span>：インライン要素。行の中の一部分だけスタイルを変えたいときに使います（ここでは税抜部分だけ薄字にしています）。
style属性（インラインCSS）：color（文字色／16進カラー）、font-size（文字サイズ）、font-weight（太さ。600で太字、normalで通常）、white-space:nowrap（改行させない）。

ポイントは、外側の<div>で主表示、その中の<span>で従表示、という主従をCSSだけで作り分けているところです。

結果・感想

Labelを並べる方式では地味にやりにくかった「主表示＋控えめな併記」が、CSSで自然に表現できました。

まとめ

今回はdiv・spanとstyle属性で、価格の主従を表現する例を見ました。次回は、サイズカラー一覧で使ったtableまわりを紹介します。