リンクをブロック構造にする

リンクをブロック構造にしてみましょう。
例えば、テーブルで、テンプレートを作成していて、文字のところだけでなく、
セルの中でオンマウスしたら、アンカーされたいというときに便利。


まずは基本のテンプレート
<html>
<head>
<title></title>
</head>
<body>
<table>
<tr>
<td><a href="xx1.html">info</td>
</tr>
<tr>
<td><a href="xx2.html">diary</td>
</tr>
<tr>
<td><a href="xx3.html">bbs</td>
</tr>
<tr>
<td><a href="xx4.html">link</td>
</tr>
<tr>
<td><a href="xx5.html">contact</td>
</tr>
</table>
</body>
</html>

◎スタイルシート
a{
display:block;
width:150px;
}

これだけで、できます。
リンクをブロック構造にするのは『display:block;』
注意してほしいのはきちんと横幅のサイズを設定してあげないといけないということ。

ちなみに高さも余白を空けたいという場合があるでしょう。
これはいろいろな方法がありますが上下均等に余白を空けたい場合は『line-height』というスタイルシートを使うと簡単です。

◎スタイルシート
a{
display:block;
width:150px;
line-height:30px;
}

このままでは文字は左に寄ったままです。
これをセンターに寄せてみましょう。

◎スタイルシート
td{
text-align:center;
}

こうすれば、文字が真ん中に寄ります。

今回はわかりやすいようにテーブルを使いましたが、もちろんdivやliを使ったりする方法もできるので是非お試しください。
top