クリックできる面積を増やす方法は (続き)
そこで、次のように記述を加えます。
<a href="..." class="blocklink"> <small>携帯サイトの作り方 第1回</small><br> <span>携帯端末用サイトを作る</span><br> <small>携帯電話などから閲覧できる...</small><br> </a>
まず、aタグ内に「class="blocklink"」を加えます。
それから、メインのリンク文字（ここではリンク先ページのタイトル）をspan要素（<span>～</span>）で囲みました。
こう記述しただけでは、まだ何も変化しません。
次に、HTMLファイルの head要素内（<head>～</head>内）に、次のようなスタイルシートの記述を加えます。
<style type="text/css">
a.blocklink {
display:block;
width:100%;
text-decoration:none;
color:black;
}
a span {
text-decoration:underline;
color:blue;
}
</style>
すると、次のように表示されます。
見た目は普通のリンクですが、すべての文字や周囲の余白部分もクリック可能になっています。 マウスを乗せるとよく分かると思います。
必要に応じて枠で囲むなどして下さい。
これで完成です！
全体のソースとスタイルシート部分の解説
さて、段階を追ってご紹介してきましたので、「結局どう書けばよいのか？」いまいちお分かりにならなかった方々もいらっしゃるかも知れませんね。
最後に、全体のHTMLソースをまとめてご紹介致します。
また、上記ではソースの紹介だけだったスタイルシート部分に関しての解説も記しておきます。
