前記事の続きです。
本スプライトアイコンの画像ファイルとCSSファイルは、常に同じバージョンをセットで使用します。
バージョンの xx.yy の意味するところは、
yy:マイナーチェンジ。アイコン及びクラスの編集・追加を行った際にインクリメントする。古い HTMLコードをそのまま使っても問題ない。
xx:クラス名の変更をした際にインクリメントする。古い HTMLコードも使えるが、新しく書き換えるのが望ましい。ユーザーへの負担が大きいので、これはなるべく行わない。

スプライト画像

  1. ファイル情報

    ファイル名
    saki-icon_SP.png(version TEST)
    サイズ
    64x64×10×n(現時点で n=53、2.39MB)
    保存形式
    PNG
    カラーモード
    RGBカラー(最終的にはインデックスカラーにして圧縮する予定)
    ビット深度
    32
    解像度
    72dpi
    まあとにかくファイルサイズが巨大になってしまいました。
    高画質の壁紙二枚分くらいですかね。
    アイコンの最大サイズが32×32ならこの四分の一で済んだんですが、やっちまったもんは仕方ない。
  2. カスタマイズ

    画像編集ソフトで64×64の画像をひたすら貼りつけるのみ。
    1pxでもずれるとそのまま表示に反映されてしまうので、グリッド機能やアクションを活用してゴリゴリ編集します。
    V-TEST は公式の画像を使っているので…オリジナルの、それも統一感のある画像に差し替えられればいいんですが、なかなかね。


CSS【基本篇】

  1. ファイル情報

    ファイル名
    saki-icon.css(version TEST)
    クラスの数
    344
    サイズ
    13.3KB
    エンコード
    UTF-8(英数字しか使ってないので、他の種類でも大丈夫だと思…)
  2. 基本クラス

    咲-Saki-アイコン共通の CSS をまとめた基本クラスsaki-iconがこちら。
    .saki-icon{
    	display: inline-block;
    	vertical-align: bottom;
    	background: url(saki-icon_SP.png) no-repeat #ccc;
    	width: 64px; height: 64px;
    	border-radius: 8px;
    	margin: 4px 0;
    }
    
  3. 個別クラス

    CSSのbackground-position-xbackground-position-yが使えれば
    学校別のクラス指定とかができて楽なんですが、なんと FireFox48(最新版)がこのプロパティをサポートしていない!(49ではサポート予定)
    /* 縦方向で学校・グループ指定 */
    .kiyosumi{
        background-position-y: 0;
    }
    .ryumonbuti{
        background-position-y: -64px;
    }
    /* 横方向で順番指定 */
    .chara-01{
        background-position-x: 0;
    }
    .chara-02{
        background-position-x: -64px;
    }
    
    これなら咲さんを表示するのに
    <span class="saki-icon kiyosumi chara-01"></span>
    
    とスッキリ書けるのに、
    x と y を別々に指定できず、background-positionでまとめて指定しなければならないとなると
    <span class="saki-icon" style="background-position: 0 -64px"></span>
    
    みたいにスタイル属性で対応するか、全キャラクターに個別にクラスを割り当てるかしなければならないので、えらい大変です。
    学校・グループ数が50、最大メンバー数が20、平均メンバー数が 7 とすると、x y 別の指定が可能なら70クラスで足りますが、不可なら350クラス作らなければならない勘定です。
    ちょっとやってられんなー…
    使用頻度の高いキャラにはクラスを割り当て、低いキャラは使う時にスタイルタグを書く?
    でも線引きめんどいな…
    FireFoxのアップグレードを見越して、あらかじめ x y 別指定のクラスを割り当てておくのもアリか…いや今どうするかでしょ

    などと考えたものの、まあ現実的な対応ということで、あまり手間はかからないし、スプライトを編集した時のメンテナンスも楽なので、CSVファイルにクラス名を登録することにしました。
    例として清澄から鶴賀までの部分を抜き出してみます。
    saki,	nodoka,	yuki,	hisa,	mako,	kyotaro,	taichi,	ayano,	natsuki,	makoto
    sasahina,	teacher,	librarian,	obachan,,,,,,
    maho,	muro,	mika,,,,,,,
    mihoko,	ikeda,	miharu,	seika,	sumiyo,	takako,	kazekoshiGirl-1,	kazekoshiGirl-2,,
    koromo,	toka,	hajime,	jun,	tomoki,	hagiyoshi,	ayumu,,,
    momoko,	yumi,	satomi,	kaori,	mutsuki,,,,,
    
    こんな風に画像の並び通りにキャラクタークラス名を書いて行きます。
    CSSのクラス名に日本語は使えないのでアルファベットです。
    私個人はふだん日本語のローマ字綴りには日本式を使っているんですが、他に使う人がいるかもしれないので、より一般的なヘボン式にしました。
    これを JavaScript の自作ツールで読み込み、配列の位置から CSS を生成、それをコピペして CSSファイルとして保存しています。
    咲さんの部分は
    .saki{background-position:0 -64px}
    これがアイコンの数だけ続きます。
    background-positionというプロパティ名が長すぎるのがいけないよね。
    そのせいもあってテキストファイルにしてはかなり大きくなり、圧縮しても小さい画像分ぐらいはあります。
  4. サイズ指定クラス

    初めサイズごとにスプライト画像を作っていましたが、さすがにファイルサイズが巨大になるので何枚も作るのはスプライトの趣旨に悖るということで、CSS のtransform:scale()を使って表示サイズを調整することにしました。
    .size32{
    	margin: -32px -28px 0 0; /* 謎仕様への対応 */
    	-ms-transform: scale(.5); /* for IE9 */
    	-webkit-transform: scale(.5); /* for Chrome29, Android4.4.4 */
    	transform: scale(.5);
    	-ms-transform-origin: bottom left; /* for IE9? */
    	-webkit-transform-origin: bottom left; /* for Safari8, iOs Safari8.3 */
    	transform-origin: bottom left;
    }
    
    .size32は非対応ブラウザのことを考えなければ
    .size32{
    	margin: -32px -28px 0 0;
    	transform: scale(.5);
    	transform-origin: bottom left;
    }
    
    だけでいいんですが、まあ、Safari や Android を外すわけにもいかないので。
    但し Internet Explorer8 以前では、ここまでやってもサイズ指定は反映されません。ごめんなさい!

    まあ、これはこんなところか…と思ったんですが、ここで問題が。
    左のアイコン(説明のため、大きめの画像にしてあります)にtransform:scale()を適用すると確かに右のように縮小し、要素自体としても小さくなっているんですが、他の要素はグレーで示した元の領域が、あたかも残っているように振る舞うのです。
    具体的にはアイコンに文字を続けて書くと、縮小したアイコンではなく、グレーの領域に続くように表示されてしまう。
    行もグレーの領域の分だけ空いてしまう。

    【こうしたいのに】
    すこやんかわいい。すこやんだいすこ。すこやんマジ天使。
    すこやんかわいい。すこやんだいすこ。すこやんマジ天使。

    【こうなる】
    すこやんかわいい。すこやんだいすこ。すこやんマジ天使。
    すこやんかわいい。すこやんだいすこ。すこやんマジ天使。

    ということで、この謎現象に対処するためマイナスのマージンを設定することにしました。
    マージン m の算出方法は、拡大率を r 、マージンを設定する幅 or 高さを s とおくと \[m = -s(1 - r)\] 例えば 64px を 0.5倍するなら、 \[m = -64(1 - 0.5) = -64 × 0.5= -32\] で、-32px ですね。

    (本来の意味での)マージンを取りたいときは少し足します。
    この記事では右側に 4px のマージンを取って、margin-right:-28pxに設定しています。
    サイズは大きくすることもできますが、拡大すると当然ながら画質は悪くなります。

    こんな弥縫策ではなく、もっと正攻法なやり方があるといいんですが…今はこれを選ぶ。

CSS【応用篇】

前項の三クラスが本スプライトアイコンを表示するための CSS になりますが、本項ではカスタマイズの例をいくつか紹介します。
CSSファイルを書き換えることになりますので、バックアップを忘れずに。
  1. セレクタによるサイズ適用

    まず、特定の HTML要素内のアイコンに自動的にサイズが適用されるようにする方法です。

    まずは~見出しから~

    例えば↑こんなふうに、見出し要素h3内に表示するアイコンサイズを32×32にするには
    <h3><div class="saki-icon ikuno size32"></div>まずは~見出しから~</h3>
    と、size32というクラスを追加すればいいんですが、見出しがたくさんある場合、また全ての記事のh3のアイコンを32×32に統一したい、という場合。
    その全てにsize32をいちいち書き加える、というのも地味に面倒ですし、あとでデザインを変えたいとなった時、該当箇所を全部探して修正しなければならないとなると、これはもう激しく面倒です。
    そこで、size32を定義した CSS に、
    .size32, h3>div.saki-icon{
        /* 略 */
    }
    
    と、「h3要素直下のdiv要素のうち、saki-iconというクラスに属しているもの」を意味するセレクタ「h3>div.saki-icon」を、コンマで区切って追加してやります。
    こうすることでsize32と同じ CSS が自動的に適用されるので、size32を追記しなくても32×32で表示されるようになります。
  2. 代替テキスト

    牌画ストライプには代替テキスト機能があり、何らかの理由で牌画が表示できない時には、タグの内側に書き込んでおいたテキストを表示します。
    例えば 赤ウーピン、みたいな感じですね。
    しかし今回のアイコンスプライトでは軽量化のためその機能を外しました。
    どうしても代替テキスト機能が必要な場合は、CSSファイルのsaki-iconクラスに以下のコードを追加します。
    background-position:-640px -9999px;
    text-indent:-9999px;
    
    HTML コード例
    <span class="saki-icon saki">宮永 咲</span>


適用タグ

基本クラス(.saki-icon)及び個別クラス、サイズ指定クラスは、いずれも適用を特定のタグに限定していないので、div以外の要素にも指定できます。
<table>
  <tbody>
    <tr>
      <td class="etupen saki-icon"></td>
      <td>this is a TD element</td>
    </tr>
  </tbody>
</table>
this is a TD element
これはふたつのtd要素のうち、左側に.saki-iconを指定した例。
あらかじめ別の CSS でpaddingが設定してあると、その分領域が広がってスプライトの隣接する画像が見えてしまうので、それを無効にするために
*[class*="saki-icon"]{
	padding: 0!important;
	/* class属性値に"saki-icon"という文字列を含む全ての要素 */
	/* という意味のセレクタ */
}
という CSS を入れてあります。
bordertdの CSS が反映されていますね。
まあtd要素に直接指定するよりも、中にdivを含めれば済むので、要らぬ仕様かもしれません。

なお、spanの空タグは HTML文法違反 = SEO的によろしくない、らしいので、代替テキスト機能をカスタマイズするのでなければ非推奨です。

やっぱりdivが無難です。