文字と同じ幅で下線を引きたいのですが。。

文字の下に下線をスタイルシートを使って引きたいと考えています。

方法は <h1>ほげほげ</h1>とhで囲みスタイルシートで下線を設定しています。

しかし文字と同じ幅で下線を引く方法が分かりません。よろしくお願いいたします。

No.3 ベストアンサー 回答者： Kuppycat 回答日時： 2005/11/25 16:43

#1です。

#2のかたがおっしゃっているとおり、<h1>はブロック要素なので<span>を使ってインライン形式で指定しなければいけません。
<h1>をインライン形式にすることもできますがお勧めしません。

なので、たとえば

.UL { border-bottom:2px solid #ff0000; }

とCSSを設定し

<h1><span class="UL">さんぷる</span></h1>

としてはいかが？

この回答へのお礼

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

何とかうまくいきました。ありがとうございました。

お礼日時：2005/11/25 20:25

No.2 回答者： noname#21168 回答日時： 2005/11/25 14:29

<h1><span style="border-bottom:1px solid #000">ほげほげ</span></h1>

↑これでいかがでしょうか？

<h1>に対してborderを指定すると行全体に下線が引かれてしまうので，防ぐためには<span>を利用します。

（質問の意図をそのように理解しました）

この回答へのお礼

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

<span>をいれないで出来る方法はありませんでしょうか？実際に更新時の時に簡単にするため出来るだけ<h1>などで囲みたいと思っています。

よろしくお願いいたします。

お礼日時：2005/11/25 14:43

No.1 回答者： Kuppycat 回答日時： 2005/11/25 14:28

h1 { text-decoration: underline; }

で、できるはずですよ。

この回答へのお礼

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

このテキストデコレーションの線の太さや色などスタイルシートで調整できますか？

お礼日時：2005/11/25 14:41