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

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

   

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

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

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



この動画で学べること

・ページネーションにスタイルをかける方法



ページネーションのスタイルを指定していこう

前回作成したページネーションは新着記事一覧の<li>タグと同じCSSがかかるため、背景が大きくなっています。
今回は、この部分を修正します。
まず、新着記事の<li>タグととページネーションの<li>タグには別々のスタイルを書けたいので、
新着記事一覧の<ul>タグにid名post_listを追加し、CSSのulにも同じ名前をつけます。
一度保存してブラウザで見てみましょう。
前回とデザインが変わらなければ上手くいっているので、次に進みます。



ページネーションの横幅、縦幅を指定し、右に寄せるためにfloat: right;をかけていきます。
また、<li>タグに背景のスタイルをかけ、それぞれのボックスを横並びにするためにfloat: left;をかけてください。




div#pagenation {
width: auto;
height: 34px;
float: right;
}

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