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によるボタンの作り方。色やサイズなどの指定方法!
  6. 【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法
  7. 【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方
  8. 【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

スポンサードリンク

関連コンテンツ

オススメ記事

Gitの使い方。バージョン管理する流れを、実際にやってみよう

こんにちは。@It_is_Rです。 前回「【Mac】Gitのダウンロードとインストールの手順」では、Gitのインストーラを公式サイトからダウンロードしてインストールする方法と、Homebrew

Android Studio

【Android Studio】新規プロジェクトを作成する方法

前回、 Android Studio のインストールが完了しました。 その続きから始めていきましょう。 今回は新規プロジェクトを作成する方法です。 新規プロジェクトの作成 それ

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。【準備編】

いつもどうもです。@It_is_Rです。 少し前まで、私は FC2ブログ を使っていました。 やはり個性を大切にしたい私にとって、用意されたテンプレートを使うことに抵抗がありました。 「

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

Scratchでピアノを 作ってみよう!

Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門

小学生から始めるScratch入門です。 前回はじゃんけんゲームを作りました。 今回はピアノの鍵盤を作って、音を鳴らしてみましょう。 プロローグ [serif icon="aru-s.jpg"

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

zplug を使ってプラグインをインストール、管理する。

二つのことを同時にできない、@It_is_Rです。 今回はターミナルをかっこよくするシリーズ、第三回目です。 zplug を使って、プラグインをインストールする方法を紹介します。

とってもかんたん!iPhoneアプリ開発

SwiftUIでじゃんけんゲームを作ろう。かんたんiPhoneアプリ開発入門

SwiftUIは、2019年にアップルが発表したフレームワークです。 SwiftUIを使って、iPhoneで遊べるじゃんけんゲームを作成してみましょう。 この入門ではXcodeを使いますので、

プログラミングのクラスってなぁに?

【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門

小学生からのプログラミング講座(こうざ)、第12弾です。 前回はマップ上をキャラクターが自由に動くことができるようにしました。 今回はES6から使われるようになった「クラス」という機能を

WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!

愛と勇気だけが友達の@It_is_Rです。 今回はPugでWordPressテーマを作る方法を少し紹介します。 詳しいテーマの作り方はこちらをご覧ください。 WordPressのテーマを自作

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です