人気ランキングの順位をWebフォントと背景色で装飾
ブログの人気記事ランキングなどの順位表示は、CSSカウンタを使えば簡単に作れる。
Webフォントを読み込み背景色をつけ、見映えよく飾ればプロっぽい。
使っているWebフォント
検証したブラウザとOS
- IE 9~ ※IE8は擬似要素のバグで使えない。
- Firefox
- Google Chrome
- iOS 7~
- Android 4.1~
丸い背景
See the Pen 丸 by keita hirai (@keitahirai) on CodePen.
HTML(共通)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <link href='//fonts.googleapis.com/css?family=Audiowide' rel='stylesheet'> <div class="block-ranking"> <a href=""><dl> <dt><img src="//placeimg.com/150/100/animals" alt=""></dt> <dd>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</dd> </dl></a> <a href=""><dl> <dt><img src="//placeimg.com/150/100/arch" alt=""></dt> <dd>親譲りの無鉄砲で小供の時から損ばかりしている。</dd> </dl></a> <a href=""><dl> <dt><img src="//placeimg.com/150/100/people" alt=""></dt> <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </dd> </dl></a> <a href=""><dl> <dt><img src="//placeimg.com/150/100/nature" alt=""></dt> <dd>つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。</dd> </dl></a> <a href=""><dl> <dt><img src="//placeimg.com/150/100/tech" alt=""></dt> <dd>後ろで大きな爆発音がした。俺は驚いて振り返った。</dd> </dl></a> <a href=""><dl> <dt><img src="//placeimg.com/150/100/animals" alt=""></dt> <dd>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</dd> </dl></a> <a href=""><dl> <dt><img src="//placeimg.com/150/100/arch" alt=""></dt> <dd>親譲りの無鉄砲で小供の時から損ばかりしている。</dd> </dl></a> <a href=""><dl> <dt><img src="//placeimg.com/150/100/people" alt=""></dt> <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </dd> </dl></a> <a href=""><dl> <dt><img src="//placeimg.com/150/100/nature" alt=""></dt> <dd>つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。</dd> </dl></a> <a href=""><dl> <dt><img src="//placeimg.com/150/100/tech" alt=""></dt> <dd>後ろで大きな爆発音がした。俺は驚いて振り返った。</dd> </dl></a> <!-- /.block-ranking --></div> |
SCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | @charset "utf-8"; @import "compass"; * { box-sizing: border-box; } img { max-width: 100%; height: auto; border: 0; } @mixin cf { zoom: 1; &:after { content: ""; display: table; clear: both; } } .block-ranking { counter-reset: ranking; dl { margin-bottom: 10px; @include cf; } dt { float: left; margin-right: 10px; position: relative; &:before { content: counter(ranking, decimal); counter-increment: ranking; color: white; font-size: 1.25rem; font-family: 'Audiowide', cursive; text-shadow: 0px -0.5px 0px black; position: absolute; top: -3px; left: 3px; z-index: 10; } &:after { content: ""; width: 0; height: 0; position: absolute; top: -5px; left: -5px; z-index: 9; border: 15px solid #507ea4; border-radius: 100%; @include opacity(0.7); } } a:nth-of-type(1) dt:before {left: 6px;} a:nth-of-type(10) dt:before {left: -2px;} } |
三角の背景
See the Pen 三角 by keita hirai (@keitahirai) on CodePen.
SCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | @charset "utf-8"; @import "compass"; * { box-sizing: border-box; } img { max-width: 100%; height: auto; border: 0; } @mixin cf { zoom: 1; &:after { content: ""; display: table; clear: both; } } .block-ranking { counter-reset: ranking; dl { margin-bottom: 10px; @include cf; } dt { float: left; margin-right: 10px; position: relative; &:before { content: counter(ranking, decimal); counter-increment: ranking; color: white; font-size: 1.25rem; font-family: 'Audiowide', cursive; text-shadow: 0px -0.5px 0px black; position: absolute; top: 0; left: 5px; z-index: 10; } &:after { content: ""; width: 0; height: 0; position: absolute; top: 0; left: 0; z-index: 9; border-top: 40px solid #507ea4; border-right: 40px solid transparent; @include opacity(0.7); } } a:nth-of-type(1) dt:before {left: 8px;} a:nth-of-type(10) dt:before {left: 3px;} } |
四角の背景
See the Pen 四角 by keita hirai (@keitahirai) on CodePen.
SCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | @charset "utf-8"; @import "compass"; * { box-sizing: border-box; } img { max-width: 100%; height: auto; border: 0; } @mixin cf { zoom: 1; &:after { content: ""; display: table; clear: both; } } .block-ranking { counter-reset: ranking; dl { margin-bottom: 10px; @include cf; } dt { float: left; margin-right: 10px; position: relative; &:before { content: counter(ranking, decimal); counter-increment: ranking; color: white; font-size: 1.25rem; font-family: 'Audiowide', cursive; text-shadow: 0px -0.5px 0px black; position: absolute; top: 2px; left: 7px; z-index: 10; } &:after { content: ""; width: 0; height: 0; position: absolute; top: 0; left: 0; z-index: 9; border: 15px solid #507ea4; @include opacity(0.7); } } a:nth-of-type(1) dt:before {left: 10px;} a:nth-of-type(10) dt:before {left: 3px;} } |
大まかな作成手順
- div を全体の親要素としてネストし、counter-reset: ranking; を指定
- 画像とテキストは定義タグで記述し、画像の dt に position: relative; を指定
- dt:before で数字を、dt:after で背景を擬似的に生成
- 擬似要素をそれぞれ position: absolute; で絶対配置
px 指定で問題なし
「レスポンシブデザインを考慮して、ボーダーやポジションは、px ではなく % にすべきでは?」と思う方がいるかもしれません。
しかし、小さな領域を%で指定すると、タッチデバイスごとの差異が多岐に渡り、ブレークポイントをいくつも記述しなければならなくなります。というわけで、px 指定で問題ないと判断しています。
IE 8 について
IE8は擬似要素 :after をサポートしていますが、親要素の背後に隠れてしまうという謎バグが存在します。z-index で調整しても修正できなかったので、直す気はありません。
なので私はお客さんに、
頑なにレガシーIEを使っているような消費者は、見込み客じゃないですよ。スマホ流入が増加し続けていますし、Windows 10 にアップデートするか、と話題になっているこのご時世で、IE8対応は最早不要だと思いませんか?
こんな言い分で納得してもらいました。
コメントを投稿する