🍞 設置マニュアル

パンくずナビゲーションの設置方法

初心者向けHTMLマニュアル

HTMLサイトに「パンくずナビゲーション」を付けるまでを、上から順番に進めるだけで作業できるようにまとめました。

このページで分かることパンくずとは何か／3行のコードの置き方／ファイルの置き場所／確認のしかた／表示されないときの調べ方
用意するものパンくずを付けたいHTMLファイル、breadcrumb.css、breadcrumb.js
読み方のコツ：グレーのコードボックスは「HTMLファイルに書き写すコード」です。ボックス以外の文章は説明なので、コピーしなくて大丈夫です。コードボックスの「コピー」ボタンも使えます。

STEP 1パンくずナビゲーションとは？

いま見ているページが、サイトのどこにあるのかを示す道しるべです。たとえば次のように表示されます。

ホーム ＞ HTMLツール ＞ HTMLプレビュー

これがあると、訪れた人が「今どこにいるか」「ひとつ上のページへ戻るにはどこか」をすぐ分かります。名前は、童話で道しるべにパンくずを落としていく話に由来します。

STEP 2必要なファイルを確認

次の2つのファイルを用意します。どちらも、サイトのいちばん上のフォルダ（ルート）に置きます。

breadcrumb.cssパンくずの見た目・デザインを決めるファイルです。文字の大きさや色、区切りの形などを指定します。（CSS＝見た目を整えるもの）
breadcrumb.jsパンくずの内容を自動で表示するファイルです。ページの場所に合わせて「ホーム ＞ …」を作ってくれます。（JavaScript＝動きを付けるもの）

さらに、パンくずを表示する場所として、HTMLに <nav id="breadcrumb"></nav> を書きます。次のSTEPで、この3つを合わせて使います。

STEP 3HTMLに3つのコードを配置

パンくずを付けたいHTMLに、次の3行を入れます。この3つを1セットとして配置します。

HTMLに入れるコード（3行1セット）
<link rel="stylesheet" href="/breadcrumb.css">
<nav id="breadcrumb"></nav>
<script src="/breadcrumb.js"></script>
3行目は、2行目のあとに置きます。表示する場所（nav）が先にないと、中身を入れる先が見つからないためです。

STEP 4どこに配置する？

基本は「ヘッダー（サイトのタイトル部分）の下、ページタイトルの上」です。

<body>
↓
ヘッダー
↓
パンくず（3行1セット）
↓
ページタイトル
↓
メインコンテンツ
↓
フッター
配置の例（画面表示用のコード例です）
<body>

<header>
サイトタイトル
</header>

<link rel="stylesheet" href="/breadcrumb.css">
<nav id="breadcrumb"></nav>
<script src="/breadcrumb.js"></script>

<main>
<h1>ページタイトル</h1>
<p>ページ本文</p>
</main>

</body>

STEP 53つは別々の場所に置くの？

初心者がいちばん迷うところです。基本の答えはこうです。

1つのHTMLにつき、3つを1セットとして配置します。（ページごとに、3行を1回ずつ）

ただし、すでにあるHTMLの作りによって、置き場所は調整できます。たとえば、1行目（link）は <head> の中、2行目（nav）はヘッダーの下、3行目（script）はページの最後、というように分けて置いても使えます。迷ったら、まずSTEP 4のとおり3行まとめて置き、表示を確認してから調整すると安全です。

やってはいけないこと：同じ3行を、1つのページに2回以上入れること。パンくずが二重に出たり、動きがぶつかったりする原因になります。

STEP 6ファイルを正しい場所に置く

3行のコードでは /breadcrumb.css のように、先頭に「/」が付いたパスを使っています。これは「サイトのいちばん上の場所から数える」という意味です。

フォルダ構成の例
/
├─ breadcrumb.css
├─ breadcrumb.js
├─ index.html
└─ tool/
   ├─ index.html   ← 各フォルダに必要
   └─ sample.html

つまり /breadcrumb.css と /breadcrumb.js というパスで読み込める場所にファイルを置く必要があります。この例では、tool/sample.html のように深い場所のページからでも、同じ3行で読み込めます。

⚠️ 重要：フォルダごとに index.html を用意しましょう

私のサイトでは、各フォルダに index.html を配置しています。index.html は、フォルダのURLにアクセスした際に自動的に表示される標準的なファイル名です。なお、別のファイル名でも、URLでファイル名を指定すれば表示できます。

パンくずリストは、「ホーム ＞ tool ＞ sample」のように、URLのフォルダ階層に沿って構成されます。

そのため、途中のフォルダ（上の例では tool/）に index.html がない場合、パンくずのリンク先が正しく表示されないことがあります。

✅ パンくずリストを使用する場合は、各階層のフォルダに index.html を配置しておくことをおすすめします。
💡 注意：パソコン上での直接確認について
HTMLファイルをパソコン内で直接開くと、画像やリンクの読み込み先が正しく認識されず、正常に表示されない場合があります。特に、URLの先頭に「/」を付けた指定は、Webサイトのトップを基準に読み込むため、パソコン上での確認では動作しないことがあります。

正しく動作するかどうかは、Cloudflare Pagesなどのサーバーにアップロードした後、実際のURLから確認してください。

STEP 7保存してブラウザで確認

① HTMLを保存
↓
② サーバー・Cloudflare Pagesなどへアップロード
↓
③ ページをブラウザで開く
↓
④ パンくずが表示されるか確認

表示が変わらないときは、ブラウザの再読み込み（更新ボタン）を試してください。古い表示が残っていることがあります。それでも出ないときは、このページ下の「表示されない場合」を見てください。

STEP 8複数のHTMLページに設置する

ページが複数あるときは、パンくずを表示したい各HTMLに、3行1セットを追加します。breadcrumb.css と breadcrumb.js のファイルは1つずつで、全ページから共有します。

3行を追加するページの例
index.html   ← 3行1セットを追加
tool1.html   ← 3行1セットを追加
tool2.html   ← 3行1セットを追加
study.html   ← 3行1セットを追加

1ページ終わるごとにアップロードして確認し、うまくいったらほかのページへ進むと、失敗に気づきやすくなります。

既存のサイトに設置するときの注意

すでに公開しているサイトに入れるときは、次のことを守ってください。

作業の前に、HTMLファイルのコピー（バックアップ）を取っておくと、失敗しても元に戻せます。

表示されない場合のチェック

上から順に確認してみましょう。チェックを付けながら進められます。

パンくず設置チェックリスト

最後の確認です。すべてにチェックが付けば完成です。

🎉 すべてチェックできました。パンくずナビゲーションの設置は完成です。

0 / 9 完了