Webアプリケーション用アイコンスプライトシートの作成

アイコンスプライトシート

アイコンスプライトシートはCSSスプライトの最も一般的で実用的な使い方の一つです。30-50個の個別アイコンファイルを読み込む代わりに、1つのPNGに結合してCSSで各アイコンを表示します。

アイコンの整理

スプライトシートを生成する前に、アイコンを準備します：

1. 一貫したサイズ — すべてのアイコンを同じサイズに標準化（例：24x24、32x32、48x48ピクセル）
2. 一貫したパディング — 各アイコン内に等しい透明パディングを含める
3. 命名規則 — 説明的なファイル名を使用：icon-home.png、icon-search.png、icon-settings.png
4. カラーフォーマット — きれいなエッジのためにアルファ透明度付きのPNG-24を使用

生成されるCSS構造

/* ベースクラス — 共有プロパティ */
.icon {
  background-image: url('icons-sprite.png');
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: middle;
}

/* 個別アイコンクラス */
.icon-home {
  width: 24px;
  height: 24px;
  background-position: 0px 0px;
}

.icon-search {
  width: 24px;
  height: 24px;
  background-position: -26px 0px;
}

HTML使用法

<button>
  <span class="icon icon-home"></span>
  ホーム
</button>

<nav>
  <a href="/search"><span class="icon icon-search"></span> 検索</a>
  <a href="/profile"><span class="icon icon-user"></span> プロフィール</a>
</nav>

サイズの考慮事項

サイズ	ユースケース
16x16	ファビコン、インラインテキストアイコン
24x24	標準UIアイコン、ナビゲーション
32x32	ツールバーアイコン、機能ハイライト
48x48	ランディングページの機能、大きなボタン

グリッド配置のヒント

• 頻繁に使用されるアイコンを最初に配置する
• 関連するアイコンをグループ化する（ナビゲーション、アクション、ステータスインジケーター）
• ズームレベルでのブリードを防ぐために一貫したパディング（2-4px）を使用する
• 異なるサイズを混在させるよりも、アイコンサイズごとに別々のスプライトシートを検討する