角の丸い「タブ」をHTMLとCSSで作る方法(2ページ目)

1. タブを作るためのHTMLを記述する

まずは、タブを構成するHTMLを記述します。書き方はいろいろありますが、ここでは「ul要素」と「li要素」を使って作るリストの形で記述します。

例えば、以下のようにHTMLソースを記述します。

<ul>
   <li><a href="#">ホーム</a></li>
   <li><a href="#">新着</a></li>
   <li><a href="#">日記</a></li>
   <li><a href="#">BBS</a></li>
   <li><a href="#">リンク</a></li>
</ul>

上記は、5つの項目をリスト(箇条書き)で記述したHTMLソースです。ご紹介するまでもないでしょうが、ブラウザで表示させると下図のように見えます。実際に表示を確認してみたい場合は、サンプルページ1をご覧下さい。


何の装飾も施さなければ、上記のように標準的なリストの形で表示されます。このリストに、CSS(スタイルシート)で装飾を加えて、前ページに掲載した「角丸タブ」に見えるようにします。

装飾用のclass名やid名を付加しておく

上記で記述したリストを、後からCSSを使って細かく装飾できるようにするため、class属性やid属性を使って名称を付加しておきます。名称は何でも好きに付けて構いませんが、ここでは以下のように追記しておきます。

<ul class="menulist">
   <li id="mhome" ><a href="#">ホーム</a></li>
   <li id="minfo" ><a href="#">新着</a></li>
   <li id="mdiary"><a href="#">日記</a></li>
   <li id="mbbs"  ><a href="#">BBS</a></li>
   <li id="mlink" ><a href="#">リンク</a></li>
</ul>

ul要素(リスト全体を囲む要素)にはclass属性を使って「menulist」というクラス名を付加しています。li要素(リスト項目を作る要素)にはid属性を使って固有の名称を付加しています。id属性を使って1つ1つに異なる名称を加えたのは、タブの装飾を1つ1つ異なるものにするためです。分かりやすい名称を付けて下さい。

記述するHTMLソースは、上記で終わりです。必要なだけ項目を作成して下さい。次のページ以降で、これらのリストにCSSを適用して、「タブ」らしく見えるよう装飾していきましょう。