HTMLまたはCSSなどを用いて、文字列間を3点リーダーで埋める方法を考えています。
例えば
くだもの……………………りんご
野菜…………………………人参
肉……………………………豚肉
のように左右の項目を「…」でつなぎます。文字列がすべて全角の場合には、「…」の数を調節して、頭合わせが出来ます。しかし、半角英数が入っている場合には文字列の幅が一定しないため、文字列の縦をそろえることができません。
くだもの……………………りんご
Books…………………………雑誌
野菜…………………………人参
Fishes………………………さば
↑頭がそろわない。
別の例で言えば、本の目次では見出しとページ番号を3点リーダーでつなぎますが、それと同じことをやりたいと思っています。
なにか良い方法がありますでしょうか。
No.4
- 回答日時:
無理矢理なら
<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>
こんな方法もあるのではないかと思いますが、どうでしょうか。
回答ありがとうございます。
試してみましたが、3点リーダーが「林檎」のすぐ右側まで届いていませんでした。左側の文字列の長さに応じて3点リーダーの長さが変化することを希望しています。
ほかに方法がありましたら、よろしくお願いいたします。
No.3ベストアンサー
- 回答日時:
1.三点リーダーを背景画像にする。
2.見出しにあたるもの入力
3.後ろにつくもの(ページ番号にあたるもの)を上にあわせて位置調整、かつ右揃えにする。
1.の背景画像はブロックで、2・3はインラインで背景を本物の背景色と合わせるというのはどうでしょう?
回答ありがとうございました。
No.2の方の回答と合わせて、実現できそうです。
・頭はtableでそろえる。
・3点リーダーは<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.1
- 回答日時:
そんなもの、奇数の半角文字の後ろに半角スペースをいれれば済むのでは?
まあ等角でやらないとどっちにしろずれるので、その調整は必要ですが。
<div style="font-family:monospace;">
くだもの……………………りんご<br>
Books ………………………雑誌<br>
野菜…………………………人参<br>
Fishes………………………さば<br>
</div>
ご回答ありがとうございます。
可能ならば、等幅フォントを使わずに実現したいと思っています。
ほかに良いアイデアがありましたらよろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) capeofdragonと申します Excel2016を使っておりまして 半角又は全角の任意文字列が 2 2022/10/31 13:51
- Java Java 南京錠 2 2023/02/04 11:46
- その他(プログラミング・Web制作) プログラミング pythonの問題について 2 2022/04/19 00:41
- Visual Basic(VBA) 特定の文字を簡単な操作で半角スペースに変換するか削除したい 2 2022/11/01 10:35
- その他(データベース) Accessのクエリで1フィールドの抽出条件設定をNullでなく全角半角含む空白のみの文字列でない文 1 2023/04/24 15:20
- マウス・キーボード macからリモートデスクトップでwindowsに接続した際のキーボード配列 3 2023/07/10 08:40
- Excel(エクセル) Excelの列から検索して該当する行を別シートに転記するVBA 2 2022/12/20 09:35
- Visual Basic(VBA) エクセルの数式で教えてください。 1 2023/07/31 15:49
- Visual Basic(VBA) EXCEL VBAで教えてください。 1 2022/12/22 04:20
- その他(プログラミング・Web制作) 2つのテキストファイルを比べて文字列を特定する方法を教えて下さい 5 2022/05/01 15:22
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【CSS】floatで左右に並べた...
-
divのheight指定で画面一杯に表...
-
クリッカブルマップとインライ...
-
【CSSハック】アンカーポイント...
-
css固定したフッターが本文と重...
-
CSSでdivの縦幅を指定する方法
-
htmlのstyleのposition:relativ...
-
HTMLですCSSです 画像のように...
-
文字を固定したいのですが…
-
HTMLですCSSです この画像のよ...
-
TABLEの高さを固定したいのですが…
-
ロールオーバーで画像拡大、z-i...
-
YES or NO形式で進んで行く、タ...
-
3点リーダーの作り方
-
大分類・中分類・小分類
-
positionのrelativeとabsolute...
-
Flickity で画像にリンクを貼る...
-
textareaで入力した文字を改行...
-
CSS <div>の入れ子が反映さ...
-
MAX関数を使ってからLEFT JOIN...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Ctrl+F(検索)の窓を出したいの...
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
HTMLですCSSです この画像のよ...
-
css固定したフッターが本文と重...
-
CSS <div>の入れ子が反映さ...
-
スクロール可能なチェックボックス
-
textareaで入力した文字を改行...
-
オンマウス時に別画像を上に重...
-
文字を固定したいのですが…
-
スタイルシートで画面を上下に...
-
チェックボックスの背景色って...
-
フッターの下に隙間ができてしまう
-
文字をクリックしたら別の文字...
-
大分類・中分類・小分類
-
HTMLですCSSです 画像のように...
-
CSSでdivのheightを動的に
-
★★★フッター最下部固定/スクロ...
-
離れた場所にマウスオーバーで...
-
htmlのstyleのposition:relativ...
おすすめ情報