その昔、ナビゲーション部分を「パンくず」なんて表現することを知らなかったウブな僕は、htmlをみていたときのコメントアウトに「パンくず」と書かれていたのをみて、「はて、パンくずってのは画面をワザと散らかしたようにするんかな？」なんて見当違いなことを思っていた。そんな僕も立派になりました（？）。
さて、今、どのページに居ますよ的な表示でもおなじみのパンくず。皆さんはどんな感じでマークアップしていくのでしょうか？ 僕の場合は単純にリストで組み立てて、cssで横並びや階層部分の処理をすることが多いです。今回はそのやり方を紹介してみたいと思います。
ざっくりとコーディング
大体いつも使う雛形は以下の感じ。これを基礎にマークアップしていきます。これはsublime textでのhtml5の変換と同じものだったりします。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
</body>
</html>
これにヘッダー部分、メイン部分、フッター部分の区分けを追加します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>bread</title>
<link rel="stylesheet" href="">
</head>
<body>
<header></header>
<div id="maincontents"></div>
<footer></footer>
</body>
</html>
こんな感じ。必要に応じてidやclassを追加しますが、今回は省略。パンくず部分はヘッダーかメインコンテンツかどちらに追加するか迷うところですが、ヘッダーを他のページでも共通にするとなると、メインコンテンツ部分に実装するのが良さそう。ということで、そちらにパンくずエリアを設定しましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>bread</title>
<link rel="stylesheet" href="">
</head>
<body>
<header></header>
<div id="maincontents">
<ul class="bread_list">
<li>home</li>
<li>parent page</li>
<li>this page</li>
</ul>
</div>
<footer></footer>
</body>
</html>
クラス名をbread_listに設定。ulタグに直接書いてみました。ついでにリセットcssも設定しておきましょうか。ここでは「YUI 3 CSS Reset」を使用していきます。
リセットCSSとは、Webブラウザが内部に持つWebページの表示スタイルの規定値（デフォルト設定）を上書きし、特定の状態に初期化すること。また、そのために読み込ませるスタイルシート（CSSコードやCSSファイル）。
引用元：e-words
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>bread</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css">
</head>
<body>
<header></header>
<div id="maincontents">
<ul class="bread_list">
<li>home</li>
<li>parent page</li>
<li>this page</li>
</ul>
</div>
<footer></footer>
</body>
</html>
表示してみると
こんな感じになりました。まだ、文字が並んでるだけですね。
flexで横並びにしてみる
次に、styleを設定して表示を整えていきます。まずは良い並びにするためにflexを使用します。
ul.bread_list {
display: flex;
}
とりあえず、横並びになりました。間隔の調整は一旦おいておいて、パンくずでの表示というとオーソドックスなのは
home ＞ parent page ＞ this page
これじゃないでしょうか。なので、次は”＞”を追加していきましょう。cssのnotセレクタをうまく利用してみたいと思います。
.bread_list li:not(:last-child):after {
content: " > ";
}
解説すると、liタグの最後以外（:not(:last-child)）の後ろに（:after）、” ＞ “を追加、となってます。これによって、liタグが増えていっても、その分だけパンくず表示ができるようになっています。
あとは間隔の調整をしておきましょう。
ul.bread_list {
display: flex;
margin: 1rem;
}
.bread_list li:not(:last-child):after {
content: " > ";
margin: 0 1rem;
}
バッチリですね！
まとめ
dispayのflexが登場してから、横並びの処理が格段にわかりやすくなったと感じているのですが、みなさんはいかがでしょうか？ 今回はそれを利用してのパンくず表示の処理をかいてみました。li部分にaタグを組み込んでリンク処理をしてあげればパンくずからの移動もできるようになるので、UX的にも良くなっていくのではないでしょうか？ また、li部分を動的に生成するようにすれば、自動的にパンくずが設置できるようになったりもします。階層の名前を拾う形にすれば、そんなに複雑じゃなくできるかも……いずれチャレンジしてみてもいいかもしれませんね。最後にコードを載せておきますので、コピペして活用してみてくださいね！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>bread</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css">
<style>
ul.bread_list {
display: flex;
margin: 1rem;
}
.bread_list li:not(:last-child):after {
content: " > ";
margin: 0 1rem;
}
</style>
</head>
<body>
<header></header>
<div id="maincontents">
<ul class="bread_list">
<li>home</li>
<li>parent page</li>
<li>this page</li>
</ul>
</div>
<footer></footer>
</body>
</html>