CSSスプライト

家系図のアイコンがたくさんあるので、読み込み速度低減のためCSSスプライトなる方法を使ってみました。
一般的には、メニューとして使う画像をリンク移動に応じて切り替えたり、ツイッタやFacebookなどのアイコンのように同じページに何度も使われるアイコンをたくさんひとまとめにして読み込んで、必要な箇所に必要な範囲だけ表示するという技術です。

果たしてうちのようなページにそんな技術必要かと言われると疑問符が出ますが、要はやってみたいからやる、そんだけです。（開き直り）

1. アイコンを背景画像としてまとめる
   家系図の顔アイコンを作ります。それを大きな画像にびっしり並べます。画像作成ソフト（うちではFireworks使用）のグリッド機能を使うと楽です。家系図アイコンは大きさが一緒なので後で表示位置の指定を行うのも割と簡単。
2. CSSを書く
   アイコンの数に応じてclass指定を作り、backgroundのURL指定と描画範囲、表示位置の指定などを行います。spanタグなどにつけるため、display属性をblockにしてアイコンの大きさ分の幅と高さを指定します。
   もうちょっとスマートな書き方があるんじゃないかって気はするんですが、とりあえずこれでうまくいったので…
3. HTMLの該当箇所にspanタグ（とりあえず改行無しスペースを中に入れる）を挿入し、それにclass指定で背景画像（アイコン）を表示させます。
   

この方法だと代替テキストaltが使えないので、画像が見える環境専用になってしまうのと、背景画像はデフォルトで印刷されないのが欠点です。
でも今回の場合、アイコン自体に何の機能も無い（本当に絵を表示したいだけ）のと、もとがフリー素材を借りた画像なのでむしろ印刷されたりしないのは再配布防止になるのかも、ということで、この方法でいってみることにしました。

あと、2．のCSSを書くときにちょっとでも間違うと、うまく表示されません。class指定の.（ピリオド）抜けとか、コピペで記述を増やしたあとの修正忘れなどに気をつけたいものです。