パンくずリスト

パンくずリストとは、見ているページが Web サイトのどこにあるかを示すリンクの一覧

パンくずリストをヘッダーのすぐ下に作成する

テキストを横並びにして、あいだにマークを表示する

パンくずリストは、見ているページが Web サイトの全体の中でどこに位置しているかを示すもの

基本的には Web サイトのホームページからリンクをクリックして、今見ているページにたどり着くための道すじを示していることになる

パンくずリストの HTML には箇条書きを使う

CSS には2つのポイントがある

マークには Font Awesome の文字を使用し、HTML には追加せず CSS だけで表示させることにする

※ テキスト通りに出来ないので、直接、Fontawosome を読み込むことにした

<li> を橫に並べるのは、フレックスボックスのテクにックと同じ

::after は疑似要素と呼ばれるセレクタのひとつで、選択した要素のコンテンツの後の部分に、content プロパティで指定したテキストを挿入する

::befor という疑似要素もあり、こちらは選択した要素の前に挿入する

conten プロパティにはダブルクォート（"）で囲んで挿入したいテキストを指定する

実際の Web デザインでは ::before、::after 疑似要素をアイコンフォントの表示に利用するケースが多い

content プロパティには通常のテキストだけでなく、文字のコード値を指定することもできる

::befor、::after 疑似要素を使ってアイコンフォントを表示させるには、表示させたいアイコンのコード値を知る必要がある

FontAwsesome の Web サイトで使いたいアイコンを探して、詳細ページを開く

詳細ページの上のほうにあるコード値をクリックするとコピーできる

あとは使用する CSS の該当箇所にペーストするだけ

<ul class="bc-nav"> ～ < /ul > の > アイコンを表示している（※ テキスト内容では）

最後の <li> だけ ::after に何も表示させないようにしている

選択した要素の内最後の要素だけを選択するには、:last-child セレクタを使う

FontAwsesome はとても有名ですが、アイコンフォントはほかにもある

サイトのデザインにぴったりのアイコンフォントが欲しいと思ったら、他のアイコンフォントを試してみるのも良い

Google Fonts では、マテリアルアイコンという名前のアイコンフォントを提供している

使い方は FontAwsesome と似ており、<head> ～ </head> の間に <link> タグを追加する

アイコンを表示したいところに指定の <span> タグを挿入する

Bootstrap は Twetter 社が中心となって開発する、Web さいとで使用できる UI フレームワーク（パーツライブラリ

バージョン 5.0 からアイコンフォントも提供するようになった

指定のタグを使いたい場所にペーストするのが簡単