- ベストアンサー
div にリンク
a:hover { background-color: #e0ffff; } div#input { font-size:15px; width:140; border:solid 2px #000000; padding:2px; margin:3px; list-style : none; } <div id="input"><a href="http://～" target="_blank">ＭＡＩＬ</a></div> 中の文字だけにリンクをしているところを、 <a href="http://～" target="_blank"><div id="input">ＭＡＩＬ</div></a> ・・と div 全体にリンクをすると、マウスポインタが変になります。 カーソルを合わせた時に指マークになりませんし、色も変化しません。 １クリックでリンク先には行けます。 どうしてでしょうか？また、通常どうりにはならないのでしょうか？
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
正式には文法ミスになります。 ブラウザが無理やり合わせてくれていますｗｗ <a href～> </a> で囲めるのは、インライン要素なので文字かテキスト。 <body> <table> <div> <form> <p> <h>等の ブロックタグをリンクしてはいけません… 質問の最初に書いてある <div id="input"><a href="http://～" target="_blank">ＭＡＩＬ</a></div> これが正しいのでリンク<a>タグは内側に入れましょう。 （他のインライン要素を<a>で囲んでもＯＫです） id と target="_blank" の利用にも注意して下さい。
その他の回答 (2)
- yambejp
- ベストアンサー率51% (3827/7415)
こういう場合はaタグをブロック要素として表示する のが常道です。 <style type="text/css"> a:hover { background-color: #e0ffff; } a#input { display:block; font-size:15px; width:140; border:solid 2px #000000; padding:2px; margin:3px; list-style : none; } </style> <div ><a href="http://～" target="_blank" id="input">ＭＡＩＬ</a></div>
- matchasoft
- ベストアンサー率54% (20/37)
aタグの中にdivタグを入れる目的は何でしょうか。 スタイルシートを適用したいということでしたら、 以下のようにaタグにidを付けてはいかがでしょう。 <a href="..." target="_blank" id="input">MAIL</a> 規約的には一つのHTMLで同じidを複数のタグに適用できないので、 スタイルシートを適用する対象が複数になる可能性があれば、 以下のようにclassを使ったほうがいいかもしれません。 a.input { ... } <a href="..." target="_blank" class="input">MAIL</a>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
そうなのですか・・。知りませんでした。m(__)m ＞id と target="_blank" の利用にも注意 これについてもいろいろと調べてみます。ありがとうございました。