ホームページ作成(メニューを作る）
無料！発信中！メール情報誌！

ホームページ作成しよう！
HTML〜スタイルシート

ホームページ作成ＴＯＰ > メニュー > タブメニューのいろいろ（一覧）

タブメニューのいろいろ（一覧）

タブメニューの作り方を、スタイルシートを中心にいろいろな実現パターンを実際に見てみましょう。

多くのやり方があると思いますが、下記がパターンの一覧です。

  1. 複数のリンクをスタイルシート（２色で表現）でタブメニュー化
  2. 上記のもを複数色でタブメニュー化
  3. さらに、上記の背景に角丸の画像を設置してタブメニュー化
  4. リンク自体に画像を使用してタブメニュー化
  5. 立体的な画像を使用してタブメニュー化
  6. 上記の画像を使用する場合をテーブルでレイアウトしてタブメニュー化

１〜５の方法は下記のリンクをスタイルシートにて設定してます。

MENU:

【重要】

  1. 『タブ』の色と同色の帯びを、その直下に設置する事が重要です。
    これは、２色の場合でも、複数色でも、画像を使用する場合でも共通に重要な事です。
    （『現在訪問しているページが、メニューのどこと一致しているか。』を表現する為です。）
  2. 現在訪問しているページ自体のリンクは選択できない様にするのが一般的ですが、リンク自体の<a href="リンク先">〜</a>を完全に取ってしまうと、スタイルシートを外した場合や、テキストブラウザなどでリンク部分が不明になってしまいますので、『マウスオーバー』時に『何も変化ない状態』が良いと思われます。
sample

（１）複数のリンクをスタイルシート（２色で表現）でタブメニュー化

MENU:

今は『タブメニュー１』を選択してます。

【概要】選択されているタブの色が濃く、選択されていない方は薄い色を指定。

選択中の色■(#ff3333) ←→ 選択外の色■(#ffcccc)

このタブメニューの作り方を確認

ホームページ作成ＴＯＰ > メニュー > タブメニューのいろいろ（一覧） > このページのＴＯＰ　▲

（２）上記のもを複数色でタブメニュー化

MENU:

今は『タブメニュー１』を選択してます。

下記の色を使用して背景色と罫線を変更してます。

選択中の色■(#ff3333) ←→ 選択外の色■(#ffcccc)
選択中の色■(#3333ff) ←→ 選択外の色■(#ccccff)
選択中の色■(#33cc33) ←→ 選択外の色■(#ccffcc)
選択中の色■(#ff6600) ←→ 選択外の色■(#ffff99)

このタブメニューの作り方を確認

ホームページ作成ＴＯＰ > メニュー > タブメニューのいろいろ（一覧） > このページのＴＯＰ　▲

（３）さらに、上記の背景に角丸の画像を設置してタブメニュー化

MENU:

今は『タブメニュー１』を選択してます。

上記の方法にプラスして、角が丸く見える様に、背景色を隠す（白色）の画像を設置してます。

選択中の色■(#ff3333) ←→ 選択外の色■(#ffcccc)
選択中の色■(#3333ff) ←→ 選択外の色■(#ccccff)
選択中の色■(#33cc33) ←→ 選択外の色■(#ccffcc)
選択中の色■(#ff6600) ←→ 選択外の色■(#ffff99)

このタブメニューの作り方を確認

ホームページ作成ＴＯＰ > メニュー > タブメニューのいろいろ（一覧） > このページのＴＯＰ　▲

（４）リンク自体に画像を使用してタブメニュー化

MENU:

今は『タブメニュー１』を選択してます。

下記の画像を切り替えて実行してます。

　←→　

　←→　

　←→　

　←→　

このタブメニューの作り方を確認

ホームページ作成ＴＯＰ > メニュー > タブメニューのいろいろ（一覧） > このページのＴＯＰ　▲

（５）立体的な画像を使用してタブメニュー化

MENU:

今は『タブメニュー１』を選択してます。

下記の様に重なりのある画像を切り替えて実行してます。

このタブメニューの作り方を確認

ＴＯＰ > メニュー > タブメニューのいろいろ（一覧） > このページのＴＯＰ　▲

（６）上記の画像を使用する場合をテーブルでレイアウトしてタブメニュー化

MENU:

今は『タブメニュー１』を選択してます。

上記と同じ様ですが、全体をテーブルにて作成してあります。

このタブメニューの作り方を確認

ホームページ作成ＴＯＰ > メニュー > タブメニューのいろいろ（一覧） > このページのＴＯＰ　▲