実践コーディングスキル - 第10章 Lesson9

第16回:ページネーションをマークアップしよう(1)

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

ウェブマガジンのページネーションをマークアップする方法を解説しています。
ここでは、リストタグを利用してHTMLを記述していきます。



この動画で学べること

・ページネーションをマークアップする方法



ページネーションをマークアップする方法

今回は、新着記事一覧の右下にあるページネーションをマークアップしていきましょう。
ページネーションとは、複数のページがある場合にページを移動するリンクを表示させるものです。
この機能があるととても便利で、ユーザビリティーが向上します。




では一緒に作っていきましょう。
まずHTMLを記述していきましょう。
<div>id名top_rightの中の<ul>の次に、新たにid名pagenationの<div>ボックス追加します。
ページネーションは、同じデザインのものが複数あるので、<li>タグを使ってマークアップしていき、クリックしたときに別のページに飛べるように<a>タグを追加します。



<div id="pagenation">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">NEXT >></a></li>
</ul>
</div>



保存してブラウザで見てみると、新着記事一覧の下にページネーションが表示されましたが、
新着記事一覧の<li>タグと同じCSSがかかるため、背景が大きくなっています。
この部分を次回、修正していきましょう。