テキストに常に下線を引きたい

質問

テキストに常に下線を引きたい

プログラミング＞HTML
にて質問させて頂いたのですが、CSSだけでは上手にいかず、ではJavaScriptと多様すれば・・・！？とか思って再度、こちらにて質問させて頂きました。

↓前回のやりとり
http://okwave.jp/qa/q6225851.html

質問内容は前回と同じで、テキストに常に下線を引きたい場合にはどうすれば良いのでしょうか？と言う事です。

[例]
下記のように、常に、大学ノートのように下線を引きたいのです。(下線は破線ではなく、直線で構いません)

《HTML》
<p>あいうえおかきくけこ<br />さしすせそたちつてと<br />なにぬねのはひふへほ</p>
<p>あいうえおかきくけこ<br />さしすせそたちつてと</p>

《画面表示》

あいうえおかきくけこ
-----------------
さしすせそたちつてと
-----------------
なにぬねのはひふへほ
-----------------

-----------------
あいうえおかきくけこ
-----------------
さしすせそたちつてと
-----------------

注意1）ｐタグとｐタグの間にmarginを空けても（テキスト1行分）下線が付くようにしたい。
注意2）ユーザー側が文字サイズを変更しても、下線の上に文字が重なる事がないようにしたい。（ですので、background-imageによる直線のみの画像の配置は論外です）

以上の2つの注意を回避して実現したいのですが、可能でしょうか？可能ならばソースを教えて下さい。よろしくお願い申し上げます。

回答No.7

think49 · ベストアンサー

#2, 3 です。

#3 は考え落ちでした。やはり、#2 のように position を使う必要があります。
他にも見落としがあるかもしれませんが、CSSのボックスモデルを理解した上で試行錯誤すればおそらく実現可能だと思います。
(div要素は #6 さんが掲示されたように hr要素に変更した方がスマートですね。)

ボックスモデル - CSS2リファレンス
http://hp.vector.co.jp/authors/VA022006/css/box.html#introduction-box
Box model
http://www.y-adagio.com/public/standards/tr_css2/box.html

> 出来ればサンプルソースを表記して頂けないでしょうか？
サンプルは…気が向いたら作ります。
原理的には可能だと思いますが、複雑な上に自身で使う機会がないので制作意欲がわきません。

私の知る限りでは、CSS2.1 までには 行 (自動改行) を判定する方法がありません。
文章はインラインボックスで括られますが、質問者さんの求める罫線はブロックボックスの挙動です。
つまり、CSS のみで質問者さんの挙動を実現することは不可能で CSS で実現させようとすると、どこかで妥協が必要になります。

・br要素のみで改行するものとする (自動改行を考慮しない)
・font-size を固定する

強制改行のみで良いのなら、それほど難しくはないのですが…。

gist: 614981 - setLineElementByBRElement.js : br要素区切りのノードを <div class="l"> で括る。大学ノート風のデザインを実現できる。- GitHub
http://gist.github.com/614981

お礼

再度ご回答頂き、誠にありがとうございます。

URL等表示して頂き、ありがとうございます。・・・自分も意欲が萎えました。
皆様からのご意見を元に妥協する事にしました。いろいろとアドバイスして頂き、本当にありがとうございました。

回答No.6

babu_baboo

どのみち、<br>なんてのを、もちだすていどの、ぶんしょこうぞうなら、
じぶんで そのつど <hr> したら？

<style type="text/css">
div hr {
height: 1px;
border: none;
border-top: 1px #000000 dotted;
margin: 0;
}
</style>

<div>
あいうえおかきくけこ<hr>
さしすせそたちつてと<hr>
なにぬねのはひふへほ<hr>
</div>

補足

ご意見ありがとうございます。

じぶんで そのつど <hr>して解決するならば、一番簡単で世話なく良いですね！
しかし、文章は長くどう考えても改行されてしまうこと必須なので、この方法は使えません。

回答No.5

JaneDue

#ANo4.さんの仰る通りだと思いますよ。
固定サイズで背景画像がベストだと思いますが、どうしてもと仰るのなら
フォントサイズを取得 >> 背景画像を変更
それが一番シンプルで素直な感じがします。

予想されるフォントサイズの背景画像を画像を 20～30枚位? 用意しておくか、
または動的に背景画像を生成してやるかでしょうね。
毎回生成するのも何ですので、やっぱり準備しておく方かな。

お礼

＞固定サイズで背景画像がベスト
そうですね。その方法をとりたいと思います。

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

回答No.4

wisize

一応こういうことでご飯食べてる人間です。

注意2で論外とされていますが、
#1の方の仰るような「文字サイズ固定」でも構わないのでしたら、
そのサイズに合わせて背景画像を用意してしまえばいいのでは？
BODYの背景ではなくPなどの背景にすれば、ある程度の問題は解決しますし。

ちょっととっさにサンプルが出せずに申し訳ないのですが、
既存のサイトはほとんどそのような方法をとっていると思います。

端的に言ってしまえば、
HTMLの構造的に、画像を使わずにご希望のレイアウトを作ることは不可能です。
では文字サイズの変更に対応できるようにするとなると、JSを使った力業にどうしてもなりますが、
組むのが面倒な上に、理想通りに行くかどうかも微妙で（大きく制限がつきます）、
そもそも閲覧者に対する負担も大きくなってしまう場合が多いです。

本来の目的を考えて、どこかしらで妥協するのがベターだと思いますよ。

お礼

ご回答誠にありがとうございます。

実はクライアント様からの要望で、「大学ノート風のデザインにして欲しい」と言われました。条件もその時言われ（ユーザー側で文字サイズが変更出来るようにしたい等）、自分もそりゃ無理だろう！と思ったのですが、自分が無知で知らないだけで、やり方があるのか？？と思ってこちらで質問させて頂いた次第です。

そんな次第ですので、出来ないなら出来ない！と言って貰えた方が自分としても大変助かります。文字サイズ固定で背景画像を使いましょう。と提案出来るので・・・。

不可能　とおっしゃって頂き助かります。妥協します。ご意見本当にありがとうございました。

回答No.3

think49

#2 です。

position ではなく、margin で距離を取った方がスマートですね。

1. 対象の要素を <p id="Target"> とする (以降、#Target と記す)
2. getComputedStyle() で #Target の line-height, width, height, padding を得る
3. <div style="margin-top: (#Target のline-height値)px; border-bottom: solid 1px black;"></div> を appendChild() する
4. 3. で使用した要素ノードを「margin-top値を line-height の整数倍」に変更して、#Target の height値を超えるまで appendChild() する

お礼

ご回答頂き、誠にありがとうございます。

ただ、大変申し訳ないのですが、私の力不足で、あまりJavaScriptには詳しくなく、書いて下さっている事が半分くらいしか理解出来ません。

本当に申し訳ないのですが、出来ればサンプルソースを表記して頂けないでしょうか？よろしくお願い申し上げます。

回答No.2

think49

計算が面倒ですが、こんな方法しか思いつきません。

1. 対象の要素を <p id="Target"> とする (以降、#Target と記す)
2. getComputedStyle() で #Target の line-height, width, height, padding を得る
3. <div style="position: absolute; top: (#Target padding-top + line-height)px; width: (#Target のwidth値)px; border-bottom: solid 1px black;"></div> を appendChild() する
4. 3. で使用した要素ノードを「#Target padding-top + line-height の整数倍」に変更して、#Target の height値を超えるまで appendChild() する

getComputedStyle - MDC
https://developer.mozilla.org/ja/DOM/window.getComputedStyle
currentStyle Object (A, ABBR, ACRONYM, ...)
http://msdn.microsoft.com/ja-jp/library/ms535231(VS.85).aspx
getComputedStyle について調べてたら深みにハマったのでメモ - IT戦記
http://d.hatena.ne.jp/amachang/20070611/1181554170

positon: absolute; はそのまま使うと <html> を基準値とするので、#Target を position: relative; にするか、Element.offset* で #Target の位置を割り出す必要があります。

element.offsetTop - MDC
https://developer.mozilla.org/En/DOM/Element.offsetTop
Element.offsetLeft - MDC
https://developer.mozilla.org/Ja/DOM/Element.offsetLeft
要素の座標@javascript
http://www-toralab.ics.nitech.ac.jp/users/kak/weblog/1011b/%E8%A6%81%E7%B4%A0%E3%81%AE%E5%BA%A7%E6%A8%99_javascript.html

# 「要素の座標@javascript」は未検証です。

回答No.1

yyr446

いっその事、1行分の文字数を固定にしておいて、
javascriptで文字数に足りない分、半角スペース(&nbsp;)でも
連結してしまうとかだめですかねえ。

　ああ、それでも<br>が入ると同じ状況か...

お礼

何度も考えて頂き、本当にありがとうございます。

また何か、良い<br>の回避方法がございましたら、ご意見お聞かせ下さい。よろしくお願い申し上げます。