数値の書式について
このページでは、数の書式 右寄せ
、３桁ごとのカンマ
の付加、数値の桁合わせ
についてを解説します。
右寄せ
と数値の桁合わせ
は CSS を利用します。右寄せ
は、CSS の text-align: right; を指定し、数値の桁合わせ
はフォントを等幅フォント
に指定します。
３桁ごとのカンマ
は、金額の表示に利用されることが多いのですが、HTML のみでは３桁区切りで数値を表示するという機能はないようです。
３桁ごとのカンマ
といった表記するためには CSS 、JavaScript を使用して入力があったら表示を変更するように組み込まなければなりません。
ただし、サーバーにデータを送る際に問題が発生します。詳しくは以下の３桁ごとのカンマの表示のおける注意点
を参照してください。
- ad -
３桁ごとのカンマの表示のおける注意点
<input type="number"> で数値入力ができるのですが、やはりそのままでは、 カンマ,
で３桁ごとの区切りは表示されませんし、表示できるようにもなりません。
JavaScript で３桁ごとにカンマが入るように数値データをテキストに変えると、サーバーにデータを送信する際に問題が起こります。
３桁ごとのカンマ
といった表記するためには CSS 、JavaScript を使用して入力があったら表示を変更するように組み込まなければなりません。
もし、<input> で３桁区切りを表示するには、<input type="text"> で、JavaScript を利用します。
ただし、数値を３桁区切りのテキストではサーバーにそのまま送信できません。再度数値に戻す必要があります。
ユーザーが入力した内容を変更する処理は好ましくありません。なるべくなら、数値で入力されたものは数値としてサーバーに送るようにしたほうが賢明です。
入力フォームでは数値は数値のままで入力してもらい（右寄せはできます）、表示の段階で３桁区切りにするといった処理の方が無難です。
そのことに注意して以下の解説をお読みください。
右寄せ
CSS、スタイルシートで設定する方法です。text-align: right;を指定します。
text-align: right;
詳しくはtext-alignプロパティページを参照して下さい。
カンマを付加
JavaScript
JavaScriptで数値または文字列をカンマを付加したものに置き換える方法です。toLocaleString()関数を使います。
toLocaleString() 関数は数値、日付などをローカル表記に変更してくれる関数です。国を指定しなければ、数値は３桁ごとにカンマを加えます。
var num=123456789; var txt_num = num.toLocaleString(); .. txt_num は になります
ただし、この方法では小数点以下で丸め込み処理
が起きます。もし丸められたくない場合は、maximumFractionDigits オプションを利用します。
var num=123456789.123456789;
var txt_num = num.toLocaleString( undefined, { maximumFractionDigits: 10 });
..
txt_num は になります
maximumFractionDigits オプションの指定値は丸め込みが起きない桁数です。
XSLT
XSLTでの方法です。３桁ごとにカンマを付加します。
<xsl:value-of select="format-number(debit-amount,'###,##0')" />
数値の桁合わせ
数値の桁を合わせるためには、CSS でフォントを等幅フォント
にします。
等幅フォント
は、以下のようにフォントファミリーで monospace に指定します。
font-family: monospace;
monospace ではフォントの形が気に入らないかもしれません。他のフォントを表示したい場合は以下のようにフォントファミリーを指定します。
font-family: "Courier New","Monaco","Osaka-Mono","Consolas",monospace;
指定されたフォントファミリーは利用できる状態なら、そのフォントが利用されます。指定されたフォントファミリーを先頭から利用できるかが検証されます。
一番先頭から順に使用したいフォントファミリーを指定します。
フォントファミリーについて詳しくはfont-family プロパティ
を参照してください。
- ad -