No.3ベストアンサー
- 回答日時:
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
- 回答日時:
それをやっているページのソースを見れば判ります。
単純なのは
<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
- 回答日時:
やりたい状態がいまいち想像しづらいのですが。
通常<h1>~</h1>で字を囲むと、見出しになって、字が大きく表示されるのだけれど、
文字のかわりに、画像で作ったロゴを入れたい、というのですか?
だとしたらまずロゴに表示するための画像ファイルを作ります。
それを、表示したいところに<img src="...">という風に貼り付けるだけです。
ただ単純に<h1></h1>を<img...>にすると、改行がされなくなってしまうので、
その前後の要素を<p></p>くらいでくるんでやる必要は出てくるかもしれません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
その要素がjQueryでremove()済...
-
現行の日本国憲法の古い所を教...
-
【ヒトの神秘】美男美女から何...
-
含む含まないという概念自体の...
-
HTMLでTextareaを横に2つ並べ...
-
CSS:overflow要素の印刷について
-
初歩的な質問です。<div>のwidt...
-
input type="hidden"で取得した...
-
テキストボックスの中にリンク...
-
smallにtext-allignが効かない
-
imgタグをそのまま使うことは正...
-
ドラッグ&ドロップ(D&D)を制限...
-
質問1.
-
「諸要素」とはどういう意味で...
-
改行ほどは行かないけど、若干...
-
figcaption要素の中にul要素
-
aの中にspan
-
brタグ、pタグやtableタグが非...
-
tdに対してmin-heightの定義、...
-
C言語線形リストの問題です
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
含む含まないという概念自体の...
-
smallにtext-allignが効かない
-
質問1.
-
「諸要素」とはどういう意味で...
-
input type="hidden"で取得した...
-
角丸画像の背景色を透明にした...
-
改行ほどは行かないけど、若干...
-
CSS:overflow要素の印刷について
-
タグは大文字と小文字どちらが...
-
NからZへの全単射を具体的に構...
-
HTMLでTextareaを横に2つ並べ...
-
H1タグを画像にしたい
-
figcaption要素の中にul要素
-
imgタグをそのまま使うことは正...
-
textareaの幅を画面と合わせたい
-
ある要素の中身を全部グレーア...
-
テキストボックスの中にリンク...
-
スタイルシートで文字色を指定...
-
HTMLページ上でiframeを最前面...
おすすめ情報