• ベストアンサー

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

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

  • HTML
  • 回答数5
  • ありがとう数6

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

  • ベストアンサー
  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.4

IE対応が思いつかない・・・(出来ない?) テーブルで hの見出し行を列分けして左tdに◎ 右tdに各h1,2,3にして◎をスタイル (かなり面倒です)boderは0  ------------------------------ |◎|タイトル             |  ------------------------------ 画像ならh123まとめて(簡単です) h1,h2,h3{ padding-left: ●●の横幅px ; background: url(●●.jpg) no-repeat ; }

genkigan
質問者

お礼

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

その他の回答 (4)

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.5

他の方の回答とかぶりますが :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もお勧め。(行の折り返しがあるなら使えないけど) なお、背景画像は印刷で無視されるケースがあるのでそれが問題になりそうなら小細工なしでテキストを書き加えるしかないかも。

genkigan
質問者

お礼

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

  • Tacosan
  • ベストアンサー率23% (3656/15482)
回答No.3

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

genkigan
質問者

お礼

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

  • Tacosan
  • ベストアンサー率23% (3656/15482)
回答No.2

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

genkigan
質問者

お礼

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

  • aqucent
  • ベストアンサー率39% (78/200)
回答No.1

<h1>タイトル</h1> で「◎タイトル」と表示したいという事ですか? リストなら list-style-type で可能ですが、見出しのタグでは無理かと思います。 裏技的には、背景画像を指定すればいけるかもしれませんが…。 h1 { background-image:url(./back.gif); background-repeat: norepeat; padding-left: 1em } # ↑は未検証です。

genkigan
質問者

お礼

><h1>タイトル</h1> で「◎タイトル」と表示したいという事ですか? はい、そのとおりですす。 画像のを試してみます。

関連するQ&A

  • css の h2 の最初

    外部スタイルシートを使っているのですが、そこで、h2のことなのですが、見出しの最初をたとえば☆にしたいと思います。 もちろん、htmlのタグに<h2>☆見出し</h2>と書けばいいのですが、できれば、CSSで☆の部分だけ自動的に入るようにしたいのですが、そのようなことは可能でしょうか? 可能だとすればどうすればいいか、教えてください。

    • ベストアンサー
    • HTML
  • CSSについて

    今までたくさんのCSSについてのサイトを見てきたのですが、イマイチ分かりませんでした。外部スタイルシートで最低限に書かなくてはいけないものや、文字の大きさを変えるぐらいので良いので、記述例みたいなものを教えてください。宜しくお願いします。

    • ベストアンサー
    • HTML
  • CSSとタグの関係

    おはようございます。宜しくお願い致します。 HTMLに外部スタイルシート(CSS)を組み込み、更にHTML内にタグでスタイルシートと同じ内容のものを書き込んだ場合、そのタグを消さないとCSSは反映されませんよね? 例えば、CSSでフォントサイズを指定したとして(tdにidで指定するとします)、HTML内にフォントサイズのタグを書き込んだ場合、どちらを優先されますか? 例:CSSで、 td#word {font-size: 10pt;} と指定します。それに併せて、HTML内に、 <td id="word" colspan="1"><font size="-1">表示したい文字</font></td> とした場合、指定するものに一番近い指定(<font size="-1">)を優先される…と覚えていたのですが。そして、この場合CSSは効かないと…。 しかし、両方効くはずと言われたことがあるのです。 それと、外部スタイルシートを「外してみているユーザーが居る」と言われた事が有ります。 勉強不足で申し訳有りません。外部スタイルシートの外し方って、どうやるのでしょう? 宜しくお願い致します。

    • ベストアンサー
    • CSS
  • h1タグを置く場所の背景について

    こんにちは、最近HPビルダーでHPをつくり、教えてGOOなどで H1タグのことなど知って勉強しているのですが、h1タグを 外部CSSというのでしょうか、スタイルシートのテクストファイルを 作ってそこにリンクさせて小さくしたり文字色を変えたりしています。 文字色は白、文字の大きさは11ピクセルです。 h1とh2まででh3は無いですが、h1とh2は同じ条件で 設定しております。 外部cssで文字の大きさを変えるのははSEO上問題ないという意見が 多く見られると思うのですが、色はどうなんでしょうか? またh1、h2タグを置いている場所(セル)の背景が濃い青色で スタイルシートの設定なしでみると、H1なので当然でかくなるのですが 背景が濃い青のため黒い文字が見えにくくなってしまう感じです。 検索エンジンは文字を見えにくくすることにペナルティーを与える といったことを聞いたことがあるのですが、検索エンジンは見えにくい と判断してしまうのでしょうか? それともcssで文字色を白にしていることも何かリスクはあるのかなと・・・ デザイン的な問題でやっているので特に上位表示されたいというこ ともないのですが、ペナルティーは受けたくないので、この状態に ついて改善した方が良いことなどあれば、また私のやっていること が知らずにペナルティーを受ける様な行為にあたるのかどうか 教えていただけないでしょうか。よろしくお願いします。

  • IEでスタイルシートがうまく表示されない

    Dreamweaver8で、スタイルシート(css)を外部にして、 HPを作成しました。 スタイルシートでh1,h2,pなどの文字を再定義しているのですが、 IE6でHP表示させると反映されません。 一方、opera8では、きちんと反映されて表示されます。 IE6の設定に問題があるのでしょうか? なお、IEにおいても、文字以外のスタイルシートの設定はきちんと反映されています。 よろしくお願いします。

  • CSSでh1とその下の文字との行間を詰めたい

    h1~h6を指定した場合、そのすぐ下の文字との行間が1文字分空きますよね。 見栄えが良いように、h*のすぐ下の文字との行間を調整したい場合、CSSでは、どのように指定すれば良いでしょうか? よろしくお願いします。

    • ベストアンサー
    • HTML
  • 外部スタイルシートへのリンク方法、パスのhtml

    外部スタイルシートへのリンク方法 ※ 具体的なパスの書き方、htmlを教えてください。 当方HPを作成しています。 XXXXX.comというサイトに“CSS”で書式スタイルを定義しています。 XXXXX.com内の“CSS”ですので、 XXXXX.comの中であれば、定義した文字がしっかり反映されています。 これは普通のことです。 さて、このページに、とある外部フォームページ(他社CGIによるもの)を組み込みました。 そのフォームページは外部のプログラムなので、XXXXX.comの画像を使用するにしても、 スタイルシートを使用するにしても、XXXXX.comに対して“パス”を指定する必要があります。 で、画像の場合は、 http://www.XXXXX.com/画像の名前.gifでなんなくリンクさせることには成功。 しかし、スタイルシート(CSS)へのリンクが、成功しません。 書式が全然変わらないのです。 一応<head>内に、このようにしたのですが、やはり間違っているのでしょうか?     ↓ <link href="http://www.XXXXX.com/CSSの名前.css" rel="stylesheet" type="text/css"> <style type="text/css"> htmlにお詳しい方、またはサイト制作にお詳しい方、お待ちしています。 宜しくお願いいたします。

  • 段落の最初の1文字を大きくする

    段落の最初の1文字を大きくするためのスタイルシートですが、html の中に直接記述するなら、 <style type="text/css"><!-- p:first-letter { font-size:24pt; } --></style> なのですが、外部ファイル(.css)に記述する場合はどうすればいいのかわかりません。 p {first-letter: font-size: 24pt%;} としてみたのですが、指定どおり表示されません。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 外部cssで文字色の指定の仕方を教えてください

    ホームページビルダー9でホムペを作っております。 外部cssを使っております。(人にやってもらったので実はよくわかっておりません) 背景色と文字色を指定したいと思い、スタイルシートマネジャーの「色と背景」で背景色を指定することはできました。 ただ、文字色を指定するときはどこをいじればいいのでしょうか?ネットで調べてもどうしてもわかりませんでした。 初歩的な質問で恐れ入りますがよろしくお願いいたします。

  • CS6(win)でCSSが文字ばけ

    DreamweaverCS6(win)でCSSが文字化け CSSを編集していたところsafariでcssが効かない事で @charset "utf-8"; を @charset "Shift_JIS"; に変えてみたのです。 無事、safariでcssが効いて、作業が終わりました しかし、気がついたらCSS中のコメントアウトした文字が文字化けしている あわてて調べたところ文字化けが発生する条件として [ 環境設定 ] – [ CSS スタイルシート ] – [ 修正時に CSS ファイルを開く ] のチェックを外している。 @charset で [ UTF-8 ] 以外の文字コードを指定している。 外部 CSS ファイルを使っている。 と書いてあるので、 外部 CSS ファイルを使っています。 [ 修正時に CSS ファイルを開く ] のチェックがあるのを確認(最初からチェック済みです) @charset で [ UTF-8 ] 以外の文字コードを指定しているので@charset "utf-8";に戻し保存 Dreamweaverを一旦終了、再立ち上げで確認しましたが、文字化けが戻りません。 どうすれば、文字化けが直るのでしょうか? よろしくお願い致します。 補足 修正/ページプロパティー/エンコーディングで"Shift_JIS";になっていましたので Unicode(UTF-8) と致しました。 しかし、やはり文字コードは化けたままです。(再起動でも同じでした)

    • ベストアンサー
    • HTML