下線と文字の間を調整するにはどうしたら良いのでしょうか。

質問

これまで、文章の一部に二重線の下線を引くときには、
<span style="border-bottom:double 3px"></span>といったやり方だったのですが、ＩＥ７などで見ると引いた下線と文字のあいだの隙間が広すぎるように思えてきました。この隙間を調整するにはどのようにしたら良いのでしょうか。
どなたか詳しい方ご教授くださいますようにお願いいたします。

回答No.6

abril · ベストアンサー

IE6.0/7.0での行送りの際の不具合について、検証してみました。やはり、前回の提案では、backgroundで下線を引いた場合、そこで行送りがあった際には送られた方の行にしか表示されない様でした。

そこで、改良を加えてみたのが下記案（これでも一部妥協がありますが…）です。
検証環境はIE6.0/7.0、Firefox2.0～、Opera9.25 on Windows XPです。

--------------------------------------------------------------------------------
【HTML】
--------------------------------------------------------------------------------
<p>(1)text-decorationで<strong class="hogehoge1">ここに下線</strong>を引く。引いた後の文章。</p>

<p>(2)border-bottomで<strong class="hogehoge2">ここに下線</strong>を引く。引いた後の文章。</p>

<p>(3)backgroundで<strong class="hogehoge3">ここに下線</strong>を引く。引いた後の文章。</p>
--------------------------------------------------------------------------------
【CSS】
--------------------------------------------------------------------------------
p {
font-size: 12px;
color: #000000;
line-height: 140%;
}
（ベースのフォント・サイズと行間を上記条件にした上での検証結果です）
strong.hogehoge1 {
font-weight: normal;
text-decoration: underline;
}
strong.hogehoge2 {
font-weight: normal;
border-bottom: double 3px #000000;
}
strong.hogehoge3 {
zoom: 1;
font-weight: normal;
background: url(../images/underline_double.gif) left bottom repeat-x;（W10px×H3pxの二重線の透過GIFを使用）
padding-bottom: 1px;（IE6以外は余白を入れないとテキストと若干重なります）
_padding-bottom: 0;（IE6では余白が必要ないのでIE6用hackで調整）
}
/* IE7 Hack */
*:first-child+html strong.hogehoge3 {
padding-bottom: 0;（IE7でも余白が必要ないのでIE7用hackで調整）
}
--------------------------------------------------------------------------------

上記を、丁度下線を引いた「ここに下線」の箇所で行送りがされる様に親要素の幅を決めて検証した場合、IE6.0/7.0でそれぞれ以下の様な表示（文章量が微妙に違うので、実際の文字送りは1文字ほどずれがありますが、わかりやすい様に）になりました。

--------------------------------------------------------------------------------
(1)text-decorationでここ（改行）
に下線を引く。引いた（改行）
後の文章。

(2)border-bottomでここ（改行）
に下線を引く。（改行）
引いた後の文章。

(3)backgroundで（改行）
ここに下線を引く。引い（改行）
た後の文章。
--------------------------------------------------------------------------------

(1)(2)に関しては既にご承知の通り検証環境のいずれでも問題なく同様の表示になります。で、問題の(3)ですが、"zoom: 1;"を追加する事で下線はマークアップした箇所全体に引かれる様になりました。zoomはIE独自の拡張属性なので、（元から不具合の見られない）他の環境では無視されるだけですので、影響ありません。ただし、IE6.0/7.0ではzoomの追加により下線を引いた箇所がワードラップ機能の様に「必ずひとかたまり」で扱われる為、行送りが発生した場合は、その箇所は他の環境での様に行をまたがってではなく、丸ごと次行へ送られます。他環境では(1)(2)同様、行をまたがって送られます。

これでいかがでしょうか？下線を引く文字列が4,5文字と想定されるのであれば、IE6.0/7.0では行送りで丸ごと文字列が送られて前の行末に若干多めの余白ができる可能性がある、ということさえ妥協していただければ、問題解決できると思うのですが…

お礼

検証頂いてありがとうございます。

"zoom: 1;"は勉強になりました。

ただ、依然として残る複数行に係る改行の問題はIE6.0/7.0の仕様？ということで、今後、マイクロソフトに改善をお願いしていきたいと思います。

このたびは何度もご検討頂き、ありがとうございます。重ねてお礼申し上げます。

回答No.5

abril

> 背景の透明な小さなgif画像を文字の下方バックグラウンドでリピートするというやりかたで、abril様の云われるものと似た方法

そうですね。ほぼ同じ考え方だと思います。

> その単語が行をまたぐ場合は適用できず、行ごとに指定することになり、とても不自由です。

えーと、これは実はIE6.0/7.0だけに起こる現象の様ですね。テキスト量を増やして検証してみましが、IE6.0/7.0以外のモダン・ブラウザではこの方法でも問題なく、行送りの場合でも対応されるので。先程からIEのない環境からチェックしていたので気づかなかった次第です。どうもIEには「インライン要素に背景画像を指定した場合、改行の際表示がおかしくなる」という困った現象が起きるみたいですね。ちょっとググってみたら下記の様な記事がありました。

http://blog.cgfm.jp/garyu/archives/142

質問者様はIEで表示結果を確認しておられる様ですし、なんと言っても最もメジャーなIEを無視するわけにもいかないでしょうから、この現象に対するIEへの対策ができないと、本件（インライン要素に適用する二重下線の隙間を詰めたい）の問題解決は困難ですね。後日（明日以降）IEで実際に検証してみますが、もしかしたら無理かもしれません。その場合は、残念ですが、現状（多少の隙間は妥協し、IEでも行送りや印刷に支障が起きないborder-bottomによる実装）で行くしかないですね。
もし検証する前に他の回答者様から質問者様のニーズを満たす解決案が出された場合は、スルーさせて頂きますのでご了承下さい。

> abril様はどのようにして行をまたぐ場合と送り出しに対応されているのでしょうか。

私自身は、今回の質問者様のご希望の様なスタイルを必要とした事が今までなかった（…多分。CSSとのお付き合いも長いので100%記憶しているわけではないですが。）ので、特にこのIEでの現象に対しての対応に迫られたことはなかったですね。

回答No.4

noname#84373

説明不足でごめん！
新しい方法を伝授！
まずはサンプルを！
http://www.raspberry.ne.jp/test.html
１週間ぐらいは有効にしておきます
理屈は簡単です
<span style="background:url(line.gif);">DEF jlm</span>
とします。
gif画像でアンダーラインの画像を作ります
大きさは8x20ドットくらい
線以外は透明にします
<span>領域の背景をその画像にします
画像が欲しければ
http://www.raspberry.ne.jp/line.gif
です

回答No.3

abril

> 該当部分だけ囲っているはずなのですが、なぜか一行分のラインになってしまいます。そして該当部分の後の文字は押し出されて次の行の先頭に移動します。

ANo.1-2の回答者様のサンプルは、<div>タグを使用されています。<div>はブロック要素ですので、この場合は「段落」と同様と考えて下さい。
ですので、コーディングが
--------------------------------------------------------------------------------
前の文章<div（スタイル省略）>この部分がラインを引く箇所</div>後の文章
--------------------------------------------------------------------------------
となっていれば実際の表示は
--------------------------------------------------------------------------------
前の文章（改行）
この部分がラインを引く箇所（改行）
後の文章
--------------------------------------------------------------------------------
となってしまいます。

質問者様のご希望は、文章中の「単語（４，５文字）の単位でラインを引きたい」という事ですので、スタイルを適用する箇所はインライン要素でマークアップされていなければなりませんね。二重下線を引くのは強調したい／注意を促したい箇所と考えると、<strong>や<em>の使用が相応しいかと思います。しかしながら、インライン要素にはline-heightやmargin-topのマイナス値などは適用されない為、サンプルでの解決方法は使用できません。
二重線を使うとなるとborder-bottomにならざるを得ないのですが、インライン要素では上記理由により隙間を調整できないので、どこか妥協して頂く必要があるかと。

＜妥協案その1＞
下線は二重線でなければだめでしょうか？もしシングルの下線で良いのであればborder-bottomではなく、text-decorationを使う、という方法があります。
--------------------------------------------------------------------------------
【HTML】
--------------------------------------------------------------------------------
<p>文章中の<strong class="hogehoge">ここに下線</strong>を引く。</p>
--------------------------------------------------------------------------------
【CSS】
--------------------------------------------------------------------------------
strong.hogehoge {
font-weight: normal;
text-decoration: underline;
}
--------------------------------------------------------------------------------
text-decorationを使用すると親ブロックのline-heightの影響を受けず常にテキストのベースラインにぴったりくっついた様な表示になりますので、現状よりはIEでの隙間も狭まると思います。

＜妥協案その2＞
二重線を画像 （水平方向にレンダリングさせるので、幅は10pxぐらいでかまいません）にし、backgroundプロパティで背景画像としてレンダリングさせるという手も。
--------------------------------------------------------------------------------
【CSS】
--------------------------------------------------------------------------------
strong.hogehoge {
font-weight: normal;
background: url(../images/underline_double.gif) 0 1em repeat-x;
}
--------------------------------------------------------------------------------
二重線画像を、そのインライン要素の上端から相対的に1つ分の高さまで下がった箇所で水平方向にリピートさせて表示する、という考え方です。ただしこちらは環境や条件によってその1emをどう解釈するかが変わってくる可能性がありますので、お奨めできるかどうかわかりません。実際の表示結果を試してからご検討下さい。

補足

abril様　回答ありがとうございます。

当方が二重線にこだわる理由は、原稿として紙ベースのものがあり、これをできるだけ見た目のとおりにHTMLでサイトに再現したいという目的のためです。また、白黒のプリンタで印刷することを前提にしているため、できるだけ背景色等には頼りたくないということもあります。

当方もその後、自分なりに勉強してみたのですが、abril様のおっしゃる背景画像に行き着きました。
<span style="background-image:url(画像);
background-position:bottom;background-repeat:repeat-x;"></span>
という方法を説明しているサイトが右記の通りありました。http://www.1uphp.com/con1/abc/underline-etc2.html
これは背景の透明な小さなgif画像を文字の下方バックグラウンドでリピートするというやりかたで、abril様の云われるものと似た方法のように思います。

ただ、これらの方法は、その単語が行をまたぐ場合は適用できず、行ごとに指定することになり、とても不自由です。先に単語は４、５文字と以前書きましたが、もっと長い一文もあり、テーブルの中に画像と文章を入れた場合、回り込みを指定すると２、３行に渡る場合もあります。そうした場合、最後の行にだけ下線が引かれる状態になります。

また、ブラウザが独自に行末に送り出し（禁則処理を含む）を行うので、基本のアンダーラインや前述の<span style="border-bottom:double 3px"></span>の表示のように必ず、文字の下に追いついてくるという状態にはならず、一字分だけ下線が引かれない表示になる場合があります。
もちろん、表の枠を調整して、送り出しをしない地点を見極めれば良いのですが、これもそれを含むページ全体のバランスの点からすれば、不自由であるように思います。

abril様はどのようにして行をまたぐ場合と送り出しに対応されているのでしょうか。
是非、ご教授いただきたくよろしくお願いいたします。

回答No.2

noname#84373

<div style="border-bottom:double 3px;line-height:90%;">aavcnjdvurihjq</div>
文字の高さを低く、余白をマイナス値に。
<sapn>じゃなくて<div>に。

補足

ご回答頂きありがとうございます。
早速試してみたのですが、該当部分だけ囲っているはずなのですが、なぜか一行分のラインになってしまいます。そして該当部分の後の文字は押し出されて次の行の先頭に移動します。
当方は単語（４，５文字）の単位でラインを引きたいのですが、当方のやり方がまずかったのでしょうか。cssファイルを作って試してもみたのですが同じ結果でした。なにぶん、初心者なもので基本的なことが抜けているのかもしれませんが、何か見落としそうなことはあるでしょうか。

回答No.1

noname#84373

<div style="border-bottom:double 3px;line-height:300%;margin-top:-10px;">abcvfdivufdi hu</div>
とかは？