【HTML/CSS】人気ランキングの順位をWebフォントと背景色で装飾する

150705_001

ブログの人気記事ランキングなどの順位表示は、「CSSカウンタ」を使えば簡単にできます。Webフォントを読み込み、背景に色をつけて、見映えよく飾りましょう。
※もちろん、Webフォントを無理に使う必要はありません。

目次

使っているWebフォント

Google Fonts Audiowide

検証したブラウザとOS

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

Can I Use で確認する

 

丸い背景

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対応は最早不要だと思いませんか?

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

 

参考リンク

    • このエントリーをはてなブックマークに追加