Amazonの商品一覧にあるような、画像とテキストに同時にリンクを貼るためのCSSを教えて頂きたいです。（javascript等を使わずに）画像にマウスオーバーするとテキストに下線が入り、テキストにマウスオーバーするとテキストに下線が入るようにしたいのですが、うまくいきません。商品説明このようにhtml5では、をタグで囲めるみたいで、全体にリンクが貼れるのは良いのですが、マウスオーバーした時にテキストに下線が入らなくて困ってます。この方法で無理ならば、他にCSSでやり方があるのか教えて頂けたらと思います。

＞このようにhtml5では、をタグで囲めるみたいで、ここ誤解されています。 The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).( http://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html#the-a-element ) 入れられるのではなく、「段落(p)、リスト(ol,ul,dl)、表(table)だけでなく、セクション(section)も、a要素で囲める」だからと言って、divを使うべきではない。divはHTML5では原則使わない。 Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-div-element ) 著者は、他に適切な要素がないときの最後の手段として、div要素を使用することが強く奨励されます。「HTML4.01以降、「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」と言われ、プレゼンテーションのためにHTMLを書かない。」これは、スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )にもこんこんと書かれいている。単純にナビゲーションリストですから、【Amazon.co.jp限定】Transcend SDHCカード 16GB トランセンド・ジャパン￥ 827 であっても構わない。li：リストアイテムをa要素に含めています。これが【HTMLではブロック要素も含めることができる】という意味です。もちろん、HTML4.01なら【Amazon.co.jp限定】Transcend SDHCカード 16GB トランセンド・ジャパン￥ 827 とかになっちゃう。いずれも画像にマウスオーバーしても次のa要素にアンダーラインするとか、同様に同じプレゼンテーションにできますが・・隣接セレクタを使う。＞マウスオーバーした時にテキストに下線が入らなくて困ってます。これはブラウザがHTML5に対応していない場合に、次のように補完してしまうからです。【Amazon.co.jp限定】Transcend SDHCカード 16GB トランセンド・ジャパン￥ 827 ↓これをブラウザが修正する。【Amazon.co.jp限定】Transcend SDHCカード 16GB トランセンド・ジャパン￥ 827 そのために、画像にマウスオーバーしても認識されない。例) 【Amazon.co.jp限定】Transcend SDHCカード 16GB トランセンド・ジャパン￥ 827 ul.ItemList{padding:0;list-stype-type:none;} ul.ItemList li{display:inline-block;height:200px;width:150px;position:relative;} ul.ItemList li img{width:100%;height:auto;} ul.ItemList li ol li{display:list-item;list-style-type:decimal;} /* これが要るかも */ ul.ItemList a a{text-decoration:underline;}

急いでいます！

CSSのみで画像とテキストに同時にリンクを貼りたい

解決済

質問者：rinta_7
質問日時：2015/12/11 14:52
回答数：3件

Amazonの商品一覧にあるような、画像とテキストに同時にリンクを貼るためのCSSを教えて頂きたいです。（javascript等を使わずに）
画像にマウスオーバーするとテキストに下線が入り、テキストにマウスオーバーするとテキストに下線が入るようにしたいのですが、うまくいきません。

<a>
<div>
<img src="#" width="#" height="#" alt="#">
<p>商品説明</p>
</div>
</a>

このようにhtml5では、<div>を<a>タグで囲めるみたいで、
<div>全体にリンクが貼れるのは良いのですが、
マウスオーバーした時にテキストに下線が入らなくて困ってます。

この方法で無理ならば、他にCSSでやり方があるのか教えて頂けたらと思います。

現在<div>をfloat: left;しているのですが、float: left;を削除すると、
マウスオーバー時に、テキストにアンダーラインが表示されました。
floatが原因なのでしょうか…？

No.2の回答に寄せられた補足コメントです。補足日時：2015/12/11 17:31
通報する
たびたびすいません。
<div>
<a>
<img src="#" width="#" height="#" alt="#">
<p>商品説明</p>
</a>
</div>

<div>の中に<a>タグを入れれば出来ました。
これで良いのか分かりませんが…。

補足日時：2015/12/11 18:04
通報する

通報する

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

質問の本文を隠す

回答 (3件)

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

No.3ベストアンサー

回答者： ORUKA1951
回答日時：2015/12/12 09:26

＞このようにhtml5では、<div>を<a>タグで囲めるみたいで、

　ここ誤解されています。
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).( http://www.w3.org/TR/2014/REC-html5-20141028/tex … )
　入れられるのではなく、「段落(p)、リスト(ol,ul,dl)、表(table)だけでなく、セクション(section)も、a要素で囲める」
　だからと言って、divを使うべきではない。divはHTML5では原則使わない。
Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/2014/REC-html5-20141028/gro … )
　著者は、他に適切な要素がないときの最後の手段として、div要素を使用することが強く奨励されます。

「HTML4.01以降、「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」と言われ、プレゼンテーションのためにHTMLを書かない。」これは、スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )にもこんこんと書かれいている。

単純にナビゲーションリストですから、
<ul class="ItemList">
　<li><a href=""><img src="" width="" height="" alt="">
　　　<ol>
　　　　<li>【Amazon.co.jp限定】Transcend SDHCカード 16GB</li>
　　　　<li>トランセンド・ジャパン</li>
　　　　<li>￥ 827</li>
　　　</ol>
　</a></li>
であっても構わない。li：リストアイテムをa要素に含めています。
これが【HTMLではブロック要素も含めることができる】という意味です。もちろん、HTML4.01なら
<ul>
　<li><a href=""><img src="" width="" height="" alt=""></a>
　　　<p>
　　　　<a href=""><span>【Amazon.co.jp限定】Transcend SDHCカード 16GB</span>
　　　　<span>トランセンド・ジャパン</span>
　　　　<span>￥ 827</span></a>
　　　</p>
　</li>
とかになっちゃう。いずれも画像にマウスオーバーしても次のa要素にアンダーラインするとか、同様に同じプレゼンテーションにできますが・・隣接セレクタを使う。

＞マウスオーバーした時にテキストに下線が入らなくて困ってます。
　これはブラウザがHTML5に対応していない場合に、次のように補完してしまうからです。
<ul class="ItemList">
　<li><a href=""><img src="" width="" height="" alt="">
　　　<ol>
　　　　<li>【Amazon.co.jp限定】Transcend SDHCカード 16GB</li>
　　　　<li>トランセンド・ジャパン</li>
　　　　<li>￥ 827</li>
　　　</ol>
　</a></li>
↓これをブラウザが修正する。
<ul>
　<li><a href=""><img src="" width="" height="" alt=""></a>
　　　<ol>
　　　　<li><a href="">【Amazon.co.jp限定】Transcend SDHCカード 16GB</a></li>
　　　　<li><a href="">トランセンド・ジャパン</a></li>
　　　　<li><a href="">￥ 827</a></li>
　　　</ol>
　<a href=""></a></li>
そのために、画像にマウスオーバーしても認識されない。

例)
<ul class="ItemList">
　<li><a href=""><img src="" width="" height="" alt="">
　　　<ol>
　　　　<li>【Amazon.co.jp限定】Transcend SDHCカード 16GB</li>
　　　　<li>トランセンド・ジャパン</li>
　　　　<li>￥ 827</li>
　　　</ol>
　</a></li>

ul.ItemList{padding:0;list-stype-type:none;}
ul.ItemList li{display:inline-block;height:200px;width:150px;position:relative;}
ul.ItemList li img{width:100%;height:auto;}
ul.ItemList li ol li{display:list-item;list-style-type:decimal;}
/* これが要るかも */
ul.ItemList a a{text-decoration:underline;}