さぁ!検索しよう!

お洒落且つレスポンシブなパンくずリストの作り方です。

DEMO

ビューポートのサイズによってパンくずリストがモバイル向け、PC向けに切り替わることが確認できるはずです。

HTML

<div class="bread">
  <ul class="ul">
    <li><a href="#">aaa</a></a>
    </li>
    <li><a href="#">bbbb</a></li>
    <li><a href="#">cccc</a></li>
    <li>dddd</li>
  </ul>
</div>

CSS

CSS
{.code-h}

body {
  background: #333;
  margin: 0;
}

.bread {
  background: #ddd;
  width: 100%;
}

@media screen and (min-width:768px) {
  .bread {
    background: #0E7AC4;
  }
}

ul {
  list-style: none;
  margin: 0 auto;
  max-width: 768px;
  padding: 0;
}

@media screen and (min-width:768px) {
  ul {
    display: table;
    overflow: hidden;
    width: 100%;
  }
}

li {
  color: #333;
  display: inline-block;
}

li:after {
  content: 'f101';
  color: #959fa5;
  display: inline-block;
  font-family: "FontAwesome";
}

li:last-child {
  padding: 10px 15px;
}

li:last-child:after {
  content: none;
}

@media screen and (min-width:768px) {
  li {
    background: #0E7AC4;
    color: #fff;
    display: table-cell;
    text-align: center;
  }
  li:after {
    content: none;
  }
}

a {
  color: #333;
  display: inline-block;
  padding: 10px 15px;
  text-decoration: underline;
}

@media screen and (min-width:768px) {
  a {
    background: #0E7AC4;
    color: #fff;
    display: block;
    position: relative;
  }
  a:before {
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 20px solid #fff;
    content: '';
    display: block;
    height: 0;
    margin-top: -40px;
    position: absolute;
    top: 50%;
    right: -1px;
    width: 0;
    z-index: 1;
  }
  a:after {
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 20px solid #0E7AC4;
    content: '';
    display: block;
    height: 0;
    margin-top: -40px;
    position: absolute;
    top: 50%;
    right: 0;
    width: 0;
    z-index: 2;
  }
}

CSSのポイントは以下の通りです。

モバイルからPCへスタイルを切り替え

モバイルのスタイル

PCのスタイル

スマートフォンのスタイル

各リストを横一行に無理矢理押し込む形で配置すると窮屈で見にくいので、リストが多くなったら複数行に折り返すように、各リストのlidisplay:inline-block;で横並びにしています。

li {
  color: #333;
  display: inline-block;
}

各リストの右横に、Font Awesomeの矢印アイコンを表示させています。
更に、最後のリストの横には矢印は必要がないので、消しています。

li:after {
  content: '\f101';
  font-family: "FontAwesome";
}
li:last-child:after {
  content: none;
}

※Font Awesomeの使い方についてはこちらをご覧ください。

タブレット以上のスタイル

ブラウザの横幅が広いため、display:table-cell;で各リストを折り返さずに横一行に配置しています。
このとき、直近の親要素にはdisplay:table;width:100%;を指定する必要があります。

@media screen and (min-width:768px) {
  ul {
    display: table;
    overflow: hidden;
    width: 100%;
  }
}
@media screen and (min-width:768px) {
  li {
    background: #0E7AC4;
    color: #fff;
    display: table-cell;
    text-align: center;
  }

各リストの右端を三角にし、aを基準に絶対配置しています。
a:afterは青い三角であり、その下に白い三角であるa:beforeを右から1pxずらして配置することで、白い区切りのようにしています。

@media screen and (min-width:768px) {
  a {
    background: #0E7AC4;
    color: #fff;
    display: block;
    position: relative;
  }
  a:before {
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 20px solid #fff;
    content: '';
    display: block;
    height: 0;
    margin-top: -40px;
    position: absolute;
    top: 50%;
    right: -1px;
    width: 0;
    z-index: 1;
  }
  a:after {
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 20px solid #0E7AC4;
    content: '';
    display: block;
    height: 0;
    margin-top: -40px;
    position: absolute;
    top: 50%;
    right: 0;
    width: 0;
    z-index: 2;
  }
}

以上で、お洒落&レスポンシブなパンくずリストの作り方を終わります。