Piggy's Tail

リンクをタブのように見せるCSS

リンクの新旧比較・上が新しいタブスタイルのリンク

ホームページ・メインコンテンツのリンクを画像上のようにボタンからタブっぽく変更してみました。上が新しいタブのリンク、その下が今までのボタンタイプのリンクです。画像はお知らせのページです。

元のHTMLはそのままでCSSのみの変更で実現出来ました。CSS3的にはちょっとアレ（borderとbackgroundが同色指定、タブの角の丸めに-moz-border-radius）ですが見た目、リンクとコンテンツの関連が良くなったかなということでその辺りは後々改善しようと思います。

以下、リンクのHTMLです。＜li＞とか使っていないので至ってシンプルｗ

<div id="guide">
<span>お知らせ</span>
<a href="info.html">From "Prime Time"</a>
<a href="info_log.html">Log File</a>
＆nbsp;
<a href="../content/searchsite.html" title="サイト内検索へ">Search</a>
</div>

以下、新しいタブ・タイプのリンクの主なCSSです。

/* #guide */

#guide {
   font-size          : 0.9em;
   margin             : 0;
   text-align         : right;
   border-bottom      : 2px solid #e9e9d1;
}
 
#guide a {
   color              : #666;
   background-color   : #ffffff;
   border-top         : 1px solid #808080;
   border-left        : 1px solid #808080;
   border-right       : 1px solid #808080;
   border-bottom      : 1px solid #c0c0c0; /* 他のページへのタブ */
   text-decoration    : none;
}

#guide span {
   color              : #000000;
   background-color   : #ffffff;
   border-left        : 1px solid #666;
   border-right       : 1px solid #666;
   border-bottom      : 3px solid #fff; /* 現在位置のタブ */
}

#guide a, #guide span {
   padding            : 1px 3px 1px 3px;
   -moz-border-radius : 4px 4px 0 0;
}

#guide a:visited {
   color              : #696969;
   background-color   : #ffffff;
}
 
#guide a:hover {
   color              : #000000;
   background-color   : #fae9a7;
   border-bottom      : 2px solid #fae9a7;
}

#guide a:hover, #guide span {
   border-top         : 3px solid #edb636;
}

/* 親divのbackground-colorは#e9e9d1 */

…というようにborder-bottomの設定（色と太さ）がミソになっています。コレ、なかなか気が付きませんでした。CSSの変更なので検索エンジンのキャッシュにも自動的に適用されるのもいいですね〜

付記：タブの角の丸めはFirefox 3ブラウザでご覧いただきますとそのようになります。

Posted by TM* at 2010-08-23 12:02 in Web関連 » miyazaki-rod.com | English |  |