文字列の下に点線を出す

文字列の下に点線を表示させる。
ということをＣＳＳでやれませんでしょうか？

http://chu.benesse.ne.jp/cgi-bin/common/diary/vi …

このページで「うう、昨日フィットネスクラブ…」という文章で表示されているような形式です。

┏━━━━━━┓
┃文章はセルで┃
┃- - - - - - ┃
┃区切らずに。┃
┃- - - - - - ┃
┗━━━━━━┛
━テーブル

DIVタグに点線の背景を敷き詰める方法
background-image:url(URL);background-repeat:repeat-x;
を試してみましたが。これはうまく行きませんでした。

何か良い方法をご存知の方、宜しくお願いします。

No.3 ベストアンサー 回答者： non_milky 回答日時： 2005/03/22 13:26

ノート風に、文字がない部分にも罫線が存在しないと

いけないんですよね？
しかも、
＞文章はセルで区切らずに。
という制約付きでCSSだと、考えてみたのですが…難しいと思います。

参考に、下記のサイトをご覧ください。
▼ノート風の罫線
http://deztec.jp/lecture/folio/06/

様々な方法を検証した上で「文字サイズ固定＋背景画像」の方法が薦められています。
この方法の場合、まず文字のサイズを固定すること。
その上で、#1さんが仰るように文字の行間を調整することが必要です。

この回答へのお礼

参照ＵＲＬ、大変参考になりました。
ありがとうございます。

やはりこれはＨＴＭＬとＣＳＳの構造上、かなり難しいのですね…。

お礼日時：2005/04/05 16:52

No.2 回答者： UKY 回答日時： 2005/03/22 12:03

典型的な方法は、

<span style="border-bottom: 1px dashed">下線付き文字</span>

DIVやPなどのブロックレベル要素ではなく、SPANやEMなどのインライン要素のborderを使うのが味噌。

この回答へのお礼

ありがとうございました。

これでもうまくいきますね。
惜しむべくは点線と文字がくっつきすぎてしまうことでしょうか…。
点線と文字を話す離す方法を考えてみましたが、これはかなり難しそうでした。

お礼日時：2005/04/05 16:51

No.1 回答者： partita 回答日時： 2005/03/22 11:58

DIVタグに点線の背景を敷き詰める方法

background-image:url(URL);background-repeat:repeat-x;
を試してみましたが。これはうまく行きませんでした。

とありますが、line-heightを調整すればうまくいくのでは？

この回答へのお礼

回答ありがとうございます。
背景の点線に合わせる方法だと、ブラウザごとにＣＳＳの読みわけをしないといけないので、別の方法はないかと模索していました。

ご回答ありがとうございました。

お礼日時：2005/04/05 16:48