Webアイコンフォントを使って表現する応用の効くシンプルなパンくず
意外と役に立つ、応用の効きやすいパンクズリストのサンプルです。
Font Awesomeの矢印を:before擬似要素を使って表示することで、HTMLがスッキリします。
contentプロパティに使いたいアイコンフォントを入れることで、
ちょっとデザインを変更するのにわざわざ画像を作り直したりすることもなくなり、
cssの変更だけで楽チン簡単更新です。
パンくずリスト（breadcrumb list）は、ウェブサイト内でのウェブページの位置を、ツリー構造を持ったハイパーリンクの一覧として示すもの。パンくずナビ、トピックパス、フットパスとも言う。英語では単に“breadcrumbs”または“breadcrumb navigation”というのが一般的である。
ウェブディレクトリのような大規模なウェブサイト内で、利用者がサイト内での現在位置を見失わないようにし、ナビゲーションを助けるために使われる。「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。
wikiより引用
使用するclass名
.topicpath
View
Source
HTML
<div class="topicpath">
<ol>
<li><a href="/">ホーム</a></li>
<li><a href="#">親ページ</a></li>
<li>子ページ</li>
</ol>
</div>
CSS
.topicpath{
clear: both;
line-height: 1;
width: 100%;
max-width: 960px;
margin: 0 auto;
}
.topicpath ol {
display: inline-block;
text-align: left;
}
.topicpath ol li {
display: inline-block;
font-size: 11px;
}
.topicpath ol li:before {
content: "\f105";
display: inline-block;
padding: 0 0.5em;
font-family: FontAwesome;
}
.topicpath ol li:first-child:before { display: none; }
.topicpath ol li a {
color: #666;
text-decoration: none;
}
@media print, screen and (min-width: 768px) {
.topicpath ol li a:hover { text-decoration: underline; }
}
@media screen and (max-width: 767px) {
}
SCSS
//リンクサイズ
@mixin topicPath_text_size {
font-size:$base_text_size - 3px;
}
//マウスアクション（normal）
@mixin topicpath_action_normal {
color:$text_color;
text-decoration:none;
}
//マウスアクション（hover）
@mixin topicpath_action_hover {
text-decoration:underline;
}
//表示設定
$topicpath_display_pc :block;
$topicpath_display_sp :none;
.topicpath {
clear:both;
line-height:1;
width:100%;
max-width: $site_width;
margin:0 auto;
ol {
display:inline-block;
text-align:left;
li {
display:inline-block;
@include topicpath_text_size;
&:before {
content:"\f105";
display:inline-block;
padding:0 0.5em;
font-family:$icon_font;
}
&:first-child:before {
display:none;
}
a {
@include topicpath_action_normal;
}
}
}
}
@media print, screen and (min-width: 768px){
.topicpath {
display:$topicpath_display_pc;
a {
&:hover {
@include topicpath_action_hover;
}
}
}
}
@media screen and (max-width: 767px){
.topiPath {
display:$topicpath_display_sp;
padding:0 $site_side_margin;
}
}
