H1タグを画像にしたい

質問

有名なサイトなど見てみると、H1タグを画像で置き換えたりしていますが、あれってどうやってるんですか？私もH1タグを、ロゴにしたいんです。

回答No.3

quads · ベストアンサー

H1 "タグ" を云々というのは意味が分かりません。
「h1 要素として表示されうる内容」として捉えます。

まず、h1 要素はブロック要素です。
<h1>教えて！goo</h1>
のように記述されるのが一般的です。

ロゴ画像自体が h1 要素の内容になる場合は、
<h1><img src="goo_logo.gif" alt="教えて！goo" width="200" height="100"></h1>
とすれば、h1 要素の内容として画像が表示されることが期待できます。

そうでなく、テキストを h1 要素の内容としてロゴに置き換えるような場合は、
<h1>教えて！goo</h1>
とした上で、

h1 {
width:200px;
height:100px;
padding:0;
background:url("goo_logo.gif") 0 0 no-repeat scroll;
text-indent:-9999px;
}

などと指定すれば、
text-indent プロパティによって h1 要素の内容であるテキストがブラウザの表示領域外に行くことが期待されるため、テキストを不可視にできます。
ここで、テキストを span 要素で括って display:none としたり、h1要素に対して visibility:hidden とする方が妥当であると思われますが、
そうしてしまうと音声認識ブラウザまでもが内容を無視してしまいます。
この件については議論がありますが、現在の状況では text-indent プロパティが最も妥当であると考えられています。

テキストが不可視になったところで、h1 要素の内容領域を確保します。
その領域内に背景として画像を表示させるという考えを用いて実現しています。

background プロパティの position にあたる部分は、確保した領域が画像の幅と等しければ、
50%(center) 50%(center) でも、100%(right) 100%(bottom) でも同じです。
ただし、padding 値を考慮する必要があります。padding:0 であれば問題ありません。

背景画像としてロゴを表示させている場合に、ロゴの部分をリンクにしたいのであれば、
a 要素を display:block として a 要素に対して同様の指定を行うことで実現できます。

h1 要素に対して margin, border, padding を指定すると、h1 要素のボックスサイズは width 及び height で指定した値にそれらの値を加算した幅となります。

お礼

みなさんありがとうございました、よくわかりました。クアードさん長文でよくわかりました

回答No.2

dezimac

それをやっているページのソースを見れば判ります。

単純なのは
<h1><img src="..." alt="○○"></h1>

スタイルシート使えば
<style>
<!--
h1{
margin: 0px;
padding: 0px;
width: 100px;
height: 50px;
text-indent: -1000em;
background: url("title.jpg") no-repeat;
}
-->
</style>

<h1>○○</h1>

回答No.1

suzu_zou

やりたい状態がいまいち想像しづらいのですが。
通常<h1>～</h1>で字を囲むと、見出しになって、字が大きく表示されるのだけれど、
文字のかわりに、画像で作ったロゴを入れたい、というのですか？

だとしたらまずロゴに表示するための画像ファイルを作ります。
それを、表示したいところに<img src="...">という風に貼り付けるだけです。

ただ単純に<h1></h1>を<img...>にすると、改行がされなくなってしまうので、
その前後の要素を<p></p>くらいでくるんでやる必要は出てくるかもしれません。