@kazuhito
Kazuhito Kidachi's Personal Web Site Since 2000

社内マークアップ部、活動開始

先日、勤務先で社内マークアップ部によるイベントがありました。html5jのマークアップ部(が開催しているMarkupCafe)にインスパイアされた活動で、各々が考える最強のマークアップ(謎)を披露し合うことにより、HTMLへの理解を深めよう的な活動です。今回は、この先の不定期開催に向けたテストという位置付けで催され、お題はページングでありました。

お題となったページングのワイヤーフレーム

ページング、と言うのは検索結果ページなどの下のほうでよく見かけるアレです。呼び方にはパジネーションとか諸説あるようですが、ここでは続・よくある3つのデザインから考える、マークアップの最適解 | HTML5Experts.jpを参考に、ページングと記載しておきます。何の前提条件も縛りもなく、ワイヤーフレームだけを見て考えるというルールでしたので、それがかえって良かったというか、いろいろな切り口から妥当性を検討する面白味を味わえました。まぁ、自分の思考プロセスを整理しアウトプットするという行為も、単純に面白かったですが(あまり日常的にはやっていないことなので)。以下は、自分の案における考え方をまとめたものです:

そんな考え方(割と個人の嗜好に基づいているところがあるので異論・反論も多いにあるかと思います)に基づいてつくった私案は以下の通り:

自身が一連のページ群の最初のとき
<nav>
<ul>
<li><a href="URL" rel="next">次へ</a></li>
</ul>
<ol>
<li><em>1</em></li>
<li><a href="URL" rel="next">2</a></li>
<li><a href="URL">3</a></li>
<li><a href="URL">4</a></li>
<li><a href="URL">10</a></li>
</ol>
</nav>
自身が一連のページ群の最初でも最後でもないとき
<nav>
<ul>
<li><a href="URL" rel="prev">前へ</a></li>
<li><a href="URL" rel="next">次へ</a></li>
</ul>
<ol>
<li><a href="URL">1</a></li>
<li><a href="URL" rel="prev">4</a></li>
<li><em>5</em></li>
<li><a href="URL" rel="next">6</a></li>
<li><a href="URL">10</a></li>
</ol>
</nav>
自身が一連のページ群の最後のとき
<nav>
<ul>
<li><a href="URL" rel="prev">前へ</a></li>
</ul>
<ol>
<li><a href="URL">1</a></li>
<li><a href="URL">7</a></li>
<li><a href="URL">8</a></li>
<li><a href="URL" rel="prev">9</a></li>
<li><em>10</em></li>
</ol>
</nav>

短い時間でしたが、いろんな人の考え方に触れることができ、有意義でありました。また、やりましょう。

現在地:ホーム > 覚え書き > 月別アーカイブ > 2013年12月 > 社内マークアップ部、活動開始
Google カスタム検索を利用しています