h3タグのCSS装飾

質問・疑問に答えるQ&AサイトOKWave

OKWave

[ 詳しく ]

FAQ（よくある質問）

法人向けサービス

質問する

○○だけど・・・？

解決済みの質問

Check

印刷

<< 前の質問 | 次の質問 >>

h3タグのCSS装飾

おせわになります。

h3テキストの左横にアイコンを設置し、
下線としてドットラインをひこうと思います。

アイコンをh3背景画像で表示し、
ドットラインをh3タグの外にdivをおき表示させているのですが、
ドットラインを表示させる為のだけのdivタグなので、
あまり良い方法とは思わないのですが、
他に良い方法はありますでしょうか？

▼HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>テスト</title>
<style type="text/css">

</style>
</head>

<body>
<div class="h3-dotline">
<h3>テキストテキスト</h3>
</div>
</body>
</html>

投稿日時 - 2007-04-16 17:08:58

連想キーワード：

通報する

QNo.2925992

moon333

困ってます

ブックマーク

質問者が選んだベストアンサー

first-letter ではいかがでしょう。

▼HTML
<h3>テキストテキスト</h3>

▼CSS
* { margin: 0; padding: 0; }
h3 {
background: url("…/dotline.gif") repeat-x left bottom;
padding-bottom: 5px;
zoom: 1;
}
h3:first-letter {
display: block;
background: url("…/arrow.gif") no-repeat left center;
padding: 2px 0 2px 20px;
vertical-align: baseline;
}

投稿日時 - 2007-04-25 20:23:55

お礼

　
度々のご回答をありがとうございます。

:first-letter　にはビックリしました。
私が望んでいたタグの簡潔化にも合致し、とても素晴らしいです。

Win IE6、IE7、FF2、Mac Safari2、FF2　の動作も問題ありませんでした。

大変勉強になりました。

投稿日時 - 2007-04-26 11:51:32

回答を評価する（0）

通報する

ANo.5

Questa

はい

3人が「このQ&Aが役に立った」と投票しています

[ 前へ | 次へ ]

ベストアンサー以外の回答（4件中　1～4件目)

ANo.4

grumpy_the_dwarf

IE6がCSS2のなにに対応していないのかは知らないのでアレだけど、
とりあえずdisplay: list-item;は大丈夫そうなので、beforeの代わりに

H3 {
　display: list-item;
　list-style-position: inside;
　list-style-marker: url("arrow.gif");
　}
H3.dotline {
　background: url("dotline.gif") repeat-x bottom;
　}

でオッケー。

投稿日時 - 2007-04-18 09:11:42

お礼

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

なるほど、
h3に「display: list-item」は勉強になりました！

「list-style-marker」というのは初耳で、
実際に検証してみたのですが、うまく表示されず、
list-style-image: url("arrow.gif");
で表示されました。

「list-style-marker」でググったのですが…よく分かりませんでした。

▼CSS
h3 {
display: list-item;
list-style-position: inside;
list-style-image: url("http://www.geocities.jp/ajax3210/arrow.gif");
padding-left:20px;
}

h3.dotline {
background: url("http://www.geocities.jp/ajax3210/dotline.gif") repeat-x bottom;
}

▼HTML
<body>
<h3 class="dotline">テキストテキスト</h3>
</body>

投稿日時 - 2007-04-18 17:04:19

回答を評価する（0）

通報する

ANo.3

Questa

DIVの代わりにSPANを使ってみました。

HTMLソースは多少きれいになりますが、
これもバッドテクニックだと思います。

ご参考までに……

(HTML)
<h3><span>テキストテキスト</span></h3>

(CSS)
h3 {
position: relative;
background:url("…/dotline.gif") repeat-x left bottom;
padding-bottom: 24px;
font-size:14px;
}
h3 span {
display: block;
width: 100%; height: 14px;
position: absolute;
top: 0; left: 0;
background: url("…/arrow.gif") no-repeat 3px 2px;
padding-left: 25px;
}