ブロック要素全体にリンクを設定する方法

August 01, 2013

スポンサーサイト

画像や画像タイトル、続きを読む等のブロック要素を含む全体をクリック、またはタップできる様にしたいという場合、結論からいくと「html5を宣言する」で解決する。

html5から、「ブロック要素をaタグで囲って良い」となった。これにより、記述コードもシンプルになり、難しいことはなにもない。

ではhtml5を宣言するにはどうすれば良いのか。

HTML 4では以下の様にDOCTYPE宣言を記述していた。（HTML 4.01 Transitional）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

スポンサーサイト

それを下記のシンプルなコードと差替えるだけで、html5のDOCTYPE宣言となる。

<!DOCTYPE html>

ちなみに、html5以前はどうしていたかというと・・・・

今となっては必要ないので解説不要。

ブロック要素をposition:relative;とし、要素内のaタグをposition:absolute;　top:0; left:0; width:100%; height:100%;という流れ。