ノートのように見える下線を文字の下に引きたい

質問

いつもお世話になっております。
ノートに文字が書いてあるような感じに文字に下線が引けないものかと思い、相談に伺いました。
<p><span style="border-bottom:1px solid #ccc;">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</span></p>
だと、下線は引けるのですが、行末の折り返しや文末の位置によって下線の左の位置がバラバラになってしまいます。
ノートのように、右と左がそろえることはできないでしょうか。いろいろと探したのですが見つからなかったので、ご存知の方がいらっしゃいましたらお願いします。

回答No.1

tenderfeel · ベストアンサー

<div style="background:url(note.png) repeat-y left top;line-height:20px">
テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br />
テキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>

1. ノートの線っぽい高さ20pxの画像を作って、行間の線は画像一番下に引いておきます
2. その画像の高さとline-heightの値を同じにして（line-height:20px）
3.画像の繰り返し方向をy軸に設定(repeat-y）
すれば出来ると思います。

お礼

ありがとうございました。
お礼が遅くなり、申し訳ありません。
なるほど、背景画像を使うのですね……！
とても勉強になりました。参考にさせていただきます。
ありがとうございました！

回答No.4

k0021

文字の下に下線が引はtext-decoration:underlineを使用しますが。
改行以降は引けませんが。
記述例。
<div style="text-decoration:underline;">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>

参考URL：

http://www.tohoho-web.com/css/reference.htm#text-decoration

お礼

お礼が遅くなり、申し訳ありません。
教えて下さった方法ですと、右の折り返しが揃わないため、質問をさせていただきました。
ご回答ありがとうございました。

回答No.3

font_color

こんにちは。

span要素にfont-family: monospace ;
で等幅フォントを指定すれば、折り返しはそろうと思います。
問題は文末の下線ですが・・。

文末にブロック要素(style="border-bottom:1px solid #ccc"）を加えて
span要素の最後の行の下線に重ねるようにposition:relative;を上手に使えば可能かと思います。
文字の大きさや行間、親要素の幅などで調整はかなり面倒ですが。

他の回答者様と同様に画像を使用したほうが一番早いかと思います。

お礼

お礼が遅くなり、申し訳ありません。
折り返しを揃える方法、また画像を使わずに済む方法を教えて下さってありがとうございます。
とても勉強になりました。参考にさせていただきます。
ありがとうございました！

回答No.2

abril

割と最近、同じ様な質問に答えました（qa4837348.html）。手法はANo.1様の仰っている通りですが、一つ注意しておかなければならない点があります。
クライアント側が「フルページズーム機能の付いたブラウザでフルページズームを行った場合」には崩れませんが、ズーム機能がないor使わずに「文字サイズ」の拡大縮小を行った場合にはノートの罫線とテキスト部分の間隔は保たれなくなりますのでズレが生じます。以下の記事等を読んでその点をよく認識しておかれた方が宜しいかと思います。

【参考】http://builder.japan.zdnet.com/comment/story/0,3800086213,20390076,00.htm

お礼

お礼が遅くなり、申し訳ありません。
教えていただいた質問、検索できてませんでした。教えて下さってありがとうございます。
また、No1様の補足もありがとうございます。
参考にさせていただきます。ありがとうございました！