宮崎ロッド・Prime TimePiggy's Tail

リンクをタブのように見せるCSS - 2010-08-23

メニューのスクリーンショット
リンクの新旧比較・上が新しいタブスタイルのリンク

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

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

以下、リンクのHTMLです。<li>とか使っていないので至ってシンプルw

<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 | Permalink | 
Tagged as:

このカテゴリ以下の他の日記、メモなど

  1. Dropdown menuを(小)変更
  2. 本家ホームページのレスポンシブ化
  3. レスポンシブWebデザイン・2
  4. レスポンシブWebデザイン・1
  5. 本家日記のメンテナンス
  6. 宮崎ロッドのFacebookページです。
  7. 日記に Facebook のいいね!ボタンを付けてみる
  8. アーカイブスを折りたたみ表示に
  9. blosxomをアレコレ
  10. 2008年11月の子豚のしっぽ、アクセス・ベスト10

Tags

ATH (7), css (34), delight (25), facebook (46), firefox (15), google (5), html (11), maiking-delight (10), memo (70), netscape (7), NO TRUNKS (8), SEO (8), spam (15), twitter (8), war (11), WE LIVE HERE (11), いろいろ (18), うどん (6), お知らせ (5), つるや釣具店 (10), やきとり (6), イベント (45), イワナ (8), カゲロウ (5), カディス (9), カレー (10), カワゲラ (12), キャス練 (29), ギター (6), クラフト (6), ゲイリー・スナイダー (5), ゲイリー・バートン (6), ジャズ (172), スナップショット (5), スパゲッティ (7), ソウル (20), ソフトウェア (21), ソロー (5), タラノメ (9), チック・コリア (7), ニジマス (7), ハンドクラフト展 (14), バイク (9), バジル (8), バンブーロッド (5), パイプ (5), パット・メセニー (7), ビル・エヴァンス (20), ピアノ (30), フライ (59), フライタイイング (18), フライライン (6), メモ (202), ヤマメ (17), ランディングネット (26), ラーメン (9), リールシート (8), ロッドメイキング (11), 人物 (41), 出来事 (12), 大雪 (5), 奥多摩 (65), 奥多摩川 (32), 小菅川 (80), 小菅川C&R (8), 小菅川冬季ニジマス釣場 (15), 山菜 (6), 新年 (16), 更新 (41), 東京トラウトカントリー (5), (10), 水生昆虫 (12), 渓流フライ教室 (30), (41), 田渕義雄 (6), 矢野シルクライン (7), (22), 読書 (55), 道志川 (6), 選挙 (6), (20), 雑感 (176), 雑誌 (7)