実践コーディングスキル - 第11章 Lesson2

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

   

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

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

ウェブマガジンのページネーションをマークアップする方法を解説しています。
ここでは、背景の色や余白の調整を、デザインと同じになるように調整します。



この動画で学べること

・ページネーションに余白をかけて調整する方法



ページネーションに余白をかけて調整しよう

前回の続きで、ページネーションにスタイルをかけていきましょう。
内側の余白を作りたいのですが、<li>タグに余白をつけてしまうとクリックできる範囲が小さくなってしまうので、<a>タグに対して余白をかけていきます。
しかし<a>タグはインライン要素のため、このままの状態では余白の調整をすることができたいので、positionプロパティを使ってブロック要素に変更しましょう。
また、文字のサイズや太さ、行間も指定をしましょう。



div#pagenation ul li a {
font-size: 16px;
font-weight: bold;
line-height: 32px;
padding: 0 8px;
display: block;
}



また、ボックスとボックスの間に余白を取りたいので、<li>タグにmargin-leftをかけます。



div#pagenation ul li {
width: auto;
height: 32px;
background-color: #fff;
border: 1px solid #dcdddf;
float: left;
margin-left: 10px;
}



保存してブラウザで見てみましょう。
ページネーションのデザインが完成しました。
最後に、<li>タグを囲んでいる<ul>タグにclass名cfを追加してfloat解除します。
これで、コンテンツ部分がすべて完成したので、次回からフッターのマークアップに入りましょう。