Markup Catch

HTMLマークアップ |新人webデザイナーがマークアップを考える 【第3回】

Posted 10月 25 2013 by ozw  

HTMLマークアップ | 新人webデザイナーがマークアップを考える 【第3回】

-パンくずリスト-

パンくずリストってどうやって書きますか?
デザイン的には、わかりやすければ良いですが、
マークアップ的にはこれがなかなか複雑みたいです。

ちなみにパンくずリストとはこれ↓のことです。
markup_1024
転職求人@PRO人から

パンくずリストとは

webサイトにおいて、現在表示しているページの位置を
webサイトの階層によってガイドするためのもの。
上位階層から、現在いるページまでを辿っていく形式のため、
ユーザーはパンくずリストを見ればwebサイト内で自分が
どこのページを見ているかわかる。
また、一般的に上位階層にはリンクが貼られているため、
webサイトを巡回する上でも役に立つ。

名前の由来には
「ヘンゼルとグレーテル」が道に迷わないよう、
パンをちぎって道に置いていったというエピソードからとっているようです。
なんてかわいい!!

マークアップ方法

なかなか複雑なパンくずリストのマークアップについてです。
横に並べるだけなのになにが複雑なのかと言いますと……
マークアップは情報に意味付けをすることですので、
「パンくずリストはwebページ内でどのような意味を持っているのか」
という部分で、使われるタグが変わってくるのです。
あいにく、<パンくずリスト>というタグは存在しません。

今回は4種類のマークアップ方法をご紹介します。
ブラウザには下記のように表示されるとします。

HOME > 一覧 > 詳細

パターン1:リストにして表す

考え方:リストと名のつく部分だから、リストを表現する<ul>タグを使用。

<ul>
<li><a href=”#”>HOME</a> > </li>
<li><a href=”#”>一覧</a> > </li>
<li>詳細</li>
</ul>

パターン2:リストを順位づけして表す

考え方:リストだけれど、上位階層から順位づけすることで階層を表現する。<ol>タグを使用

<ol>
<li><a href=”#”>HOME</a> > </li>
<li><a href=”#”>一覧</a> > </li>
<li>詳細</li>
</ol>

パターン3:表現重視

考え方:cssが無くてもブラウザ上で表現できる。

<p>
<a href=”#”>HOME</a> >
<a href=”#”>一覧</a> >
<li>詳細</li>
</p>

パターン4:検索結果にパンくずリストを表示させる

考え方:検索結果で「リッチスニペット」と呼ばれる部分にパンくずリストを出す。
検索エンジンにパンくずリストを認識させ方法。検索結果で上位階層がクリックされる可能性もある。

<ul>
<li itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
<a href=”#” itemprop=”url”><span itemprop=”title”>HOME</a> > </li>
<li itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
<a href=”#” itemprop=”url”><span itemprop=”title”>一覧</a> > </li>
<li itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
<a href=”#” itemprop=”url”><span itemprop=”title”>詳細</li>
</ul>

パート4は何をやっているかというと、
1. liタグ内に「itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”」を入れる
2. 全てのliタグの中にaタグを囲み「itemprop=”サイトのurl”」を入れる
3. アンカーテキスト部分をspanで囲んで「itemprop=”title”」とする

他にも<nav>を使ったり、<div>を使ったりと様々です。
サイトに合わせたり、自分のスタイルを作ってしまうのも良いかもしれませんね。

【著者に関して】
学生時代はグラフィックデザイナーを目指していたのですが、
就職活動の際「紙でもwebでもデザインはデザイン」と考え、
入社してからwebデザインをはじめた、ひよっこwebデザイナーです。


CSS HTML マークアップ



  未経験OKの仕事 |  上場企業の仕事 |  高待遇の仕事 |  外資系の仕事 |  社内SEで検索 |  自社サービスで検索





メールアドレス
ご質問・問い合わせ等、ご自由にお書きください。