宮崎ロッド・Prime TimePiggy's Tail

Piggy's Tail

宮崎ロッドの日記、メモ、その他

リンクをタブのように見せるCSS 2010-08-23 - Web関連 » miyazaki-rod.com,

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

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

元の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 | English | Permalink | 

このカテゴリ [ Web関連 » miyazaki-rod.com ] の他の日記、メモなど:

  1. ホームページのメンテナンス
  2. 写真撮影
  3. ロッドを撮影する
  4. Dropdown menuを(小)変更
  5. 本家ホームページのレスポンシブ化
  6. レスポンシブWebデザイン・2
  7. レスポンシブWebデザイン・1
  8. 本家日記のメンテナンス
  9. 宮崎ロッドのFacebookページです。
  10. 日記に Facebook のいいね!ボタンを付けてみる

Tag cloud://///////Tap here/////////

ATH (7), blosxom (4), css (35), delight (26), facebook (51), firefox (15), google (5), html (11), instagram (10), maiking-delight (10), memo (12), netscape (7), NO TRUNKS (8), passage (4), reloaded (4), SEO (8), spam (15), TOKYOトラウトカントリー (10), twitter (9), war (11), WE LIVE HERE (11), windows (4), いろいろ (18), うどん (6), お知らせ (5), つぶやき (4), つるや釣具店 (10), やきとり (6), イベント (45), イリイチ (4), イワナ (8), ウエイン・ショーター (4), オーネット・コールマン (4), カゲロウ (5), カディス (9), カレー (10), カワゲラ (12), カンナ (4), キャス練 (29), ギター (7), クラフト (6), ゲイリー・スナイダー (5), ゲイリー・バートン (6), ジャズ (42), ジョン・コルトレーン (4), スナップショット (5), スパゲッティ (7), ソウル (20), ソフトウェア (21), ソロー (5), タラノメ (10), チック・コリア (7), チャールス・ロイド (4), ツバメ (4), ニジマス (7), ハンドクラフト展 (14), バイク (9), バジル (8), バンブーロッド (14), パイプ (5), パスタ (4), パット・メセニー (7), ビル・エヴァンス (20), ピアノ (31), フライ (60), フライライン (6), メモ (38), メンテナンス (4), ヤマメ (19), ランディングネット (29), ラーメン (9), リールシート (12), ロッドメイキング (16), ヴィンス・ガラルディ (4), 人物 (43), 出来事 (12), 喫茶店 (4), 大雪 (5), 奥多摩 (68), 奥多摩川 (36), 小菅川 (83), 小菅川C&R (8), 小菅川冬季ニジマス釣場 (15), 山菜 (7), 岳人 (4), 新年 (16), 日原川 (4), 昆虫 (4), 映画 (4), 更新 (41), 東京トラウトカントリー (5), (10), 水生昆虫 (12), 渓流フライ教室 (33), (42), 田渕義雄 (6), 矢野シルクライン (7), (22), 藤沢周平 (4), 解禁イベント (4), (4), 読書 (15), 道志川 (6), 選挙 (7), (20), 野草 (4), 野鳥 (4), 雑感 (47), 雑誌 (7), 餃子 (4)


Piggy's Tail (sitemap.xml) - Miyazaki Rod Prime Time Bamboo Rod
© Design & Build by "Prime Time"

↑ Top