システム開発ブログ

パンくずリストのデザイン

山田

山田 (2011年7月27日 12:59)
Webｺﾝｻﾙﾃｨﾝｸﾞ部

こんにちわ。
みなさんはパンくずリストってご存知でしょうか。
大きなサイトなどで、ユーザがサイト内で迷子にならないように付ける 小さなナビゲーションのことをいいます。
「ヘンゼルとグレーテル」で道に迷わないため落とした「パン屑」が語源だそうです。
なんだか可愛い語源ですよね。

このパンくずリスト。
デザインをいれることでページを分かりやすくするだけではなく 華やかにもしてくれます。
そんなCSSをご紹介します。
pankuzu.jpg

【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】

みなさんもぜひポイントとして使ってみてください。
システムのトラブル解決を承ります。すぐにシステムリフォームを体験できますシステム診断・システムリフォームのお申し込みはこちらから。

システム開発ブログ

Twitterでilovex_officialをフォローしてください

最近の記事

カテゴリー

部署

月別アーカイブ

以前の部署別ブログ

検索

ページのトップ