1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Bootstrap
  6. »
  7. 【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!

【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!

Bootstrap4の使い方、第4回目となりました。

サイトを作っていると必然的に必要になるのがパンくずリストです。
パンくずリストは、サイト訪問者が今どのページにいるのかということを分かりやすく示すものです。

Bootstrapを使うと、そのパンくずリストも簡単に作れてしまいます。
今回はBootstrap4を使ったパンくずリストの作り方を紹介したいと思います。

パンくずリスト(breadcrumb)の作り方

パンくずリストの作成方法です。
今回はパンくずリストをnavタグで囲って作っていきます。

<nav>
</nav>

aria-label属性を指定しておきます。

<nav aria-label="breadcrumb">
</nav>

これがパンくずリスト全体ということになります。
その中にアイテムを追加していきます。

パンくずリストというぐらいですので、リストタグを使って作っていきます。
ulもしくはolタグで作っていきますが、パンくずリストは親から子への順番が決まっているものですので、olタグを使うほうがいいかと思います。

また、olタグには「breadcrumb」というクラスを指定しておきましょう。

さて、今現在作成しているページが「猫の食べ物について」という記事だったとします。
なのでolタグのなかにそのタイトルを入れていきます。

パンくずリストの中のアイテムとして、「breadcrumb-item」というクラスを当てましょう。

<nav aria-label="breadcrumb">
	<ol class="breadcrumb">
		<li class="breadcrumb-item">猫の食べ物について</li>
	</ol>
</nav>

さらにトップページとその記事があるカテゴリーを作ります。
今回の記事は、「動物」カテゴリーの中の「猫」カテゴリー内にあるとします。

もちろん、カテゴリーにはそのカテゴリーページにジャンプするようにリンクを貼る必要があります。

<nav aria-label="breadcrumb">
	<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="#">トップ</a></li>
		<li class="breadcrumb-item"><a class="breadcrumb-item" href="#">動物</a></li>
		<li class="breadcrumb-item"><a class="breadcrumb-item" href="#">猫</a></li>
		<li class="breadcrumb-item">猫の食べ物について</li>
	</ol>
</nav>

さらに、現在いるページには「active」というクラスを当てます。
今回であれば、5行目の「猫の食べ物について」の部分です。これで現在いるページ部分の文字色が変わります。

<nav aria-label="breadcrumb">
	<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="#">トップ</a></li>
		<li class="breadcrumb-item"><a class="breadcrumb-item" href="#">動物</a></li>
		<li class="breadcrumb-item"><a class="breadcrumb-item" href="#">猫</a></li>
		<li class="breadcrumb-item active">猫の食べ物について</li>
	</ol>
</nav>

見た目はこれで十分なのですが、アイテムの最後には「aria-current=”page”」をつけておきましょう。

<nav aria-label="breadcrumb">
	<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="#">トップ</a></li>
		<li class="breadcrumb-item"><a class="breadcrumb-item" href="#">動物</a></li>
		<li class="breadcrumb-item"><a class="breadcrumb-item" href="#">猫</a></li>
		<li class="breadcrumb-item active" aria-current="page">猫の食べ物について</li>
	</ol>
</nav>

さて、これでパンくずリストの完成です。
実際に作ったものはこちらになります。

まとめ

いかがでしたでしょうか。
パンくずリストはサイトを作成していると必ずと言っていいほど必要になってくる大切なパーツです。
パンくずリストがあることで、サイトを訪れた人が、このページはどういう構造になっているのかを一瞬で理解でき、自分が今どこにいるのかを直感的に知ることができます。

Bootstrapを使うことで、そんなパンくずリストを簡単に作ることができますので、興味がある方はぜひお試しください。
そんなわけで、Bootstrap4でのパンくずリストの作り方でした。

参考サイト

参考サイト : Bootstrap 公式ページ

この企画の一覧はこちら

  1. Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。
  2. 【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。
  3. 【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法
  4. 【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!
  5. 【Bootstrap 4】ボタン(btn)の作り方。色やサイズなどの指定方法!
  6. 【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法
  7. 【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方
  8. 【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

スポンサードリンク

関連コンテンツ

オススメ記事

FC2でブログを始めよう!誰でも簡単にできるブログの作り方

FC2ブログは、FC2が運営する無料でブログを開設できるサービスです。(有料版もあります) また、FC2のサービスには、動画、ライブ配信、アフィリエイト、小説など、様々なものがあります。 今回

wordpress

【WordPress】パンくずリストをプラグイン無しで自作する方法

※追記(2018/2/12) もっと高機能になるように、改良修正しました。 人生で3回ほど死にそうになったことがある@It_is_Rです。 WordPressのパンくずリストを作

enchant.js

enchant.js でクラスを作る、激分かりやすい方法!

こんばんわ、ちょっと海外へ行っておりました@It_is_Rです。 前回までの enchant.js の記事で、画像の表示やキャラの移動など、ゲーム制作には欠かせない基礎知識が身についたのではない

enchant.js100行未満!!本格シューティングゲーム作り方。

昨日歩き回ったせいで、足がかなり痛い@It_is_Rです。 さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてしま

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ブログ全体の幅を変更。

現実社会では殆ど言葉を発しない@It_is_Rです。だって、厄介なことになりたくないじゃん。 今回も前回に引き続き、FC2ブログカスタマイズの記事です。前回、ヘッダーのサイズを変更しましたが、ブ

CSS Button

サイト制作に!!CSSでマウスオーバーボタンの作り方。

新年初の記事です。とりあえず、あけましておめでとうございます。@It_is_Rです。 お正月……おそーがつ……おそまつ……おそ松さん。新年早々くだらないこと言ってないで早く記事を書けって話ですね。

java

Eclipseによる、Javaでじゃんけんゲームプログラムの作り方

※追記(2018/8/29) より分かりやすい記事になるよう修正しました。 今回はJavaを使って、じゃんけんゲームを作る方法を紹介します。 eclipseがインストールされ

zsh

enhancd で cd コマンドを超便利に! インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。 やかましいわ。 ターミナルをカッコよくするシリーズ4回目です。 今回は enhancd というプラグインを使って cd コマンドを便利

webpackの設定ファイル「webpack.config.js」の使い方を覚えよう

webpack.config.jsはwebpackを使う上での設定ファイルです。 今回は、webpack.config.jsの使い方を紹介します。 webpack.config.jsとは

【Android Studio】TextView 文字の色やサイズ、書体を変更する方法。

サイズは大きいほど、押しがいがあります。@It_is_Rです。 スマホのボタンの話ですよ。何を考えてたんですか? Androidアプリ開発、8回目となりました。 今回はこれまでに学習した T

コメントをどうぞ!

メールアドレスが公開されることはありません。