前回の続きです。今回は、税込・税抜価格の表示で書いた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まわりを紹介します。