３点リーダーの作り方

質問

HTMLまたはCSSなどを用いて、文字列間を３点リーダーで埋める方法を考えています。

例えば

　くだもの……………………りんご
　野菜…………………………人参
　肉……………………………豚肉

のように左右の項目を「…」でつなぎます。文字列がすべて全角の場合には、「…」の数を調節して、頭合わせが出来ます。しかし、半角英数が入っている場合には文字列の幅が一定しないため、文字列の縦をそろえることができません。

　くだもの……………………りんご
　Books…………………………雑誌
　野菜…………………………人参
　Fishes………………………さば
　　　　　　　　　　　　　↑頭がそろわない。

別の例で言えば、本の目次では見出しとページ番号を３点リーダーでつなぎますが、それと同じことをやりたいと思っています。

なにか良い方法がありますでしょうか。

回答No.3

ICHI-yan · ベストアンサー

1.三点リーダーを背景画像にする。
2.見出しにあたるもの入力
3.後ろにつくもの（ページ番号にあたるもの）を上にあわせて位置調整、かつ右揃えにする。

1.の背景画像はブロックで、2・3はインラインで背景を本物の背景色と合わせるというのはどうでしょう？

お礼

回答ありがとうございました。
No.2の方の回答と合わせて、実現できそうです。

・頭はtableでそろえる。
・３点リーダーは<td>の背景画像で描く。
・左側の文字列の背景を白色にする。

です。

<table>
<tr>
<td width="200px" style="background-image:url('dot.gif'); background-repeat:repeat-x;">
<span style="background-color:white;">くだもの</span>
</td>
<td>りんご</td>
</tr>
<tr>
<td style="background-image:url('dot.gif'); background-repeat:repeat-x;">
<span style="background-color:white;">Books</span>
</td>
<td>雑誌</td>
</tr>
</table>

回答No.4

noname#56851

無理矢理なら
<div style="width:200px;">
<div style="width:5em;float:left;">林檎</div>…………　実験<br>
<div style="width:5em;float:left;">夏みかん</div>…………　実験<br>
<div style="width:5em;float:left;">バナナ</div>…………　実験<br>
</div>
こんな方法もあるのではないかと思いますが、どうでしょうか。

お礼

回答ありがとうございます。
試してみましたが、３点リーダーが「林檎」のすぐ右側まで届いていませんでした。左側の文字列の長さに応じて３点リーダーの長さが変化することを希望しています。
ほかに方法がありましたら、よろしくお願いいたします。

回答No.2

noname#54215

＃１さんの言うとおり等角フォント使わないとどうせずれるんですが、そのためにフォント指定されても見るほうからすればね…

どうしても揃えたくてなおかつ等角使いたくないのであれば、テーブルに入れて無理やり揃える。
私は『テーブルでレイアウト』否定派ですが、質問者さんが気にしないのであればどうぞ。

お礼

回答ありがとうございます。
テーブルレイアウトでかまわないのですが、左右の項目間をどうやって３点リーダで繋ぐかに付いて悩んでいました。

No.3の方のアイデアと合わせると実現できそうです。

回答No.1

yambejp

そんなもの、奇数の半角文字の後ろに半角スペースをいれれば済むのでは？

まあ等角でやらないとどっちにしろずれるので、その調整は必要ですが。

<div style="font-family:monospace;">
くだもの……………………りんご<br>
Books ………………………雑誌<br>
野菜…………………………人参<br>
Fishes………………………さば<br>
</div>

お礼

ご回答ありがとうございます。
可能ならば、等幅フォントを使わずに実現したいと思っています。
ほかに良いアイデアがありましたらよろしくお願いします。