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、カルーセル機能のを実装方法!

スポンサードリンク

関連コンテンツ

オススメ記事

scratch

Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門

さて、今回もプログラミングの勉強(べんきょう)をはじめていきましょう!前回の「小学生からのプログラミング入門。プログラミングってなぁに?」では、プログラミングっていうのが、どういうものなのかを学びま

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

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

gulp

gulp4完全攻略ガイド。インストールから使い方まで徹底解説!

幸せそうな人を見ると、転べって思います。@It_is_Rです。 Webページを制作するとき、sassをcssに変換して使用することが多いと思います。 今回はgulp4の使い方を、インストールか

WordMove | 運用中の WordPress 環境をローカルと FTP で同期

道が覚えられない、@It_is_Rです。 人生さえ彷徨い続けてここにいます。 さて、運用中の WordPress サイトの環境を、ローカル開発環境と同期したい時、 WordMove を使うとと

Windows10にPythonをインストールする方法

みなさんこんにちは。@It_is_Rです。今回はWindows10にPythonをインストールする方法を紹介します。 Pythonのインストーラをダウンロード では、Python

キーボードで画像を動かすよ!

【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 前回は、りこちゃんの画像をクリックすると、前に一歩動くというのをJavaScri

【Android Studio】開発したアプリの実機テストを行う方法。

どうも、頭がすっからかんの@It_is_Rです。 やかましいわ。 今回は Android Studio で実機テストする方法を紹介します。 これからアプリ開発をしていく上で必要不可欠な実機テストです

homebrew

Homebrewのインストール方法を分かりやすく解説(M1 Macも対応)

みなさんこんにちは。@It_is_Rです。 Homebrewは、Mac、Linuxで使うことができる、パッケージマネージャというものです。パッケージマネージャを使うことで、ソフトウェアのインス

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更、そし

FC2 blog customize

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

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

コメントを残す(コメントは承認後に反映されます)

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