定期的に発症する画像使いたくなくなる病のため、ページめくりの矢印を画像じゃなくしたいなといろいろ考えているんですけど、なかなか良い物ができません。ユニコードのArrowやDingbatsなどにはいわゆる矢印的なもの(→みたいなもの)はいくつもあるので、そういうのが良いのならそれで良いと思うんですけど、自分のイメージではあんまり矢印々々してないのが良いかなというのがあるので、それらはちょっと使いづらかったです。いろいろ作った中ではborderとtransformプロパティを使ったものがそこそこまともに見えるような気がしました。
Demo: Paging Arrow
最初のスクリーンショットはこのデモを各ブラウザで表示したもので、左からChrome 15・Safari 5.1.1・Firefox 7.0.1・Opera 11.52・Internet Explorer 9.0.3です。各ブラウザでborderプロパティの描画が違うことに加えてtransformプロパティによる変化も微妙に違うため、並べて見ると結構違う感じになってしまいました。Operaで全体的に薄くなるのはどういうことですか……。
CSSは単純で::before擬似要素で上と右に枠線を持つ矩形を作ってやり、それを45度回転させるというものです。
a[rel="next"]::before {
margin: 24px auto 24px 22px;
border-top: 8px solid white;
border-right: 8px solid white;
display: block;
width: 16px;
height: 16px;
content: "";
transform: rotate(45deg);
}位置合わせはmarginプロパティで行いますが、枠線の幅分中心がずれるので多少X方向の位置を調整する必要があります。二番目のデモはborderプロパティのスタイルをdoubleにしたものです。ちょっと変わった感じ……というか不恰好ですね。三番目は::after擬似要素も使って2つの矢印を重ねてみました。
四番目と五番目はborderプロパティの代わりにbox-shadowプロパティを使っています。この場合は2つの矢印にするにも
.e a[rel="next"]::before {
box-shadow:
8px -8px 0 white,
14px -14px 0 #369,
22px -22px 0 white;
}と途中で背景色と同じ色で影をカットアウトするだけでいけますね。3つでも4つでもいくらでも増やせます。box-shadowプロパティを利用したものの方が概ね良好にレンダリングされるのですが、残念ながらFirefox 7.0.1で微妙にゴミが出てしまいます……。
あんまりこだわらないならRight Single Arrow Quote (›)で良い気もしますが、これはこれでフォントによって形や位置が微妙に違うという事情があり、縦方向の位置合わせがちょっと面倒くさい感じです。Webフォントを使うならばそこらへんの事情は解決できることが多いので、こういった細かい装飾はWebフォントに取って代わられていくのかもしれませんね。