<h1>要素で<img>要素を囲むと無地の改行幅がかなり出来てしまう

解決済

質問者：acidend
質問日時：2003/11/10 15:34
回答数：7件

ホームページを現在つくっています。
<img>要素を<h1>要素で囲んだ時に生まれる縦の隙間(20ピクセルくらいはあると思う)をなくす方法がないでしょうか？
検索エンジン最適化のためにbody要素のあとに<h1>要素で重要なページ全体の意味となる文章を掲載すると良いとSEOの本に書いてありました。
しかし既に画像で全ページつくっているところで、しかもデザイン的にもそのまま<h1>要素で取り入れてしまうとおかしくなってしまいます。
そこで代替として<h1>要素の中に<img>要素を入れてalt属性で入れるべき文章を入れても良いとあったので実行してみたという経緯です。
何か隙間をなくす方法は無いでしょうか・・・

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (7件)

ベストアンサー優先
最新から表示
回答順に表示

No.7ベストアンサー

回答者： F-14
回答日時：2003/11/10 18:31

#3です。

＞何故かネスケ4.xだとWinでもMacでもダメなんです

当方にはネスケ4.xの環境が有りませんので検証できないのですが、ネスケ4.xは、スタイルシートの実装が非常に中途半端で、期待する結果を得られない場合が多いです。（私自身もネスケの4.xのスタイルシートの実装に関しては、随分と悩まされた経験があります）
どうしてもネスケ4.xでの閲覧を考慮しなければならないのなら、「画像で全ページを作る」という方針を見直す必要が有るように思います。

参考URL：http://hp.vector.co.jp/authors/VA022006/css/corr …

- 0
- 件

通報する

この回答へのお礼

再度有難う御座いました。
おっしゃる通りでネスケ4.xは色々とありますからやはり難しいような気はしております。
有難う御座いました。

通報する

お礼日時：2003/11/11 00:51

No.6

回答者： mousengoke
回答日時：2003/11/10 17:20

<head>タグ内の文字コード宣言後任意の場所(分からなかったら最後)に

この回答への補足

投稿有難う御座います。
そうですね、いちいちその都度<h1>要素で挿入する必要なないですね。
外部スタイルシートを使用していますので、そのファイルに挿入しようと思います。
内容は#3さんと同じと思うのですが、これが何故かネスケ4.xだと変わらず幅が広いままなのです・・・(6はOK)。

補足日時：2003/11/10 17:42

通報する

- 0
- 件

通報する

No.5

回答者： briony
回答日時：2003/11/10 17:02

#4です。

タイプミスがありました。

×margin-right: 0em; /*右とのあき*/:
○margin-right: 0em; /*右とのあき*/;

最後はセミコロンです。

- 0
- 件

通報する

No.4

回答者： briony
回答日時：2003/11/10 16:54

>縦の隙間(20ピクセルくらいはあると思う)

このタテがどの方向を差しているのかわかりませんが、ブラウザの上下（↑天↓地）を差しているとして、スタイルシートで

<h1 style="
margin-top: 0em; /*上とのあき*/;
margin-bottom: 0em; /*下とのあき*/;
">
<img src="画像パス" alt="ここに入れたいメッセージを挿入" width="xx" height="">
</h1>

でどうでしょうか。
画像の前後行のあきを調整できます。ちなみにemというのは文字でいうと１文字分が1emです。文字サイズにより大きさは変わりますが、0emであきなし、-1emで1文字分つめ、0.5emで1文字の半分のあき、という感じになります（大雑把な説明です）。

もし上下ではなく、左右のあきのことをおっしゃっているなら、

margin-left: 0em; /*左とのあき*/;
margin-right: 0em; /*右とのあき*/:

を上下の変わりにいれれば、調整できます。

この回答への補足

投稿有難う御座いました。ブラウザの上下でOKです。
IEだとWinでもMacでも出来ました！　が、#3さんの手法と同様、何故かネスケ4.xだとWinでもMacでもダメなんです(6はOK)。
ネスケは無理なのでしょうかね・・・。

補足日時：2003/11/10 17:34

通報する

- 0
- 件

通報する

No.3

回答者： F-14
回答日時：2003/11/10 16:50

<h1 style="margin:0;"><img .........></h1>

上記でどうですか？

※h1要素は文字の大きさを指すものだと述べておられる回答者の方がおられますが、h1,h2...などの要素は「見出しのレベル」を表すものであり、決して文字の大きさを指定する要素ではありません。明らかな間違いであるので、敢えて指摘させて頂きます。

この回答への補足

投稿有難う御座いました。
<h1 style="margin:0;">で、IEだとWinでもMacでも出来ました！　が、何故かネスケ4.xだとWinでもMacでもダメなんです(6はOK)。
ネスケは無理なのでしょうかね・・・。

補足日時：2003/11/10 17:31

通報する

- 0
- 件

通報する

No.2

回答者： mr-boo2003
回答日時：2003/11/10 16:41

<h1 style=font-size:10pt><img src="画像パス" alt="ここに入れたいメッセージを挿入" width="xx" height=""></h1>

ではダメでしょうか？

この回答への補足

専門家さんからのご回答有難う御座います。助かります。
しかし・・・。早速試しましたがおかしいです、何故でしょう、何も変わりません・・・。
また、少しは幅が変わるかと思い、(1)2pt、(2)1pt、(3)1px、(4)0px、なども試しましたがこれもダメでした。
当然ながらコピーペーストして使ってみましたからスペル間違いは無いと思うのですが。
h1要素内にstyle=以下を入れるだけであとは変わらないのですよね。何故うまくいかないのだろう・・・

補足日時：2003/11/10 16:53

通報する

- 0
- 件

通報する

No.1

回答者： Ulu_lun
回答日時：2003/11/10 15:54

<h1>メッセージ</h1><br>

<img src="イメージの置き場所" alt="画像の説明><br>
<h1>メッセージその２</h1>
ではいかがでしょうか。
<h1>タグは文字の大きさを指しますので、</h1>で終わらせずにイメージを入れますと、どうしても<h1>で指定されただけの空白が出来るものと思われます。

この回答への補足

早速にどうも有難う御座います。
説明が下手で済みません。どうもうまく伝わっていないようです。おっしゃる方法ですと<h1>要素に"じか"にテキストで入れたいメッセージを表示させる事になってしまいまして、意図するところでなくなってしまうのです。

既に「入れたいメッセージ文」を画像で表示させていまして、それを外して<h1>入れたいメッセージ</h1>とはデザイン的に出来ない状況なのです。

[ 1 ] 通常のh1要素の使い方
<h1>ここに入れたいメッセージを挿入</h1>

[ 2 ] 今回試して隙間が開く使い方
<h1><img src="画像パス" alt="ここに入れたいメッセージを挿入" width="xx" height=""></h1>

ということで、[ 1 ] ではそのままテキストで入れる訳ですが、[ 2 ] ではimg要素の中のalt属性で入れるということなのです・・・。
これで伝わりますでしょうか・・・

補足日時：2003/11/10 16:07

通報する