でもこれ、ちょっと見辛くないですか？
…抹消線がもっと太ければ良いのに。
あまつさえ、色まで付けられたなら…
──そう、
…まず初めに言いますと、今回も例によってスタイルシートを使います。動作確認はＩＥ６です。…例えば、上記の例文のソースはこう書かれています。
そう、<nobr><span style="font-family:ＭＳ ゴシック,Osaka-等幅;"><span style="position:relative; color:red;"><span style="position:absolute;">━━━━━━━━</span></span>例えばこんな風に</span></nobr>！
簡単に言うと、『例えばこんな風に』 を書いた後に、もう一度同じ位置から罫線の 『━━━━━━━━』 を上書きしているわけです。
color:red;の部分で、罫線の色を付けています。別の色を指定しても良いし、何も指定しなければ文と同じ色になります。
外側でフォント名を指定しているのは、等幅フォントを使う事で文と罫線の長さを同じにする為です。通常使われているプロポーショナルフォントだと、長さが違ってしまいますからね。文章全体を等幅にしている場合は要りません。
最外側の<nobr>タグも存外重要です。と言うのも、何故か罫線部分には自動改行が働いてくれないからです。
| ──そう、━━━━━━━━例えばこんな風に！ |
…こんな風に（笑）。文は自動改行されるのに、罫線はされないのでこうなるわけです。なので、文も罫線も途中では改行されないように<nobr>で囲んでやればこうなります。
|
──そう、 |
英単語がインデントされるような感じですね。普通はこれで事足りると思いますが、対象の文があまりに長い場合はやはり不都合があるので、途中で改行しても良いポイントを指定してやります。
そう、<nobr><span style="font-family:ＭＳ ゴシック,Osaka-等幅;"><span style="position:relative; color:red;"><span style="position:absolute;">━━━</span></span>例えば<wbr><span style="position:relative; color:red;"><span style="position:absolute;">━━━━━</span></span>こんな風に</span></span></nobr>！
|
──そう、 |
こうして細かく区切れば区切るほど見た目は自然になります。一字毎に指定してしまえば完璧です（その場合は</nobr>や</wbr>も不要）。…しかしこうなって来ると記述も大変だしソースもかなり見辛くなりますねぇ。クラス化してしまいましょう。
<html>
<head>
<style type="text/css">
<!--
.s1 {
font-family: ＭＳ ゴシック,Osaka-等幅;
}
.s2 {
position:relative;
color: red;
}
.s3 {
position:absolute;
}
-->
</style>
</head>
<body>
：
：
そう、<nobr><span class="s1"><span class="s2"><span class="s3">━━━</span></span>例えば<wbr><span class="s2"><span class="s3">━━━━━</span></span>こんな風に</span></nobr>！
<head>
<style type="text/css">
<!--
.s1 {
font-family: ＭＳ ゴシック,Osaka-等幅;
}
.s2 {
position:relative;
color: red;
}
.s3 {
position:absolute;
}
-->
</style>
</head>
<body>
：
だいぶスッキリしましたね（＾＾
ちなみにスタイルシートで行間をあけているような場合は、罫線の縦位置がズレる場合があるようです。その場合、上記で言えばクラスs3の部分でtop:-0.2em;等のように縦位置の「ズレ」を指定して調整してやると良いでしょう。
