連続した空白を入れたい時は<pre>と&nbsp;

連続した空白を入れたい時は<pre>と

こんにちは、サンタと申します。

連続した空白を入れたい時は<pre>とは、どのようにして挿入することが、適宜なのでしょうか？

ソースですが、ul,listタグを使用して、2列にしております。

りんご□□□□□\50 メロン \10
ぶどう□□□□\3000 ミカン \10000

最後の「０」を揃えたいと思います。

ご覧のとおり、りんごと葡萄と比べましたら半角２つ分、りんごの方が空白が多いです。
こういう時に、
などと、の連続はしても宜しいのでしょうか？
または、
<pre></pre>タグを使用したほうが良いのでしょうか？

ソースですが、ul,listタグを使用して、2列にしております。
宜しくお願い致します。

xhtml
--------------------------
<ul>
<li>りんご/&yen30</li>
<li>メロン/&yen;10</li>
<li>ぶどう/&yen;3000 </li>
<li>みかん/&yen;10000</li>
</ul>
----------------------------

css
----------------------------
#con_main ul {
font-size:90%;
margin-left:10px;
padding: 0;
width: 350px;
float:left;
list-style: none outside;
text-align:left;
}

#con_main ul li {
margin: 0;
padding: 0;
float: left;
width:174px;
}

No.1 回答者： t_ohta 回答日時： 2011/12/13 15:13

表形式で表示したいのであればtableを使うのが一番。

右揃えは text-align:right; で揃えましょう。

この回答へのお礼

t_ohta 様

ありがとうございます。
tableで良いのですね。リストにしたほうが良いと思っておりました。
text-align:right;
でやります。

ありがとうございます。

お礼日時：2011/12/13 17:09

No.2 回答者： noname#158634 回答日時： 2011/12/13 15:31

#1で終了してるけど一応追加。

＞の連続はしても宜しいのでしょうか？
問題ない。
＞<pre></pre>タグを使用したほうが良いのでしょうか？
<pre>がふさわしい場所ならね。今回<pre>が使えたとして、じゃあ使っていい場所なのかどうかご自分で考えてください。

＞最後の「０」を揃えたいと思います。
IEデフォルトの「MS Pゴシック」で見る場合、全角文字の組み合わせによってはどう頑張っても永久に揃わないケースがあります。なのでスペースでどう頑張ろうが意味がない。

ついで。
＞ul,listタグを使用して
<li>は「L」ist「I」temの略。

この回答へのお礼

tk-is-pg_1206 様

ありがとうございます。
&nbsp;の連続でも良いのですね。わかりました。
<pre>ですが、ふさわしい場所かどうか、PREformatted textという意味だそうですが、整形済みテキストにしようと思えば、できますが、&nbsp;の方がふさわしい場所かどうか、判断がつきかねました。

＞IEデフォルトの「MS Pゴシック」で見る場合、全角文字の組み合わせによってはどう頑張っても永久に揃わないケースがあります。なのでスペースでどう頑張ろうが意味がない。

そうですね。考えが抜けておりました。デフォルトでは、
ヒラギノ角ゴ Pro W3
を使用しております。

＞<li>は「L」ist「I」temの略。

ありがとうございます。勉強になりました。

お礼日時：2011/12/13 17:17

No.3 ベストアンサー 回答者： ORUKA1951 回答日時： 2011/12/13 16:57

価格表なら、tableを使えば済むことです。

★デザインのために意味のない、preやを入れるのは間違いです。

<table class="priceList" border="1" summary="価格表">
＿<tbody>
＿＿<tr>
＿＿＿<td>りんご</td><td>&yen;30</td>
＿＿</tr>
＿＿<tr>
＿＿＿<td>メロン</td><td>&yen;10</td>
＿＿</tr>
＿＿<tr>
＿＿＿<td>ぶどう</td><td>&yen;3000</td>
＿＿</tr>
＿＿<tr>
＿＿＿<td>みかん</td><td>&yen;10000</td>
＿＿</tr>
＿</tbody>
</table>
[CSS]
table.priceList{border-collapse:collapse}
table.priceList td{width:5em;}
table.priceList td+td{
＿text-align:right;
}
古いブラウザ対応なら二番目の<td>を<td class="price">にして
td.price{
＿text-align:right;
}

　これが表ではなく、リストでのマークアップの方が適しているなら、
<ul class="priceList">
＿<li>りんご<span>&yen30</span></li>
＿<li>メロン<span>&yen;10</span></li>
＿<li>ぶどう<span>&yen;3000</span></li>
＿<li>みかん<span>&yen;10000</span></li>
</ul>

[CSS]
ul.priceList,ul.priceList li{list-style:none;display:block;margin:0;padding:0}
ul.priceList{width:10em;border:solid black;border-width:1px 1px 0 1px;}
ul.priceList li{width:100%;position:relative;border-bottom:solid 1px black;}
ul.priceList li span{display:block;width:5em;position:absolute;right:0;top:0;border-left:solid 1px black;text-align:right;}

この回答へのお礼

ORUKA1951 様

すみません、いつも、ありがとうございます。
そうですね、
「果物」「値段」
「果物」「値段」
「果物」「値段」
の繰り返しですので、素直にテーブルでもよかったのですね。
ソースを書いてくださって、ありがとうございます。
今回は、テーブルを使おうと思ういます。

table,list,dldtddの使い分けって、考えてしまいます。tableは今では余り使用しないと思っておりました。

解決しました、ありがとうございました。
失礼致します。

お礼日時：2011/12/13 17:27