外部のページを紹介するリンクページを作りましょう。
テーブルでリンクを縦横に並べます。
リンクの部分にはリンク先の説明をtitle属性で入れています。
リンクをボタンに見せるため、CSSでデザインしていますが、classをボタンの基本デザインと各４色に分けてあります。基本と色の組み合わせで１つのボタンになります。
また、色分けの見本には<a>タグではなく、<span>タグを使っています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>リンクのページ</title>
<style type="text/css">
h1 {
font-size: 18px;
font-weight: bold;
color: #993300;
background-color: #FF9933;
border-style: solid;
width: 300px;
padding: 5px;
border-left-width: 10px;
border-color: #993300;
}
.menu {
font-size: 18px;
font-weight: bold;
text-decoration: none;
display: block;
padding: 5px;
border-style: outset;
}
a.menu:hover {
border-style: inset;
}
.blue {
color: #0066CC;
background-color: #99CCFF;
border-color: #0066CC;
}
a.blue:hover {
color: #99CCFF;
background-color: #0066CC;
}
.green {
color: #009900;
background-color: #99FF99;
border-color: #009900;
}
a.green:hover {
color: #99FF99;
background-color: #009900;
}
.green {
color: #CC0000;
background-color: #FFCCCC;
border-color: #CC0000;
}
a.green:hover {
color: #FFCCCC;
background-color: #CC0000;
}
.yellow {
color: #996600;
background-color: #FFFF99;
border-color: #996600;
}
a.yellow:hover {
color: #FFFF99;
background-color: #996600;
}
table {
margin: 10px;
}
</style> </head> <body>
<h1>リンクのページ</h1>
<hr>
<p>このページでは地元の情報源となるサイトを紹介します。</p>
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<td>色分け：</td>
<td><span class="menu blue">行政</span></td>
<td><span class="menu green">観光</span></td>
<td><span class="menu red">交通</span></td>
<td><span class="menu yellow">その他</span></td>
</tr>
</table> <table border="0" cellspacing="2" cellpadding="2">
<tr>
<td><a href="http://www.pref.shiga.jp/" title="滋賀県庁" target="new" class="menu blue">滋賀県</a></td>
<td><a href="http://www.city.yasu.lg.jp/" title="野洲市役所" target="new" class="menu blue">野洲市役所</a></td>
<td><a href="http://www.biwako-visitors.jp/" title="びわこビジターズビューロー" target="new" class="menu green">滋賀県観光情報</a></td>
</tr>
<tr>
<td><a href="http://www.hieizan.or.jp/" title="比叡山延暦寺" target="new" class="menu green">比叡山延暦寺</a></td>
<td><a href="http://oumijingu.org/" title="近江神宮" target="new" class="menu green">近江神宮</a></td>
<td><a href="http://www.shiga-miidera.or.jp/" title="園城寺" target="new" class="menu green">三井寺</a></td>
</tr>
<tr>
<td><a href="http://www.westjr.co.jp/" title="西日本旅客鉄道" target="new" class="menu red">JR西日本</a></td>
<td><a href="http://www.keihan.co.jp/" title="阪急電気鉄道" target="new" class="menu red">京阪電車</a></td>
<td><a href="http://www.sakamoto-cable.jp/" title="比叡山鉄道" target="new" class="menu red">坂本ケーブル</a></td>
</tr>
<tr>
<td><a href="http://www.biwakokisen.co.jp/" title="琵琶湖汽船" target="new" class="menu red">琵琶湖汽船</a></td>
<td><a href="http://www.bbc-tv.co.jp" title="びわ湖放送" target="new" class="menu yellow">びわ湖放送</a></td>
<td><a href="http://www.heiwado.jp/" title="平和堂" target="new" class="menu yellow">平和堂</a></td>
</tr>
</table>
<hr>
<p align="center"><a href="index.html">戻る</a></p>
</body> </html>
<body>内では、<span>タグと<a>タグにボタンに見せるクラスを割り当てています。ボタンの基本形状として枠線や余白の設定をmenuクラスに、4色のクラスとしてblue、green、red、yellowがあります。
クラスを２つ同時に割り当てるために、２つのクラスを半角スペースを空けて併記します。
<style>タグ内では、ボタンの5つのCSSに加えて、マウスを重ねた時（hover）の状態と色も用意します。マウスを重ねた時の設定には<a>タグを指定して、リンクの箇所にだけ対応させています。これは、色分け見本でマウスに反応しないようにするためです。
ボタン上に見せる枠線が「border-style: outset;」です。これで出っ張ったボタンに見えます。これに対して「border-style: inset;」を設定すると陰影が逆になって押し込んだように見えます。
色分け見本とリンクの２つのテーブルが連続しているため、２つはひっついてしまいます。そこで、<table>タグにCSSを使って余白（margin）を調節しています。
<a>タグのtarget属性には「new」を設定しています。「_blank」で新しいウィンドウ（タブ）にリンク先を出力できますが、新しいウィンドウを閉じないとどんどん新しいウィンドウが増えてしまいます。そこで、呼び出し先に任意の名前を付けてやると、1回目は新しいウィンドウが開きますが、そのままウィンドウを残しておくと、次はその同じウィンドウにリンク先を出力します。