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

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

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

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

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

目次
  1. パンくずリスト(breadcrumb)の作り方
  2. まとめ
  3. 参考サイト

パンくずリスト(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、カルーセル機能のを実装方法!

スポンサードリンク

関連コンテンツ

オススメ記事

scratch

小学生から始めるScratch入門。使い方とゲーム開発の基礎知識

小学生から始めるプログラミング入門です。 前回の記事で、プログラミングってどういうものなのか何となく理解してもらえたでしょうか? 少しだけScratch(スクラッチ)についてもふれましたが、ま

文字を一文字ずつ表示してみよう!

小学生からのJavaScript。改行と一文字ずつ画面に表示する方法!

小学生からのJavaScript講座です。 このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。 前回、画面に文字を表示するためのクラスを作ったのですが、それを

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

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

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

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

Local by Flywheel

一瞬でWordPressローカル環境を作成! Local by Flywheelの使い方

考え事をしていると、目が上にいっている@It_is_Rです。 Local by FlywheelはWordPressのローカル開発環境を簡単に作れるツールです。 今回はこれを使って、ローカルに

HTML5とCanvasを使うべ!

小学生からのJavaScript。HTML5とCanvasを使ってみよう!

小学生からのプログラミング講座(こうざ)、第9弾です。 これまでの講座(こうざ)では、JavScriptの基本(きほん)について学び、キャラクターの操作(そうさ)ができるようになりました。 こ

WordPressカスタムヘッダーを完璧に使いこなしたい人へ告ぐ!

森の中に昔から住んでる@It_is_Rです。 WordPressのカスタマイズをする上で、カスタムヘッダーを使うと、色やヘッダー画像をWordPressの管理画面から操作できるようになり便利です

java

Javaのクラスとメソッドの違いとは?ゲーム風に解説。

この頃小説を読んでいなく、何か読みたいなと思っている@It_is_Rです。 Javaを勉強し始めたばかりの人は、何やら難しい単語に混乱する人も多いでしょう。その中で、クラスとメソッドって一体何が

wordpress

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

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

【Gitの使い方 – その1】GitHubのアカウントを取得する方法!

Gitを使うとバージョン管理が簡単になりますが、それ以前に自分の頭の中を管理するのが大変な@It_is_Rです。 Gitの使い方をいくつかの記事に分けて紹介していきたいと思います。 まず今回は

コメントをどうぞ!

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