均等な空白部分をつくるには？

質問

htmlで例のように表示したいのですが
例）「　　数量　　　　金額」
　　「　　１２　１，２３４」
のように桁位置を合わせたく思います。つまり、数字の最下位桁と見出しの最下位桁を同じ位置にしたいのです。
ところが、漢字スペースを入れても実際はくっついてしまい「１２３，４５６」のようにWeb表示されてしまいます。
半角スペースでも同様にくっついてしまいます。
たとえば「ESC」コードのようなスペースのように見える文字をスペース代わりに挿入することで可能になるのでしょうけど、どのようなコードがいいでしょうか？なにかいいアイデアはあるでしょうか？

回答No.1

yambejp · ベストアンサー

いまいち何をやりたいのかわかりませんが、
<pre></pre>でインデントしたい部分を囲んでみてはいかが？

お礼

すみません。
質問にあやまりがあり、
例）「　　数量　　　　金額」
　　「　　１２　１，２３４」
-------
ところが、漢字スペースを入れても実際はくっついてしまい「１２１，２３４」のようにWeb表示されてしまいます。
半角スペースでも同様にくっついてしまいます。
たとえば「ESC」コードのようなスペースのように見える文字をスペース代わりに挿入することで可能になるのでしょうけど、どのようなコードがいいでしょうか？なにかいいアイデアはあるでしょうか？
でした。

回答ありがとうございます。
<pre></pre>で囲めば、見た目に表示されるのでしょうか。
試してみます。

補足

ありがとうございます。
試してみましたが「表示」がなぜかぐちゃぐちゃになってしまいました。
使い方があやまっているのでしょうか？

回答No.5

steel_gray

空白文字は構造の区切り(データの区切り)であって、何個も続けたところで一つと同じに扱われます。(プログラムのソースコード中、文字列内以外の場所でtabや空白を何個いれても実行結果に影響しないのと同じ)

対処は３種類(全て既出です)
１）空白を一つづつ&nbsp;に置き換える。（&nbsp;は視覚化されるのでレイアウトにも使える。）
２）preで囲う。preは「空白」や「改行」をそのままレンダリングに反映させる。（桁合わせをするなら等幅フォントも指定）
<pre style="font-family:monospace">＿＿数量＿＿＿＿＿金額（改行）
＿＿１２＿＿１，２３４</pre>
monospaceというのはブラウザに設定されている等幅フォントを使いなさいという意味で、「ＭＳゴシック」を指定するよりも柔軟で的確です。
３）tableとしてマークアップする。

簡単なのは#2（改行も反映されるので余計な場所で改行したりbrを余計に入れると崩れます）

HTMLをマジメに扱うのであれば（表に見えるので）たぶん#3です。

preで逃げているとすぐに壁にぶち当たるのでちゃんとHTMLを学びtable化する事をお勧めします。

お礼

ありがとうございます。
試してみます。

回答No.4

kuzumiHK

内容を見ると表的な要素ですので間にタグを挿入できるのであれば、
ANo.2さんがおっしゃるようにtableが理想だと思います。
例えば、word-spacingなら空白を調整することが可能ですが、
いかがでしょうか。

<p style="word-spacing:3em">
数量 金額<br>
1235 111456
</p>

お礼

ありがとうございます。
試してみます。

回答No.3

yambejp

それではmonospaceをつかってみてください。

<div style="font-family:monospace">
　　数量　　　　金額<br>
　　１２　１，２３４
</div>

お礼

ありがとうございます。
このように書きましたが
<div style="font-family:monospace">
<p align="left">
数量 金額<br>
1235 111456
</div>
数量 金額
1235 111456
こんな漢字に表示されてしまします。

補足

お礼の訂正です。
ありがとうございます。
<div style="font-family:monospace">
<p align="left">
____数量_________金額<br>
____1235_______111456
</div>
のように書きましたが（_はスペースの意)

数量 金額
1235 111456
のようになります。

回答No.2

nda23

HTMLでは空白を&nbsp;と記述していますか？
もっとも、プロポーショナルフォントでは空白で間合いを取るのは
絶望的です。そこで、位置合わせなら、<TABLE>タグを使う方が
よいでしょう。

<TABLE>
　<TR>
　　<TH ALIGN=RIGHT>数量</TH>
　　<TH ALIGN=RIGHT>金額</TH>
　</TR>
　<TR>
　　<TD ALIGN=RIGHT>12</TD>
　　<TD ALIGN=RIGHT>1,234</TD>
　</TR>
</TABLE>

お礼

ありがとうございます。
&nbsp;を使わずにお願いします。
なぜ、このような質問をするかといいますと「COBOL」でhtmlというテキストファイルを出力するのですが、この場合、タイトル部は
「____数量______金額」とし(_はスペースの意）、
「ZZZZ,ZZ9ZZ,ZZZ,ZZ9」のように編集エリアを定義しますが、この時
12と1234の場合、
「______12_____1,234」となりますが、
この場合Webでは
「121,234」と表示されてしましますので。。
ちなみに文字種類は「MSゴシック」にしています。（プロポーショナルでは無い）