タブ型メニュー

メニューをタブ型で表示させることにより、今どのページを見ているのかが分かりやすくなります。

１）HTMLファイルでリストを作り、リンク設定をします。属性はidではなくclassにしてください。

２）リスト全体を<div>を使ってグループ化します。

３）現在自分が見ているリストを

4）display:block;を使い、リストをブロック要素に変えます。

5）float:leftで回り込ませて、リストを横に並べます。

６）そのタブページが選択されている時・されていない時の各指定をします。
CSSファイルに、選択されているときは「on」選択されていないときは「off」で背景色の指定をします。
↓「on」の場合の例↓

「off」の場合も同様に作る。

7）様々な場合のリンク色の指定をする

8）文章の部分（"box2"）とタブの部分をくっつけるために、box2のmarginを0pxに設定します。
(Safariの場合、この設定をしてもbox1とbox2の間に空白が出来てしまいます。)