カテゴリ（目次）ボタンを作ろう
今度はタイトルの下にあるカテゴリボタン（目次ボタン）を作ってみましょう。
もう一度サンプルのサイトを見てみます。→サンプルサイト
サンプルでは、「トップページへ戻る」リンクボタンをはじめ、サント内ほ各ページへのリンクが、等間隔で横一列に並んでいます。
これからやる作業を分解すると、以下のようになります。
- テキストを「等間隔」で「横一列」に並べる
- テキストに、各ページへ飛ぶリンク機能を持たせる
- ボタンに色をつける
ボタンを横一列に並べるには、「リスト（項目）を並べる」方法や、「テーブル（表）タグを使う」方法など、やり方はいろいろあります。
もっとも簡単なのはテーブル（表）を使うやり方で、多くのサイトでもいまだ使われています。一行だけの表をつくるわけですね。ですが、ホームページのデザインやレイアウトとしてテーブルを用いることは、Webの世界ではあまり好ましくありません。
ここでは「リスト（項目）」を横一列に並べるやり方で解説します。
まずはindex.htmlのカテゴリ部分に、リストタグとリンクタグを記述していきます。
<div id="category">
<ul>
<li><a href="./index.html">トップページ</a></li>
<li><a href="./page2.html">ポイント別狙い</a></li>
<li><a href="./page3.html">基本的な技術</a></li>
<li><a href="./page4.html">釣果報告</a></li>
<li><a href="./page5.html">リンク集</a></li>
</ul>
</div>
必要なくなった<br />タグ（改行タグ）は適宜消していきましょう。
今のところは上のように、ボタンがリスト表示になり、縦に並んでいます。
CSSでリンクボタンの大きさ・色を決め、等間隔で横一列にします。
#category ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#category ul li {
float: left;
}
#category ul li a {
display: block;
width: 160px;
line-height: 30px;
background-color: #0000ff;
text-align: center;
text-decoration: none;
color: #ffffff;
font-weight: bold;
}
ポイントは、<li>と<a>（アンカー要素）の指定です。
通常のリストは縦に並んでしまいますが、 float: left; とすることでテトリスのように左から順に積まれていきます。これをフロート（浮動化）といいますが、ちょっと難しいのでここでは省略します。
リストを横に並べたあと、<a>を display: block; とすることで、ただの文字ではなく「箱（block）」形式にしています。箱になるということは、幅・高さのサイズが指定できるということです。
これだけでもそれっぽくなってきましたが、もうひと手間加えましょう。
カテゴリボタンの上にマウスをのせたときに、リンクボタンであることがわかりやすくなるように色を変えてあげます。
スタイルシートに以下を追加します。
#category ul li a:hover {
color: #ffa500;
}
a:hover という記述は、<a>にマウスをのせたとき（マウスオーバー）だけは別のデザインにするよ、という指定です。
今回は青色一色のボタンになっていますが、色ではなくボタンの画像を背景として設定してあげれば、もっと立派なボタンになりますよ。