画像にリンクを張ると画像がずれるのを解消したいです

質問

ホームページ作成初心者です。

ある個所の画像にリンクを張ると画像がずれて、表示がおかしくなります。

CSSで横幅を設定した中に同じサイズの画像を配置しています。
詳細をご覧いただきアドバイス頂けたら幸いです。よろしくお願いいたします。

html
<div id="sidenavi2">
<ul>
<li id="midashi2"><img src="image/os_side.jpg" width="200" height="56"></li>
<li><a href#">あああ</a></li>
<li><a href#">あああ</a></li>
　　　　<li><a href#">あああ</a></li>
　　　　<li><a href#">あああ</a></li>
</ul>
<p><img src="image/message.jpg" width="200" height="65" border="0"></p>
<p><img src="../open_service/siryo_seikyu.jpg" width="200" height="62"></p>
</div>

css
#contents #sidenavi2 {
padding: 0px;
float: right;
height: auto;
width: 200px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
}

情報が不足する点があるかもしれませんが、よろしくお願いいたします。

回答No.5

abril · ベストアンサー

No.3です。私の方は以下の点のみレスさせて頂きます。

> sidenavi2でテキストメニューを表示させてその下に画像にリンクを張るにはsidenavi2の下にdivを別に作ってそこに入れるのがよろしいでしょうか。
> 抽象的ですが、よければ考え方だけでもよろしくお願いいたします。

それは、テキストメニューと画像のリンクボタンのそれぞれの格付けの様なものが同等なのか異なるのかによっても考え方は違ってきます。
また、テキストリンク部分と画像リンク部分にはそれぞれ異なるスタイルを与えたいのであれば、それぞれのマークアップで適切な要素ごとにclassなりidなりを設定してセレクタで区別すれば良いでしょう。

例えばですが、テキストリンク部分と画像リンク部分がそれぞれ「内容的に異なるグループのリスト」であるなら、下記の様にリスト自体を2つに分けるべきでしょう。スタイルは、それぞれul.fruitsとul.other_infoに対して指定します（ユニークだったらidでも）。

<ul class="fruits">
<li><a href="りんごの説明ページへリンク">りんご</a></li>
<li><a href="みかんの説明ページへリンク">みかん</a></li>
<li><a href="いちごの説明ページへリンク">いちご</a></li>
</ul>

<ul class="other_info">
<li><a href="代表者挨拶のページへリンク"><img ～></a></li>
<li><a href="資料請求のページへリンク"><img ～></a></li>
</ul>

一方、テキストリンク部分も画像リンク部分も「内容的に一連と見てよいグループのリスト」であるなら、下記の様に同一のリストのアイテムとし、スタイルはliごとにclassなりidなりを設定して区別すれば良いでしょう。
※下記ではそれぞれの「カテゴリ」はユニークなものであると考えidにしてあります。その上でCSS上で画像リンク部分であるli#messageとli#orderには違うスタイルを指定します。

<ul class="category">
<li id="company"><a href="会社概要ページへリンク">会社概要</a></li>
<li id="product"><a href="商品案内ページへリンク">商品案内</a></li>
<li id="casestudy"><a href="導入事例ページへリンク">導入事例</a></li>
<li id="message"><a href="代表者挨拶のページへリンク"><img ～></a></li>
<li id="order"><a href="資料請求のページへリンク"><img ～></a></li>
</ul>

まあ、HTML側で既にテキストと画像に分けているところを見ると（内容的に）後者ではないのかな、とは思えますが。

上記は、考え方の一例です。これが正解、というわけではありません。実際の内容や構成に応じてケースバイケースでより適切なマークアップがあるかもしれませんので、これはあくまでも現在与えられている情報から仮定させて頂いたものです。

あと、これは蛇足ですが、

<li id="midashi2"><img src="image/os_side.jpg" width="200" height="56"></li>

上記が以下に続くリストの「見出し」を表す為の画像であるなら、他の子要素liと同等に扱うのではなく、ulの見出し（h(n)とか…）としてマークアップするのが適切かと。

お礼

abril様

毎回ご丁寧なメッセージ有難うございます。先日パソコンを変えた際にIDとパスワードが分からなくなり、お礼をさせて頂くのが遅くなり申し訳ございません。

本当に助かりました。さらに理解が深まり、楽しい日々を過ごさせて頂いております。

厚かましいですが、今後ともよろしくお願いいたします。

回答No.4

think49

#2です。

ええと。まず、問題点を切り分けて考えてみてください。

HTMLが開示されない状況では、質問者さんの状況を想像で補うしかなく、実際の状況とズレが生じる可能性があります。
今回のケースはまさにそれですよね？

ですので、初めは簡単なHTML+CSSでテストしてみましょう。
そこから段々とやりたいことを付け足していくのがコツです。
一つ一つパーツを付け足していけば、「どこで問題が生じるか」が確実にわかります。
その差分を見て「どこに原因があるのか」を分析するのです。私は困った時はいつもそうしています。

そこでどうしてもわからない箇所が有れば、「ここまでは上手くいきますが、こうすると期待通りに動作しません」と質問してみてください。
そこまで問題点が突き止められているのであれば、非常に回答しやすくなります。
難解な問題でなければ、まず回答が添えられると思います。

> そこでご相談ですが、テキストメニューの文字を中央に寄せつつ、画像にリンクを張るにはどうしたらいいでしょうか。
text-alignプロパティを使ってみてください。

<div style='text-align: center;'>
<a href='#'><img src='test.jpg' alt='test' /></a>
</div>

中央寄せしたい要素だけ括ればOKです。

text-align-スタイルシートリファレンス
http://www.htmq.com/style/text-align.shtml

回答No.3

abril

> 以下の部分の画像にリンクを張ると、その部分の上下の幅が広がりレイアウトが崩れてしまいます。
>
> <p><img src="image/message.jpg" width="200" height="65" border="0"></p>
> <p><img src="../open_service/siryo_seikyu.jpg" width="200" height="62"></p>

この部分の事であれば、No.2様の推測が当たっている様に思われます。"a img {～}"というセレクタで何かスタイルが変わってしまう様な指定をしているのでなければ。例えば、

a img {
padding: 10px 0;
}

とか。

> あと私の勉強不足でよく分かってないのですが、画像を配置する場合は<p>タグでなくてもいいのですね。有難うございます。

画像を配置するのに相応しい要素（タグ）が決められているわけではありません。画像の内容が何であるかに依って、どの要素の子要素とするかを決めると言った方がいいでしょう。
実際の画像を見たわけではないですが、この構成と画像のファイル名からして、おそらくmessage.jpgは「メッセージ」ページへのリンクボタン、siryo_seikyu.jpgは「資料請求」ページへのリンクボタンの役目かと推測します。であればむしろこれはul（リスト）でマークアップする方が妥当かと思います。一種のナビゲーション／メニューの様なものと考えられますので。p（段落）では無論ないですし、かといってbrで並べる様なものでもないかと…勿論、どちらも単純に文法的には間違いではありませんが、マークアップに対する考え方一つで左右されます。

お礼

abril様

いつも丁寧で親切な回答本当にありがとうございます。

No.2さんのお礼に書いておりますが、私の早とちりで違うcssが作用してそれが原因でずれておりました。

sidenavi2でテキストメニューを表示させてその下に画像にリンクを張るにはsidenavi2の下にdivを別に作ってそこに入れるのがよろしいでしょうか。

抽象的ですが、よければ考え方だけでもよろしくお願いいたします。

マークアップの考え方も非常に勉強になりました。いつもありがとうございます。

回答No.2

think49

img { border-style: none; } かな？
imgにaを付与するとボーダーが入るので、キャンセルしてみてください。

-------
<style type='text/css'>

#contents #sidenavi2 {
padding: 0px;
float: right;
height: auto;

width: 200px;

margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
}

#midashi2{
background-color:#fee;
}
img {
border-style: none;
}
</style>
</head>
<body>

<div id='contents'>
<div id="sidenavi2">
<ul>
<li id="midashi2"><img src="image/os_side.jpg" width="200" height="56"></li>
<li><a href="#">あああ</a></li>
　　　　<li><a href="#">あああ</a></li>
</ul>
<p><a href='#'><img src="image/message.jpg" width="200" height="65" border="0"></a></p>
<p><a href='#'><img src="../open_service/siryo_seikyu.jpg" width="200" height="62"></a></p>
</div>
</div>
-------

質問文のHTMLはそのままでは <div id='contents'> がなかったので、こちらで想像して付け足しました。あと <a href#"> も適宜修正。
できれば、最小限のHTMLでもテストしてから投稿してくださいね。そうするとお互いに助かります。

お礼

think49様

ご丁寧な回答ありがとうございます。本当に助かります。

大変申し訳ないのですが、昨日よく考えてみると質問の中に表示してないcssの設定がどうやら原因でした。

質問の内容とずれてきますが、２カラムの右側をメニューにしていて、そのメニューをテキストにしているのですが、文字が左に寄っていたのでインデントの設定で少し中央寄りになるようにしており、画像にリンクを張るとそれが影響してずれていたのだと思いました。

そこでご相談ですが、テキストメニューの文字を中央に寄せつつ、画像にリンクを張るにはどうしたらいいでしょうか。イメージではsidenavi2の下にdivをひとつ作ってそこに画像を配置すればいいのかな？なんて思いました。

よろしければご享受くださいませ。

問題のcssです
#contents #sidenavi2 ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#contents #sidenavi2 a {
font: 80%/50px "ＭＳ Ｐゴシック", Osaka;
display: block;
margin: 0px;
height: 50px;
width: 198px;
border-top: #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
padding: 0px;
text-indent: 15px;
}
#contents #sidenavi2 ul li a:hover,
#contents #sidenavi2 li a:focus {
background: #E6E6E6 11px 13px;
}
#contents #sidenavi2 #midashi {
height: 56px;
width: 200px;
margin: 0px;
padding: 0px;
}

回答No.1

ryupyon

どうしたいのかよくわからないんですが、もう少し詳しく教えていただけませんか？
どの部分の表示がおかしくなるんですか？

それと<p><img src""></p>となってますが改行したいなら<p></p>を省いて<img src"">の後に<br>でもいいのではないでしょうか？

補足

ryupyon様

早速のお返事ありがとうございます。

以下の部分の画像にリンクを張ると、その部分の上下の幅が広がりレイアウトが崩れてしまいます。

<p><img src="image/message.jpg" width="200" height="65" border="0"></p>
<p><img src="../open_service/siryo_seikyu.jpg" width="200" height="62"></p>

あと私の勉強不足でよく分かってないのですが、画像を配置する場合は<p>タグでなくてもいいのですね。有難うございます。