クリックしたら高速でスクロールされる設定について

Question

<a href="#smoothplay"><div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; border-radius: 10px; background-color: #ffff99;">
送信フォームに移動

</div></a>

上記のように枠で囲みクリックしたら高速でスクロールする設定を作っているのですが
上記の状態では枠内をクリックしてスクロールされる設定にできません。

『送信フォーム』という文字にカーソルを合わせてクリックしないと反応しませんがどのようにタグを設定したら文字だけでなく枠内をクリックしただけで反応するでしょうか？

Answer 1

『送信フォーム』という文字にカーソルを合わせてクリックしないと反応しませんがどのようにタグを設定したら文字だけでなく枠内をクリックしただけで反応するでしょうか？

本来aタグはの要素にblock要素（ここでいうdiv）を使ってはいけないので（※）、スタイルシートでaタグを
display:block；などにし大きさしてしてみては？

（※）think49様から指摘いただきました：html5ではaタグの中にブロック要素可のようです。

上記の状態では枠内をクリックしてスクロールされる設定にできません。

<a href="#smoothplay">
と記載されているという事はその飛び先の送信フォームにはid="smoothplay"は設定されてますか？
参考：http://www.tagindex.com/html_tag/link/a_id.html

ただしこれだけだとスクロールというよりジャンプに近い動きになるので滑らかにうごかしたければjavascriptが必要になってきます。

追記

実際の動作をジャンプっぽい動きからスムーズなスクロールにするのはここを参考にjavascript(jquery)で書くと良いと思います。

http://www.webdesignleaves.com/wp/jquery/573/

Comments

[think49]

> 本来aタグはの要素にblock要素（ここでいうdiv）を使ってはいけないので、スタイルシートでaタグを display:block；などにし大きさしてしてみては？
参考までに、HTML5 では <a><div>contents</div></a> も許されます。
HTML 4.01 では許されませんが、a要素に display: block; を指定したから許されるものではないので、HTML 4.01 では <div><a style="display: block">contents</a></div> とするのが正攻法ですね。

[hiim]

HTML5規約不勉強ですいませんm(_ _)m訂正しておきます。

HTML 4.01 の
> <div><a style="display: block">contents</a></div>
はa要素に display: block; を指定という事ではないのですか？

[hiim]

あ言葉たらずでした。
<a style="display: block;[その他css]">contents</a>
として[その他css]の部分に大きさ、色等入れてみてdiv自体削除してみては？というつもりで書いておりました。

[think49]

質問者さんのHTMLではa要素が親要素となっていますので、「a要素に display:block； を指定する」というアドバイスをそのまま実行すると <a style="display: block"><div>contents</div></a> になります。
CSS 的にはa要素がブロックボックスとなることでレイアウトが確保されますが、HTML 4.01 としては文法違反です。
HTML は CSS を解釈しませんので、各々の仕様は独立して判断する必要があります(CSS の「ブロックボックス」と HTML 4.01 の「ブロックレベル要素」は別々の概念です)。

[hiim]

そうですね、aタグにスタイル加えるアドバスだけでは中のdivは残してしまうように解釈されますね。言葉足らずでした。

Answer 2

仰る意味がよくわかりませんが、私の環境では問題なくスクロールしました。

• Create a new fiddle - JSFiddle

Re: Sugimoto さん