- ベストアンサー
テキストに常に下線を引きたい方法
- テキストに常に下線を引きたい場合には、CSSの記述を使用することができます。
- pタグとpタグの間にmarginを空け、ユーザーが文字サイズを変更しても下線の上に文字が重ならないようにすることができます。
- CSSでの実現方法が難しい場合は、JavaScriptを使用することもできます。
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
出来ました。かなり、フォントとか環境に依存しそうですが。 <p><span>てきすと……てきすと</span></p> p { margin : 2em 0 2em 0 ; padding : 0 0 0 0 ; line-height : 2.0 ; color : black ; background-color : white ; border-bottom : 1px solid red ; } span { background-color : white ; padding : 0.4em 0 0.45em 0 ; border-top : 1px solid blue ; border-bottom : 1px solid red ; } MacOSX Firefox で確認したけど、フォントによって微調整が必要な予感。 borderの色が違うのは、確認しやすいように。
その他の回答 (6)
- shokodei
- ベストアンサー率33% (2/6)
ごめんなさい。だめですね。 行端まで文字が達する前にbrでの強制改行が複数回連続すると、罫線が表示できませんね。 うーん、残念。
- shokodei
- ベストアンサー率33% (2/6)
えーと、解決策ではないんですが、擬似的な力技を。 <p><span>てきすと……てきすと</span></p> CSSは、こんな感じで。 p { margin : 1em 0 1em 0 ; padding : 0.1em 0 0.1em 0 ; line-height : 1.6em ; color : black ; background-color : blue ; } span { background-color : white ; padding : 0.2em 0 0.2em 0 ; } MacOSX Firefox だと、それなりに見えます。但し、行末が揃ってないと、背景色が出て来ちゃってナニです。
- yyr446
- ベストアンサー率65% (870/1330)
後は、大学ノートのように下線を引いた画像を別途用意して、 背景画像、又は透明にして<img>で張り付けて、 位置は、position:absoluteした上で、javascriptでも使って サイズ変更やスクロールの都度都度、位置を計算し、設定しなおす。 ぐらいしか、思いつきません。
補足
こちらの案については、他に良い案がなければ試してみたいと思います。 回答誠にありがとうございました。 余談ですが、 前にテーブル良い案だと思ったのですが、良く考えたら結局、<td></td>内で文字が改行されたら一番下の線しか表示されない事は一緒なので、ダメやんか・・・。と思いました。出来ると思ったのは自分の勘違いでした。すみません。
- yyr446
- ベストアンサー率65% (870/1330)
幅を固定したボックスのボーダーのみ表示させる。 <style type="text/css"> div.note_line {width:500px;border-bottom:1px solid gray;} </style> </head> <body> <div class="note_line"><p>あいうえおかきくけこ</p></div> <div class="note_line"><p>さしすせそたちつてと</p></div> <div class="note_line"><p>なにぬねのはひふへほ</p></div> <div class="note_line"><p>あいうえおかきくけこ</p></div> <div class="note_line"><p>さしすせそたちつてと</p></div> </body> こんなのテーブルを使えってか。
補足
ご回答誠にありがとうございます。 ですが、これではANo.2の回答者様と同じで、設定された横幅を超えて文字が改行された場合、やぱりdivで囲われたboxの下線しか表示されません。せっかくご回答下さって誠に恐縮ですが、これでは私の理想には程遠いです。 テーブルも考えたのですが、これだともしまた、テーブルを使い時に入れ子状態になってしまい、ソースタグがごちゃごちゃして見ずらくなってしまうしWAI的にどうなのさ？と思って、良い案なのですが出来れば使いたくありません。ホント申し訳ありません。 やはり大学ノートのように、「均等な線が引かれた所に、線に文字が重ならないように表示させる」 と言うのは実現不可能なのでしょうか？ 他に何か良い方法がございましたら、又よろしくお願い申し上げます。
意味が良く理解できません。 Pの行高指定して、アンダーラインを引くだけのこと。。 P { line-height:2em; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #999999; }
補足
早速のご回答誠にありがとうございます。 ですが、これではｐタグで内の下線部分しかアンダーラインが引けません。 例えば、width:700pxで画面の横幅を設定したとして、 《HTML》 <p>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほ</p> たちつてと の次から横幅700pxいっぱいになり、次の文字、なにぬねの～ から改行になったとします。 そしたら、なにぬねのはひふへほ 部分しか下線が引けません。 大学ノートのように、決まった横幅いっぱい罫線が引いてある状態に、罫線に重ならないように文字を表示させたいんです。 説明が足りず、誠に申し訳ございませんでした。他に何か良い方法がございましたら、又よろしくお願い申し上げます。
- 0x131cc6e
- ベストアンサー率36% (42/115)
普通に、 p { text-decoration: underline ; } じゃダメなんですか？
補足
早速のご回答誠にありがとうございます。 こんな感じなのですが、ちょっとこれだと問題があって・・・。すみません、これではダメです。 例えばwidth:700px; で横幅を設定した場合、これだとテキスト部分しかアンダーラインが引かれません。もし、最後の行が左3文字分で終わってしまった場合、残りの文字数の下には下線が引かれません。やろうとしている事は、大学ノートのように横幅いっぱい下線がひいてある状態にしたいんです。 あともう一つ、これだと、ｐタグとｐタグの間にmarginを入れた場合、最初の行の上に線が引けないので、どうしたもんかと・・・。 《CSS》 p {text-decoration: underline ;} .box{boeder-top:#000000 1px solid;} 《HTML》 <p class="box">あいうえおかきくけこ<br />さしすせそたちつてと<br />なにぬねのはひふへほ</p> <p class="box">あいうえおかきくけこ<br />さしすせそたちつてと</p> とも考えたのですが、これでは下線間の行間が上手く取れず、断念しました。 説明が足りず、誠に申し訳ございませんでした。他に何か良い方法がございましたら、又よろしくお願い申し上げます。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_3_thumbnail_img_sm.png)
補足
ありがとうございます！大分理想に近づきました！！ そうですね、br改行と端まで線が綺麗にいかない事が難ですが・・・。やはりなかなか難しいもんなんですね～（汗） しかし大変参考になりました。何度も貴重な回答、本当にありがとうございました。