テキスト部分の下線の装飾(色つき点線下線)

[統計] HTMLからXHTMLへの移行を進めていますか?



0   名前: はな : 2007/03/02(金) 17:00  ID:ck7SJeh2 sub-bK
文字の下に、下線を引く場合、
このタグ(<u>下線のイメージ</u>)で引けると思うのですが、
下線の色を変えたり、点線にしたりすることは出来ません。
この様なCSS混じりのタグを使ったところ、
<p style="color : red ; text-decoration : underline ;">
<span style="color : blue ; text-decoration : none ;">
下線のイメージ・文字色と下線色違う</span></p>
文字色と、下線の色をそれぞれ変更することが出来ました。
しかし、下線にすることが出来ません。
文字の下に点線の下線を引きたい場合、
ヘッド要素に
<style type="text/css">

<!--

hr.example3 {
border-style: dotted none none none;
border-top-width: 3px;
border-top-color: #336600;
height: 3px;
}
-->
</style>
文字の下に
<hr class="example3">
にするしかないのでしょうか?


1   名前: モノ ◆7YMtX/NYmu : 2007/03/02(金) 17:00  ID:TeHw2026 sub-Cl
border(この場合はborder-bottom)プロパティではなにか不都合があるのでしょうか。
あるのならば、それの何が不都合なのかを具体的に提示すると、
的確な回答を得られると思います。

2   名前: はな : 2007/03/02(金) 17:00  ID:ck7SJeh2 sub-bK
<p style="color : red ; text-decoration : underline ;">
<span style;="color : blue text-decoration : none ;">
下線のイメージ・文字色と下線色違う</span></p>
だと、下線が点線にならない。

<style type="text/css">

<!--

hr.example3 {
border-style: dotted none none none;
border-top-width: 3px;
border-top-color: #336600;
height: 3px;
}
-->
</style>
文字の下に
<hr class="example3">
だと、文字と線の間に隙間が出来てしまう。
ところで、border-bottomとは、何でしょうか?


3   名前: はな : 2007/03/02(金) 17:00  ID:ck7SJeh2 sub-bK
border-bottomで調べたところ、解決しました。
border-bottomだと、下線についていろいろとカスタマイズできそうです。
モノさんありがとうございました。

一覧へ戻る