宮崎ロッド・Prime TimePiggy's Tail

Piggy's Tail

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

メモ:ツリーをCSSと画像で 2005-03-27 - Web関連 » miyazaki-rod.com,

当ホームページの「Site Map」で使っているツリーは以下のように作られています。

ツリー
・該当個所のスクリーンショット

ツリー用の画像1:フォルダーと2:ツリー用パーツ1と3:ツリー用パーツ2

XHTML

<div class="main-pane">
<ul>
<li class="dir"><span>main</span>
<ul>
  <li><a href="main/bamboo2p.html">2 Piece Rod</a></li>
  <li><a href="main/bamboo3p.html">3 Piece Rod</a></li>
  <li><a href="main/bamboo45p.html">4-5 Piece Rod</a></li>
  <li><a href="main/bamboo_thumb_idx.html">Bamboo Rod Index</a></li>
  <li><a href="main/handmade_rseat.html">Reel Seat</a></li>
  <li><a href="main/case.html">Case</a></li>
  <li><a href="main/seleguide.html">Selection Guide</a></li>
  <li class="end"><a href="main/faqs.html">FAQ</a></li>
  </ul>
</li>
</ul>
</div>

CSS

#main-pane ul li.dir span
{
  font-family  : Verdana, Arial, Sans-Serif;
  color        : #696969;
  background   : url(../image_theme/folder_14.gif)〔1の画像〕 left center no-repeat;
  font-size    : 1.2em;
  font-weight  : bold;
  padding-left : 23px;
}

#main-pane ul li ul
{
  margin-left  : 8px;
}

#main-pane ul li ul li a ,
#main-pane ul li ul li.end a
{
  font-family  : Verdana, Arial, Sans-Serif;
  font-weight  : normal;
  padding-left : 15px;
}

#main-pane ul li ul li
{
  background   : url(../image_theme/dir_sub.gif)〔2の画像〕 left center no-repeat;
}

#main-pane ul li ul li.end
{
  background   : url(../image_theme/dir_end.gif)〔3の画像〕 left center no-repeat;
}

入れ子にしたリスト<li>の行頭に画像をバックグラウンドで読み込ませているわけです。2と3の画像は破線にするといいかも。

更新:2005-4-04

2と3の画像に当たる#main-pane ul li ul li a#main-pane ul li ul li.end a から「a」を削除しました。こうするとツリーが途切れることなく表示されます。透過gifは面白いです。

Posted by TM* at 2005-03-27 12:14 | 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