懐かしの。
どういうことか
WEBフォントは重い。
アイコンを大量にアップするのはダルい。
何年ぶりか分からんけど、1枚の画像にまとめて、表示部分を指定してやっていきたい。
ファイルの読み込み数が減るし、やっぱ合理的だったんだなって。
だけどまあPC/SPとかでサイズのこともあるし、以前とはちょっと違う使い方をやっていかなきゃっていう考えがある。
おさらい
こういうのがあったとする。
これに表示したい的な。
<div class="arrow"></div>で、こう。
.arrow{
width: 40px;
height: 40px;
background: url(icons.png) 0 0 no-repeat;
}
.arrow:hover{
background-position: top -40px left 0;
}背景指定だから領域外に画像がはみ出すことはない。画像内のアイコンの配置をキッチリやっておけば使いたいものを問題なく拾える。
アニメーション効果をつけてフェードさせたい場合は面倒くさいことになる、向かない。そういうデメリットはある。だけどもまあどうとでもできる。上記みたく位置を切り替える他に、filterで色を被せるとかね。
PCとスマホでどうするか
Amazonはそれぞれに画像を用意してた。
やっぱりスマホ用のほうがデカくなる。
これに倣ってもいいんだけど、というか多分最適解なんだけど。
画像の表示サイズを変更する
上の方で書いたやつよりも小さく表示したいけど画像は使いまわしで済ませたい場合。
.arrow{
width: 24px;
height: 24px;
background: url(icons.png) 0 0 no-repeat;
background-size: 144px auto;
}
.arrow:hover{
background-position: top -24px left 0;
}background-sizeに％を指定すると要素の幅を100％とした調整になるので、実数を入れる必要がある。なので今回は40x40pxのアイコンを24x24pxで使うんで、pngの実寸幅が240pxなので144pxに指定する。位置の指定も40px刻みだったのが24px刻みに変わる。
画像をうまいこと割り切れる数字で作ってあるならこれでやっていけるけど、そうでないヤンチャな人には向かない。
transformのscaleでサイズ変えられるじゃん、という切り口も。
.arrow{
width: 24px;
height: 24px;
position: relative;
}
.arrow::before{
content: "";
width: 40px;
height: 40px;
background: url(icons.png) -40px -40px no-repeat;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform-origin: top left;
transform: translate(-50%,-50%) scale(.6);
}要素のサイズを直接いじるのはリスクがあるんで疑似要素を使う。
疑似要素では原寸大で諸々を組んだ後、transformで縮小させる。倍率をいじるだけなので好きなサイズに変更しやすい。この組み方だと必ず中央に配置されるから便利ですよ。
※scaleの起点はデフォルトでは中央なので左上に変更してある。割と大事。
テキスト量がめっちゃ増えてだるいけど、割りと使い分けになるので両方悪くないという感じ。
どっちみち面倒くさいんだけどね。極力原寸で済ませたいですね。
原寸志向での懸念点
同じアイコンをサイズを変えて使いたい場面は地味にある。それに応えるためには上で書いたような方法でカバーする他、画像内にサイズのバリエーションを放り込むことが挙げられる。PCとスマホの切り替えも踏まえたらめんどくさすぎる。
ぶっちゃけ超だるい。だったらcssでサイズ変更しますわ、となる。
webフォントで賄いまくってた弊害ですね。
コメント