- ベストアンサー
h3タグのCSS装飾
- h3タグを使ったテキストにアイコンとドットラインを装飾する方法
- h3タグの背景画像とdivタグを使用してアイコンとドットラインを表示する方法について
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
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; }
その他の回答 (4)
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
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; } でオッケー。
お礼
ご回答ありがとうございます。 なるほど、 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>
- Questa
- ベストアンサー率48% (13/27)
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; }
お礼
ご回答、ありがとうございます。 やはりspan等の追加になるのですね。 他、やり方があればお願いいたします。
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
h3:before { content: url("ajax3210/arrow.gif") } h3.dotline { border-bottom: dotted } とか。
お礼
ご回答、ありがとうございます。 たしか、「:bofore」はIE6には対応していませんよね？ 対応していれば解決なんですけどね。 borderのdottedは下でも書かせて頂いた通りで、 背景画像を使用した場合で解決したいと思っています。
- hisa-gi
- ベストアンサー率29% (93/311)
画像を使わず、h3自体に border-bottom:1px solid #006600; といった感じで指定すれば良いのではないでしょうか？ そうすれば、画像を変更せずに太さや色も自由に変えられますし。
お礼
ご回答、ありがとうございます。 border-bottomは考えていたのですが、 IE6とFFとの表示が異なる為、背景画像にしました。 また、ドットの間隔も広めに取りたいので、 背景画像で表示させたいという訳です。
お礼
度々のご回答をありがとうございます。 :first-letter にはビックリしました。 私が望んでいたタグの簡潔化にも合致し、とても素晴らしいです。 Win IE6、IE7、FF2、Mac Safari2、FF2 の動作も問題ありませんでした。 大変勉強になりました。