ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

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

左上と右上の角を丸くして「タブ」に見えるデザインをHTMLとCSS(スタイルシート)で作成する方法を解説。リンクに長方形の枠を加えて上側の角を丸くすると「タブ」らしく見え、視覚的に分かりやすいナビゲーション機能が作れます。文字はテキスト・配色はCSSで記述するため、ソースをコピーするだけでいくつでも並べられ、修正も簡単です。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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を適用して、「タブ」らしく見えるよう装飾していきましょう。

  • 前のページへ
  • 1
  • 2
  • 3
  • 7
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます