クリックできる面積を増やす方法は
通常のリンクを作成する場合、次のように記述しますね。
<a href="hoge.html">リンク先</a>
このHTMLを表示すると、次のように見えます。
今回ご紹介するテクニックでも基本は一緒です。上記と同じように a要素(<a>~</a>)を使用してリンクを作ります。ただ異なるのは、クリック可能にしたい範囲全体を a要素にしてしまう(<a>~</a>で囲む)点です。
例えば、次のような感じで記述します。
<a href="hoge.html"> <small>携帯サイトの作り方 第1回</small><br> 携帯端末用サイトを作る!<作成方法の基礎><br> <small>携帯電話などから閲覧できる「ケータイサイト」を作ってみましょう。携帯端末に搭載されているブラウザに関するいくつかの制約を押さえておけば、あとは簡単に作成できます。まずは、携帯サイト作成の基本をご紹介。</small><br> </a>
すると、このHTMLは次のように表示されます。
全部の文字が a要素に含まれている(<a>~</a>で囲まれている)わけですから、全体がリンクになっています。しかし、これでは見た目がよろしくありませんし、何より余白部分はリンクになっていません。
そこで、次のように記述を加えます。