「次に進む/前に戻る」で CSS の記述量が減るテクニック
ページネーションでよく使用される下図のような「次に進む/前に戻る」を実装する時に、少し考えこんで手が止まることが多かった。
左右に均等に配置するから float
を使用する。width: 50%
で指定するか。float
を使うからその親要素に clearfix
しなきゃいけないし、左右に配置された要素の中身をさらに text-align
して左右に振って…というように、簡単な見た目に反して、実装の手間が結構かかる気がする。
これを float
を使わずに、position
を使うと話が簡単になる。
「次に進む/前に戻る」を囲う親要素を position: relative
にして、基準位置とする。そして、「次に進む/前に戻る」を position: absolute
にして、それぞれ左右の始点を 0px
にすれば簡単に実装できる:
<nav class="pagenation">
<a class="new" href="/page/2">← 前に戻る</a>
<a class="old" href="/page/4">次に進む →</a>
</nav>
nav.pagenation {
position: relative;
.old,
.new {
position: absolute;
}
.old {
right: 0;
}
.new {
left: 0;
}
}
この方法だと float
解除を気にする必要がないし、最初の図のようにページ数を中央に配置したい場合は、 .pagenation
に text-align: center
を追加して、a
タグと同じ階層にページ数を突っ込めば完了する。