[Bootstrap]パンくずリストのコンポーネント”breadcrumb”の使い方

更新：2017/12/05
ライター：IBC

今回は Bootstrap を使って、パンくずリストを作成します。

ちなみに、パンくずリストは、
Webサイトの中で、どの位置にいるのかを見やすくするためのものです。

比較サイトなどの場合だと、カテゴリがどんどん深くなっていくため、
わかりにくくなりますが、このパンくずリストを設置することで
現在地の把握がしやすくなります。

パンくずリストは、ul または ol タグでエリアを作成し、
リストは li で作成します。

そして見た目を Bootstrao で整えます。
Bootstrapは基本的に class=”” で指定したものにより効果がでるので、
今回は、breadcrumb　を使います。

breadcrumb を使うときの構文は

<ol class="breadcrumb">
  <li><a href="#">リスト１</a></li>
  <li><a href="#">リスト２</a></li>
  <li class="active">現在地のリスト</li>
</ol>

<li class="active">現在地のリスト</li>

</ol>

というようになります。

ul や ol に、
class=”breadcrumb” を書くことで、このスタイルが適用されます。
なお、class=”active” を指定した li が現在地という扱いになります。

例を書くと

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Blog</li>
</ol>

<li><a href="#">Library</a></li>

</ol>

となります。

これをブラウザでみると、以下のようになります。

デフォルトでは、背景色が灰色ですが、そのままでは味気ないので
色を変更するということも可能です。

この場合、

.breadcrumb{
  background-color: 任意の色;
}

.breadcrumb{

background-color: 任意の色;

}

とすることで背景色を指定できます。

例を書くと

.breadcrumb{
  background-color: blue;
}

.breadcrumb{

background-color: blue;

}

というようにすることで背景色を青にできます。

また、デフォルトの区切り線は / となっていますが、
これもCSSで設定の変更が可能です。

この場合の構文は

.breadcrumb > li + li:before {
  content: "任意の記号や画像";
}

.breadcrumb > li + li:before {

content: "任意の記号や画像";

}

となります。

もし / ではなく > を区切りにしたいのなら、

.breadcrumb > li + li:before {
  content: ">";
}

.breadcrumb > li + li:before {

content: ">";

}

というようになります。

ここまでが概要です。
実際にコードを書いたほうが理解しやすいので、Atom エディタで実践してみましょう。

なお、Emmet パッケージをいれれば簡略記法が使えるようになり、
Preview HTML パッケージをいれることで、エディタからサイトをみることができるようになります。

Emmet の記法については
Emmet チートシートで検索するとでてくるので、
調べてみると良いでしょう。

PreviewHTML は、ショートカットーで
ctrl + shit + h でエディタ右側にプレビューの表示ができます。

Atom パッケージ追加と検索することで、パッケージ追加方法はみつかりますので、
興味があれば試してみると面白いでしょう。

今回は、これらのパッケージをいれてあることを前提としてコードを書いていきます。

ゼロから作成する場合

html:5

html:5

として展開するととして展開すると

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
 
</head>
<body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</html>

というようにベースのコードが作成されます。

ubuntu の場合、tab キーで展開します。

次に Bootstrap のライブラリの読み込みです。
ダウンロードして読み込む方法と、ネットから読み込む方法がありますが、
今回はネットから読み込む方法CDNの方法を使います。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

1	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

でCSSファイルの読み込みをします。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

1	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

で javascript を読み込みます。

この２つがないと Bootstrap は機能しません。

次にリストの作成です。
今回もEmmet で作成します。

    ul.breadcrumb>(li.active{Home})+(li>a{リスト$})*2

1	ul.breadcrumb>(li.active{Home})+(li>a{リスト$})*2

Emmet で記述するときに階層をつくるには > を使います。
また、同じ階層に配置するのなら + を使います。
リスト$ としてある部分は連番の作成です。
$ の部分が１，２というように展開されます。
class=”” については . で記述します。
今回なら class=”breadcrumb” を .breadcrumb として記述できます。

展開すると

    <ul class="breadcrumb">
      <li class="active">Home</li>
      <li><a href="">リスト1</a></li>
      <li><a href="">リスト2</a></li>
    </ul>

</ul>

となります。

ctrl + shift + h でプレビューをみるとスタイルが適用されているのがわかります。

次にパンくずリストの背景色を変えてみましょう。

style.css を作成し、

.breadcrumb{
  background-color: yellow;

1 2	.breadcrumb{ background-color: yellow;

として保存します。

次に css　ファイルを読み込みます。

  link:css

link:css

を展開すると、

  <link rel="stylesheet" href="style.css">

1	<link rel="stylesheet" href="style.css">

となり、css ファイルの読み込みができます。

これで再度プレビューを見ると、背景色が灰色から黄色に変わります。

そして、今度は区切り線を / から > に変えてみましょう。

これは style.css に

.breadcrumb > li + li:before {
  content: ">";
}

.breadcrumb > li + li:before {

content: ">";

}

を追記し、保存すればOKです。

再度プレビューを ctrl + shift + h で見てみましょう。

区切り文字が/ から > になっているのがわかります。

このように Bootstrap を使うことで簡単にスタイルをつけることができます。

では、今回の要点をまとめてみましょう。

・ol ul のリストに class=”breadcrumb” をつけることで Bootstrap のパンくずリストができる。
・li へ class=”active” をつけると、現在地を示す。
・css ファイルに .breadcrumb > li + li:before の設定をすることで区切り文字の変更が可能。
・css ファイルに .breadcrumbの設定をすることで、スタイルの変更が可能。

となります。
Bootstrap を使うときにはライブラリ読み込み必須なので忘れないようにしましょう。