人気ランキングの順位をWebフォントと背景色で装飾

150705_001

ブログの人気記事ランキングなどの順位表示は、CSSカウンタを使えば簡単に作れる。
Webフォントを読み込み背景色をつけ、見映えよく飾ればプロっぽい。

使っているWebフォント

Google Fonts Audiowide

検証したブラウザとOS

  • IE 9~ ※IE8は擬似要素のバグで使えない。
  • Firefox
  • Google Chrome
  • iOS 7~
  • Android 4.1~

 

丸い背景

See the Pen by keita hirai (@keitahirai) on CodePen.

フル画面で見る

HTML(共通)

 

SCSS

 

三角の背景

See the Pen 三角 by keita hirai (@keitahirai) on CodePen.


フル画面で見る

SCSS

 

四角の背景

See the Pen 四角 by keita hirai (@keitahirai) on CodePen.


フル画面で見る

SCSS

 

大まかな作成手順

  • div を全体の親要素としてネストし、counter-reset: ranking; を指定
  • 画像とテキストは定義タグで記述し、画像の dt に position: relative; を指定
  • dt:before で数字を、dt:after で背景を擬似的に生成
  • 擬似要素をそれぞれ position: absolute; で絶対配置

 

px 指定で問題なし

150705_002

「レスポンシブデザインを考慮して、ボーダーやポジションは、px ではなく % にすべきでは?」と思う方がいるかもしれません。

しかし、小さな領域を%で指定すると、タッチデバイスごとの差異が多岐に渡り、ブレークポイントをいくつも記述しなければならなくなります。というわけで、px 指定で問題ないと判断しています。

 

IE 8 について

150705_003

IE8は擬似要素 :after をサポートしていますが、親要素の背後に隠れてしまうという謎バグが存在します。z-index で調整しても修正できなかったので、直す気はありません。

なので私はお客さんに、

頑なにレガシーIEを使っているような消費者は、見込み客じゃないですよ。スマホ流入が増加し続けていますし、Windows 10 にアップデートするか、と話題になっているこのご時世で、IE8対応は最早不要だと思いませんか?

こんな言い分で納得してもらいました。

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは一度だけクリックしてお待ちください。