css のH1である文字を設定するには

質問

外部スタイルシートにH1,H2,H3...を定義したいのですが、たとえば、
◎～～～
となるように、最初の◎をCSSに書き込んでおくにはどうすればいいのでしょうか？文字が無理なら画像でもかまいませんが、その場合はどのように書くのでしょうか？
よろしくお願いいたします。

回答No.4

naokita · ベストアンサー

IE対応が思いつかない・・・（出来ない？）
テーブルで
hの見出し行を列分けして左tdに◎　右tdに各h1,2,3にして◎をスタイル
（かなり面倒です）boderは0
　------------------------------
｜◎｜タイトル　　　　　　　　　　　　　｜
　------------------------------

画像ならh123まとめて（簡単です）
h1,h2,h3{
padding-left: ●●の横幅px ;
background: url(●●.jpg) no-repeat ;
}

お礼

回答、ありがとうございまいした。
教えていただいた方法でうまくいきました。ただ、画像がちょっと合っていないので、適当な大きさのを選ばないといけないのですが。

回答No.5

steel_gray

他の方の回答とかぶりますが
:before content:"◎"を使ったやり方がIEが対応していないので背景画像とする方法がご要望に近いかと思います。

h1,h2,h3 {
background-image:url(◎画像のurl);
background-repeat:none;
background-position:left center;
text-indent:??px;※1
}

※1　画像の幅だけ左側を空ける。paddingでもいいんだけど全体幅指定(width)をする場合はちょっと面倒になるのでindentもお勧め。(行の折り返しがあるなら使えないけど)

なお、背景画像は印刷で無視されるケースがあるのでそれが問題になりそうなら小細工なしでテキストを書き加えるしかないかも。

お礼

回答、ありがとうございました。実は画像のは＃１の方に教えていただいてやってみたいのですが、うまくいきませんでした。もう一度挑戦してみます。

回答No.3

Tacosan

今ある h1 { .... } はそのままにしておいて, 別の行に h1:before { .... } を入れればいいんですけど.
ただ, この :before とか :after って擬似要素は IE ではサポートしてないみたい. Firefox など, 他のブラウザではちゃんと見えるかも.

お礼

おっしゃるとおりでした。firefoxではうまくいきましたが、IEではだめでした。やはりIEで表示できるようにしたいので、ほかの方法を試してみます。
ありがとうございました。

回答No.2

Tacosan

CSS としては
h1:before { content: "◎"; }
でいいんですが, ユーザエージェント (ブラウザ) が対応しているかどうかはしりません.

お礼

回答、ありがとうございました。
CSSは
h1 { color: navy;
margin: 1em 20}
という感じで書いているのですが、
h1:before { content: "◎"; }をどのように入れればいいのかわかりません。いろいろ試してみましたがうまくいきませんでした。ブラウザはIEです。

回答No.1

aqucent

<h1>タイトル</h1>　で「◎タイトル」と表示したいという事ですか？

リストなら list-style-type で可能ですが、見出しのタグでは無理かと思います。
裏技的には、背景画像を指定すればいけるかもしれませんが…。

h1 { background-image:url(./back.gif); background-repeat: norepeat; padding-left: 1em }

# ↑は未検証です。

お礼

＞<h1>タイトル</h1>　で「◎タイトル」と表示したいという事ですか？

はい、そのとおりですす。

画像のを試してみます。