文字列の下に点線を出す

質問

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

http://chu.benesse.ne.jp/cgi-bin/common/diary/view.pl?pGrade=3&action=1&opt=1

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

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

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

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

回答No.3

non_milky · ベストアンサー

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

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

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

お礼

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

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

回答No.2

UKY

典型的な方法は、

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

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

お礼

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

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

回答No.1

partita

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

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

お礼

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

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