パンくずリスト表示HTML&CSS

もくじ

• 表示例
• HTMLコード
• CSSコード
• 参考サイト

表示例

• 1. ホーム
  2. ページの名前
  3. ページの名前

HTMLコード

• • <ol class="navi" itemscope itemtype="http://schema.org/BreadcrumbList">
  • <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="#ホームのURL"><span itemprop="name">ホーム</span></a><meta itemprop="position" content="1"></li>
  • <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="#ページのURL"><span itemprop="name">ページの名前</span></a><meta itemprop="position" content="2"></li>
  • <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><span itemprop="name">ページの名前</span><meta itemprop="position" content="3"></li>
  • </ol>

CSSコード

• • ol.navi{
  • margin:0;padding:0;list-style:none;color:rgb(32,33,36);letter-spacing:-0.4em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  • }
  • ol.navi::before{
  • content:"";display:inline-block;width:12px;height:12px;margin:0 4px 0 0;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADPSURBVEhL7ZHrDcMgDIRJd2EelmGMLMM8DNPKli8yj4CJwr9+EiL4zB0Qt0KM8UtDlu9Cxt57Hq+HaPPVkEPmW8gopSSrkhCCO89z6DEUR+ZgFnIr9MxzztxPT8QFYRTSLY7MgTWkKVjMgSWkWMzMSadZm5ifizZTsx4iMVpHENB7ap2TqDA7ea3XJyVj+WSgH0/MgSWERS1YzcEohLwKYdUc9ELgdRU1K+agDgFN4Yk56IU0AfWPWkU/M/GReRvmG9Qns/Ztv8E/YMrmAOd+eDTG5IIFqkgAAAAASUVORK5CYII=");background-position:left bottom;background-repeat:no-repeat;background-size:12px 12px;
  • }
  • ol.navi li{
  • display:inline-block;color:rgb(32,33,36);letter-spacing:0;
  • }
  • ol.navi li:last-child{
  • margin:0 0 0 4px;
  • }
  • ol.navi li a{
  • display:inline-block;padding:2px 4px 0 4px;color:rgb(32,33,36);text-decoration:none;
  • }
  • ol.navi li a:hover{
  • background-color:rgb(229,243,255);
  • }
  • ol.navi li::after{
  • content:"";display:inline-block;width:12px;height:12px;margin:0 4px 0 4px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACTSURBVEhLzZHRDYAgDETRXdh/IIbRXII/QFuuLYkvMYR43JNaNGqtD56+dXH1dWIsbq2JWY3lIemrPZLpgDUSVkLd4IORiMEsiRrKkJiBqGTrmhHJlgB4JdsC4JFQAsBK7r4e4z8jOvqTveXAFETKgfoyWg7EQEY5WIayysEUzCwH1A3YciAeGCWechNIrJHplPICyuNZ0C03X0QAAAAASUVORK5CYII=");background-position:left bottom;background-repeat:no-repeat;background-size:12px 12px;
  • }
  • ol.navi li:last-child::after{
  • display:inline;
  • }

参考サイト

• BreadcrumbList - schema.org
• 上記サイトの一番下にあるMicrodataのHTMLコードを元にして作りました。
• パンくずリスト | Google Developers