【概要】 選択されているタブの色が濃く、選択されていない方は薄い色を指定。 選択中の色■(#ff3333) ←→ 選択外の色■(#ffcccc) (その他のパターンの一覧はタブメニューのいろいろ(一覧)で見れます。) 【重要】 『タブ』の色と同色の帯びを、その直下に設置する事が重要です。 これは、2色の場合でも、複数色でも、画像を使用する場合でも共通に重要な事です。 (『現在訪問しているページが、メニューのどこと一致しているか。』を表現する為です。) 現在訪問しているページ自体のリンクは選択できない様にするのが一般的ですが、リンク自体の<a href="リンク先">~</a>を完全に取ってしまうと、スタイルシートを外した場合や、テキストブラウザなどでリンク部分が不明になってしまいますので、『マウスオーバー』時に『何も変化ない状態』が良いと思われます。
今回は、以前のインライン化を応用したタブメニューに挑戦しましょう。完成系は、以下のようになります。 作ってみよう 一から作ってみましょう。 <ul id="tabnavi"> <li><a href="#">ホーム</a></li> <li id="here"><span>日記</span></li> <li><a href="#">掲示板</a></li> <li><a href="#">自己紹介</a></li> </ul> <div id="main"> ここに本体コンテンツ。 </div> 今回、わざわざ本体コンテンツを用意してあるのは、ちょっと特殊なことをするためです。その種明かしは、あとでします。 スタイルシートを書いていくことにします。 以前のページでしたように、まずインラインにして、それを少しばかり整形します。 #tabnavi { list-style-type: non
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く