ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
QNo.4017634 均等な空白部分をつくるには？
質問者：hamasyou09 htmlで例のように表示したいのですが
例）「　　数量　　　　金額」
　　「　　１２　１，２３４」
のように桁位置を合わせたく思います。つまり、数字の最下位桁と見出しの最下位桁を同じ位置にしたいのです。
ところが、漢字スペースを入れても実際はくっついてしまい「１２３，４５６」のようにWeb表示されてしまいます。
半角スペースでも同様にくっついてしまいます。
たとえば「ESC」コードのようなスペースのように見える文字をスペース代わりに挿入することで可能になるのでしょうけど、どのようなコードがいいでしょうか？なにかいいアイデアはあるでしょうか？
困り度：
  • 困っています
質問投稿日時：
08/05/12 21:39
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

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

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


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

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

preで逃げているとすぐに壁にぶち当たるのでちゃんとHTMLを学びtable化する事をお勧めします。
回答者：steel_gray
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：
08/05/13 01:06
この回答へのお礼ありがとうございます。
試してみます。

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

<p style="word-spacing:3em">
数量 金額<br>
1235 111456
</p>
回答者：kuzumiHK
種類：アドバイス
どんな人：専門家
自信：参考意見
回答日時：
08/05/13 00:44
この回答へのお礼ありがとうございます。
試してみます。

回答
ANo.3 それではmonospaceをつかってみてください。

<div style="font-family:monospace">
　　数量　　　　金額<br>
　　１２　１，２３４
</div>
回答者：yambejp
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：
08/05/12 22:16
この回答への補足お礼の訂正です。
ありがとうございます。
<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
こんな漢字に表示されてしまします。

回答良回答10pt
ANo.2 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>
回答者：nda23
種類：アドバイス
どんな人：専門家
自信：参考意見
回答日時：
08/05/12 22:04
この回答へのお礼ありがとうございます。
&nbsp;を使わずにお願いします。
なぜ、このような質問をするかといいますと「COBOL」でhtmlというテキストファイルを出力するのですが、この場合、タイトル部は
「____数量______金額」とし(_はスペースの意）、
「ZZZZ,ZZ9ZZ,ZZZ,ZZ9」のように編集エリアを定義しますが、この時
12と1234の場合、
「______12_____1,234」となりますが、
この場合Webでは
「121,234」と表示されてしましますので。。
ちなみに文字種類は「MSゴシック」にしています。（プロポーショナルでは無い）

回答良回答20pt
ANo.1 いまいち何をやりたいのかわかりませんが、
<pre></pre>でインデントしたい部分を囲んでみてはいかが？
回答者：yambejp
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：
08/05/12 21:44
この回答への補足ありがとうございます。
試してみましたが「表示」がなぜかぐちゃぐちゃになってしまいました。
使い方があやまっているのでしょうか？
この回答へのお礼すみません。
質問にあやまりがあり、
例）「　　数量　　　　金額」
　　「　　１２　１，２３４」
-------
ところが、漢字スペースを入れても実際はくっついてしまい「１２１，２３４」のようにWeb表示されてしまいます。
半角スペースでも同様にくっついてしまいます。
たとえば「ESC」コードのようなスペースのように見える文字をスペース代わりに挿入することで可能になるのでしょうけど、どのようなコードがいいでしょうか？なにかいいアイデアはあるでしょうか？
でした。

回答ありがとうございます。
<pre></pre>で囲めば、見た目に表示されるのでしょうか。
試してみます。
最新から表示｜回答順に表示｜良回答のみ表示
このページのトップへ