みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

文字列の下に点線を出す

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

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;
を試してみましたが。これはうまく行きませんでした。

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

投稿日時 - 2005-03-22 11:47:59

QNo.1283994

すぐに回答ほしいです

質問者が選んだベストアンサー

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

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

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

投稿日時 - 2005-03-22 13:26:04

お礼

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

やはりこれはHTMLとCSSの構造上、かなり難しいのですね…。

投稿日時 - 2005-04-05 16:52:49

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

UKY

典型的な方法は、

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

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

投稿日時 - 2005-03-22 12:03:40

お礼

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

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

投稿日時 - 2005-04-05 16:51:07

ANo.1

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

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

投稿日時 - 2005-03-22 11:58:28

お礼

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

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

投稿日時 - 2005-04-05 16:48:04

あなたにオススメの質問