1. トップページ >
  2. コーディング関連情報 >
  3. コーディングコラム >
  4. パンくずリストをどのように表現する?

コーディングコラム

パンくずリストをどのように表現する?

ホームページによく見られる要素の一つに「パンくずリスト」があります。
「パンくずリスト」とは、表示されているページの位置を、階層構造をリスト化して簡潔に記述したものです。以下の例をみるとよくわかるかと思います。

トップページ > ホームページ制作 > 制作料金

この「パンくずリスト」は、大規模なホームページなどでは欠かせない要素となっており、ユーザビリティやSEO対策にとっても重要な要素の一つです。

コーディング方法としては難しいことをすることもなく、以下のようにしても問題ありません。

ただ、Web標準的なコーディングとして考えた場合は、olタグを使うのが適切でしょう。

CSS

HTML

表示サンプル

このようにolタグを使うことで、テキストモードでは以下のように表示され、階層構造が明確になるわけです。

1.トップページ >
2.ホームページ制作 >
3.制作料金

修正する時も見やすいのでお勧めのコーディング方法です。