山田 (2011年7月27日 12:59) Webコンサルティング部
#crumbs { height:2.3em; border:1px solid #dedede; } #crumbs li { float:left; line-height:2.3em; color:#777; padding-left:.75em; } #crumbs li a { background:url(img/crumbs.gif) no-repeat right center; display:block; padding:0 15px 0 0; } #crumbs li a:link, #crumbs li a:visited { color:#777; text-decoration:none; } a:link, a:visited, #crumbs li a:hover, #crumbs li a:focus { color:#dd2c0d; }
パンくずリストのデザイン
山田 (2011年7月27日 12:59)
Webコンサルティング部
みなさんはパンくずリストってご存知でしょうか。
大きなサイトなどで、ユーザがサイト内で迷子にならないように付ける 小さなナビゲーションのことをいいます。
「ヘンゼルとグレーテル」で道に迷わないため落とした「パン屑」が語源だそうです。
なんだか可愛い語源ですよね。
このパンくずリスト。
デザインをいれることでページを分かりやすくするだけではなく 華やかにもしてくれます。
そんなCSSをご紹介します。
【CSS】
#crumbs { height:2.3em; border:1px solid #dedede; } #crumbs li { float:left; line-height:2.3em; color:#777; padding-left:.75em; } #crumbs li a { background:url(img/crumbs.gif) no-repeat right center; display:block; padding:0 15px 0 0; } #crumbs li a:link, #crumbs li a:visited { color:#777; text-decoration:none; } a:link, a:visited, #crumbs li a:hover, #crumbs li a:focus { color:#dd2c0d; }【HTML】
みなさんもぜひポイントとして使ってみてください。