【CSS】パンくずリスト

HTMLとCSSでデザインされたパンくずリストのサンプルです。ホームページ作りにご利用ください。

基本HTML

<div class="breadcrumb">
  <nav>
    <ul>
      <li><a href="./"><i class="fas fa-map-marker-alt"></i> Home</a></li>
      <li><a href="">カテゴリ</a></li>
      <li><a href="">子カテゴリ</a></li>
      <li><a href="">コンテンツ</a></li>
      <li class="active">今見てるページのタイトル</li>
    </ul>
  </nav>
</div>

基本になるHTMLです。CSSを変えることでデザインします。このHTMLは本サイトでも使用しているものです。

下で紹介するボックスの共通CSSです。「色」以外のデザインCSSです。

使い方

共通CSSをコピー&ペーストします。貼り付ける場所は下記をご覧ください。

管理画面内の貼り付ける場所

CSS: 管理画面のHEAD間編集かCSS編集へコピペしてください。
HTML: 管理画面の編集枠へコピペしてください。

HEAD間編集に記述する際は <style> と </style> の中に書いてください。CSS編集に記述する場合は <style> と </style> は書いてはダメです。

分からないことは「ユーザー助け合い掲示板」で聞いてみよう

スマホの狭い画面をはみ出した部分は、ヌルっと横スクロールします。それではデザインサンプルをご覧ください。

コードを見てみる

CSS

#breadcrumb{
  border:1px solid #ccc;
  border-width:1px 0;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  width:100%;
}
#breadcrumb ul,
#breadcrumb li{
  margin:0;
  padding:0;
}
#breadcrumb a{
  color:#888;
  text-decoration:none;
}
#breadcrumb ul{
  white-space:nowrap;
  display:flex;
  margin:auto;
}
#breadcrumb li{
  list-style:none;
  font-size:14px;
  height:30px;
  line-height:30px;
  margin-right:35px;
  position:relative;
}
#breadcrumb li:before,
#breadcrumb li:after{
  content:"";
  display:block;
  position:absolute;
  top:0;
  border-top:15px solid transparent;
  border-right:15px solid transparent;
  border-bottom:15px solid transparent;
}
#breadcrumb li:before{
  right:-40px;
  border-left:15px solid #aaa;
}
#breadcrumb li:after{
  right:-39px;
  border-left:15px solid #fff;
}
#breadcrumb li:first-child{
  padding-left:18px;
}
#breadcrumb li.active{
  color:#50b6e7;
  font-weight:bold;
}
#breadcrumb li a .fa-map-marker-alt{
  color:#ff8873;
}

コードを見てみる

CSS

#breadcrumb{
  border-width:1px 0;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  width:100%;
}
#breadcrumb ul,
#breadcrumb li{
  margin:0;
  padding:0;
}
#breadcrumb a{
  color:#888;
  text-decoration:none;
}
#breadcrumb ul{
  white-space:nowrap;
  display:flex;
  margin:auto;
}
#breadcrumb li{
  list-style:none;
  font-size:14px;
  height:30px;
  line-height:30px;
  margin-right:35px;
  position:relative;
}
#breadcrumb li:before,
#breadcrumb li:after{
  content:"";
  display:block;
  position:absolute;
  top:8px;
  border-top:5px solid transparent;
  border-right:5px solid transparent;
  border-bottom:5px solid transparent;
}
#breadcrumb li:before{
  right:-30px;
  border-left:5px solid #aaa;
}
#breadcrumb li:after{
  right:-29px;
  border-left:5px solid #fff;
}
#breadcrumb li:first-child{
  padding-left:18px;
}
#breadcrumb li:last-child:before{
  border:0;
}
#breadcrumb li.active{
  color:#50b6e7;
  font-weight:bold;
}
#breadcrumb li a .fa-map-marker-alt{
  color:#ff8873;
}

コードを見てみる

CSS

#breadcrumb{
  border-width:1px 0;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  width:100%;
}
#breadcrumb ul,
#breadcrumb li{
  margin:0;
  padding:0;
}
#breadcrumb a{
  color:#888;
  text-decoration:none;
  border:1px solid #ccc;
  padding:4px 6px;
}
#breadcrumb ul{
  white-space:nowrap;
  display:flex;
  margin:auto;
}
#breadcrumb li{
  list-style:none;
  font-size:14px;
  height:30px;
  line-height:30px;
  margin-right:20px;
  position:relative;
}
#breadcrumb li:first-child{
  padding-left:18px;
}
#breadcrumb li.active{
  color:#50b6e7;
  font-weight:bold;
}
#breadcrumb li a .fa-home{
  color:#ff8873;
}

コードを見てみる

CSS

#breadcrumb{
  border:1px solid #ccc;
  border-width:1px 0;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  width:100%;
}
#breadcrumb ul,
#breadcrumb li{
  margin:0;
  padding:0;
}
#breadcrumb a{
  color:#888;
  text-decoration:none;
}
#breadcrumb ul{
  white-space:nowrap;
  display:flex;
  margin:auto;
}
#breadcrumb li{
  list-style:none;
  font-size:14px;
  height:30px;
  line-height:30px;
  margin-right:35px;
  position:relative;
}
#breadcrumb li:before,
#breadcrumb li:after{
  content:"";
  display:block;
  position:absolute;
  top:0;
/*  border-top:15px solid transparent;*/
  border-right:5px solid transparent;
  border-bottom:15px solid transparent;
}
#breadcrumb li:before{
  right:-30px;
  border-top:15px solid #aaa;
  border-left:5px solid #aaa;
}
#breadcrumb li:after{
  right:-29px;
  border-top:15px solid #fff;
  border-left:5px solid #fff;
}
#breadcrumb li:first-child{
  padding-left:18px;
}
#breadcrumb li:last-child:before{
  border:0;
}
#breadcrumb li.active{
  color:#50b6e7;
  font-weight:bold;
}
#breadcrumb li a .fa-map-marker-alt{
  color:#ff8873;
}

コードを見てみる

CSS

#breadcrumb{
  border:1px solid #ccc;
  border-width:1px 0;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  width:100%;
}
#breadcrumb ul,
#breadcrumb li{
  margin:0;
  padding:0;
}
#breadcrumb a{
  color:#888;
  text-decoration:none;
}
#breadcrumb ul{
  white-space:nowrap;
  display:flex;
  margin:auto;
}
#breadcrumb li{
  list-style:none;
  font-size:14px;
  height:30px;
  line-height:30px;
  margin-right:15px;
  padding-right:15px;
  position:relative;
  border-right:1px solid #ccc;
  border-radius:30px;
}
#breadcrumb li:first-child{
  padding-left:18px;
}
#breadcrumb li:last-child:before{
  border:0;
}
#breadcrumb li.active{
  color:#50b6e7;
  font-weight:bold;
}
#breadcrumb li a .fa-map-marker-alt{
  color:#ff8873;
}

コードを見てみる

CSS

#breadcrumb{
  background:#272b32;
  border:4px solid #f2f485;
  border-width:1px 0;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  width:100%;
}
#breadcrumb ul,
#breadcrumb li{
  margin:0;
  padding:0;
}
#breadcrumb a{
  color:#f2f485;
  text-decoration:none;
}
#breadcrumb ul{
  white-space:nowrap;
  display:flex;
  margin:auto;
}
#breadcrumb li{
  list-style:none;
  font-size:14px;
  height:30px;
  line-height:30px;
  margin-right:35px;
  position:relative;
}
#breadcrumb li:before,
#breadcrumb li:after{
  content:"";
  display:block;
  position:absolute;
  top:0;
  border-top:15px solid transparent;
  border-right:15px solid transparent;
  border-bottom:15px solid transparent;
}
#breadcrumb li:before{
  right:-40px;
  border-left:15px solid #f2f485;
}
#breadcrumb li:after{
  right:-39px;
  border-left:15px solid #272b32;
}
#breadcrumb li:first-child{
  padding-left:18px;
}
#breadcrumb li:last-child:before{
  border:0;
}
#breadcrumb li.active{
  color:#d2deec;
  font-weight:bold;
}
#breadcrumb li a .fa-map-marker-alt{
  color:#50b6e7;
}

路線図っぽいパンくずリスト

コードを見てみる

CSS

#breadcrumb{
  border-width:1px 0;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  width:100%;
}
#breadcrumb ul,
#breadcrumb li{
  margin:0;
  padding:0;
}
#breadcrumb a{
  color:#888;
  text-decoration:none;
}
#breadcrumb ul{
  white-space:nowrap;
  display:flex;
  margin:auto;
}
#breadcrumb li{
  list-style:none;
  font-size:14px;
  height:50px;
  line-height:70px;
  padding-left:12px;
  padding-right:12px;
  position:relative;
}
#breadcrumb li:before{
  content:"";
  display:block;
  background:#2face7;
  position:absolute;
  top:10px;
  left:50%;
  width:calc(100% + 12px);
  height:2px;
}
#breadcrumb li:after{
  content:"";
  display:block;
  background:#2face7;
  position:absolute;
  top:5px;
  left:calc(50% - 6px);
  width:12px;
  height:12px;
  margin-bottom:12px;
  border-radius:50%;
}
#breadcrumb li:first-child{
  padding-left:18px;
}
#breadcrumb li:last-child:after{
  background:#fff;
  border:3px solid #2face7;
  top:3px;
  width:24px;
  height:10px;
  border-radius:0;
}
#breadcrumb li:last-child:before{
  background:transparent;
  width:0;
}
#breadcrumb li.active{
  color:#555;
  font-weight:bold;
}
#breadcrumb li a .fa-map-marker-alt{
  color:#ff8873;
}

コードを見てみる

CSS

#breadcrumb{
  border-width:1px 0;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  width:100%;
  counter-reset:number 0;
  background:#fff;
}
#breadcrumb ul,
#breadcrumb li{
  margin:0;
  padding:0;
}
#breadcrumb a{
  color:#888;
  text-decoration:none;
}
#breadcrumb ul{
  white-space:nowrap;
  display:flex;
  margin:auto;
}
#breadcrumb li{
  list-style:none;
  font-size:14px;
  height:70px;
  line-height:100px;
  padding-left:12px;
  padding-right:12px;
  position:relative;
}
#breadcrumb li:before{
  content:"";
  display:block;
  background:#2face7;
  position:absolute;
  top:20px;
  left:50%;
  width:calc(100% + 12px);
  height:2px;
}
#breadcrumb li.active{
  color:#555;
  font-weight:bold;
}
#breadcrumb li a:after{
  counter-increment:number 1;
  content:counter(number);
  position:relative;
  top:-28px;
  left:-46%;
  color:#fff;
  font-weight:bold;
  z-index:2;
}
#breadcrumb li:after{
  content:"";
  display:block;
  background:#2face7;
  position:absolute;
  top:5px;
  left:calc(50% - 16px);
  width:32px;
  height:32px;
  margin-bottom:12px;
  border-radius:50%;
  z-index:-1;
}
#breadcrumb li:first-child{
  margin-left:18px;
}
#breadcrumb li:last-child:before,
#breadcrumb li:last-child:after{
  background:transparent;
}
#breadcrumb li:nth-last-child(2):before{
  width:90%;
}
#breadcrumb li:last-child:after{
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  content:"\f21d";
  top:-28px;
  font-size:1.6em;
  color:#2face7;
}
#breadcrumb li a .fa-map-marker-alt{
  color:#ff8873;
}

コードを見てみる

CSS

#breadcrumb{
  border:1px solid #fff;
  border-width:1px 0;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  width:100%;
}
#breadcrumb ul,
#breadcrumb li{
  margin:0;
  padding:0;
}
#breadcrumb a{
  color:#888;
  text-decoration:none;
  margin:0 20px 0 0;
}
#breadcrumb ul{
  white-space:nowrap;
  display:flex;
  margin:auto;
}
#breadcrumb li{
  list-style:none;
  font-size:14px;
  height:30px;
  line-height:30px;
  margin-right:25px;
  position:relative;
  background:#e4e8e9;
}
#breadcrumb li:before,
#breadcrumb li:after{
  content:"";
  display:block;
  position:absolute;
  top:-10px;
  border-top:25px solid transparent;
  border-right:25px solid transparent;
  border-bottom:25px solid transparent;
}
#breadcrumb li:before{
  right:-40px;
  background:#e4e8e9;
  border-left:25px solid #fff;
}
#breadcrumb li:after{
  right:-32px;
  border-left:25px solid #e4e8e9;
}
#breadcrumb li:first-child{
  padding-left:18px;
}
#breadcrumb li:last-child:before,
#breadcrumb li:last-child:after{
  border-left:25px solid #fff;
}
#breadcrumb li:last-child:before,
#breadcrumb li:last-child:after,
#breadcrumb li:nth-last-child(2):after{
  border-top:25px solid #fff;
  border-right:25px solid #fff;
  border-bottom:25px solid #fff;
  background:#fff;
}
#breadcrumb li:last-child{
  background:#fff;
}
#breadcrumb li.active{
  color:#50b6e7;
  font-weight:bold;
  padding:0 20px 0 0;
}
#breadcrumb li a .fa-map-marker-alt{
  color:#ff8873;
}

コードを見てみる

CSS

#breadcrumb{
  background:-moz-linear-gradient(top, #fff 0%, #eee);
  background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
  border:1px solid #ddd;
  border-width:1px 0;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  width:100%;
}
#breadcrumb ul,
#breadcrumb li{
  margin:0;
  padding:0;
}
#breadcrumb a{
  color:#888;
  text-decoration:none;
}
#breadcrumb ul{
  white-space:nowrap;
  display:flex;
  margin:auto;
}
#breadcrumb li{
  list-style:none;
  font-size:14px;
  height:30px;
  line-height:30px;
  margin-right:0.5em;
  position:relative;
}
#breadcrumb li +  li:before{
  display:inline-block;
  padding-right:0.5em;
  color:#6c757d;
  content:">";
}
#breadcrumb li:first-child{
  padding-left:18px;
}
#breadcrumb li.active{
  color:#50b6e7;
  font-weight:bold;
}
#breadcrumb li a .fa-map-marker-alt{
  color:#ff8873;
}