[CSS]スニペットとしてストックしておきたい、レスポンシブ対応のパンくずとステップを実装するチュートリアル

Post on:2015年7月27日

HTML

HTMLの基本構造です。

<nav>
	<ol class="cd-breadcrumb">
		<li><a href="#0">Home</a></li>
		<li><a href="#0">Gallery</a></li>
		<li><a href="#0">Web</a></li>
		<li class="current"><em>Project</em></li>
	</ol>
</nav>

nav要素で実装し、各アイテムはol要素に「.cd-breadcrumb」で基本のスタイルを適用します。

基本のスタイル

基本のスタイルでは各アイテムを並らべるために「display: inline-block;」し、疑似要素でアイテムを分離します。

.cd-breadcrumb li::after, .cd-multi-steps li::after {
  display: inline-block;
  content: '.cd-breadcrumb li::after, .cd-multi-steps li::after {
  display: inline-block;
  content: '\00bb';
  margin: 0 .6em;
  color: #959fa5;
}
bb';
  margin: 0 .6em;
  color: #959fa5;
}

デモページ: 1. Basic

区切りを変更

カスタマイズも簡単で、例えば区切りを変更したい時はol要素にclassを追加し、そこに区切りを設定します。

.cd-breadcrumb.custom-separator li::after, 
.cd-multi-steps.custom-separator li::after {
  /* replace the default separator with a custom icon */
  content: '';
  height: 16px;
  width: 16px;
  background: url(../img/cd-custom-separator.svg) no-repeat center center;
  vertical-align: middle;
}