スタイルシート,htmlやFirefox,Operaなどのブラウザの表示結果まで。タブメニューのいろいろ(一覧)タブメニューのいろいろ(一覧)タブメニューの作り方を、スタイルシートを中心にいろいろな実現パターンを実際に見てみましょう。多くのやり方があると思いますが、下記がパターンの一覧です。上記の画像を使用する場合をテーブルでレイアウトしてタブメニュー化1〜5の方法は下記のリンクをスタイルシートにて設定してます。『タブ』の色と同色の帯びを、その直下に設置する事が重要です。これは、2色の場合でも、複数色でも、画像を使用する場合でも共通に重要な事です。(『現在訪問しているページが、メニューのどこと一致しているか。href="リンク先">〜</a>を完全に取ってしまうと、スタイルシートを外した場合や、テキストブラウザなどでリンク部分が不明になってしまいますので、『マウスオーバー』時に『何も変化ない状態』が良いと思われます。sample(1)複数のリンクをスタイルシート(2色で表現)でタブメニュー化MENU:タブメニュー1タブメニュー2タブメニュー3タブメニュー4今は『タブメニュー1』を選択してます。【概要】選択されているタブの色が濃く、選択されていない方は薄い色を指定。▲(2)上記のもを複数色でタブメニュー化MENU:タブメニュー1タブメニュー2タブメニュー3タブメニュー4今は『タブメニュー1』を選択してます。下記の色を使用して背景色と罫線を変更してます。▲(3)さらに、上記の背景に角丸の画像を設置してタブメニュー化MENU:タブメニュー1タブメニュー2タブメニュー3タブメニュー4今は『タブメニュー1』を選択してます。上記の方法にプラスして、角が丸く見える様に、背景色を隠す(白色)の画像を設置してます。▲(4)リンク自体に画像を使用してタブメニュー化MENU:タブメニュー1タブメニュー2タブメニュー3タブメニュー4今は『タブメニュー1』を選択してます。下記の画像を切り替えて実行してます。▲(5)立体的な画像を使用してタブメニュー化MENU:タブメニュー1タブメニュー2タブメニュー3タブメニュー4今は『タブメニュー1』を選択してます。下記の様に重なりのある画像を切り替えて実行してます。▲(6)上記の画像を使用する場合をテーブルでレイアウトしてタブメニュー化MENU:今は『タブメニュー1』を選択してます。上記と同じ様ですが、全体をテーブルにて作成してあります。無料メール情報誌ワンランクUP講座ホームページのスタイルをワンランクアップ!基本調整や特選方法、さらにはインターネットの話題までメールマガジンでお届けします。本ページのW3Cでの記述検証結果は下記をクリックすると見れます。