🔍
写真家やビジュアル制作者がアイコンとCSSを実装へまとめて渡す前には、スプライトシートが役立ちます。アイコンを一枚のシートにまとめ、CSSも出力します。
アイコンを一枚のシートにまとめ、CSSも出力します。ブラウザーで無料で使え、アカウントを作らずに結果を確認して次の作業へ進めます。
フロントエンド開発者が、ナビゲーションバー用の小さなアイコン一式をまとめています。ファイルを読み込み、適切なシート幅と小さな余白を選び、生成されたシートとCSSをプロジェクトに追加します。ページは多数の個別ファイルではなく、1つの画像を要求できるようになります。
シートの構築とCSSの生成はブラウザー内で実行されます。画像ファイルはアップロードされず、アカウントも不要で、完成したアセットはデバイス上でダウンロードできるようになります。
アイコンの数と、シートをどこで使うかを考えます。適度な幅ならシートが極端に縦長になるのを防げますが、幅を広くすると高さを抑えられます。まず1つの値を試し、結果を確認して、レイアウトのバランスが悪ければ調整してください。
そのまま使っても、命名規則に合わせて調整しても、配置の参考として読むだけでもかまいません。CSSは各スプライトがシート内のどこにあるかを示します。スタイルシートを残すかどうかに関係なく、シート画像自体は同じままです。
はい、PNG、JPEG、WebPファイルを一緒に選択できます。アイコンには、透明部分のあるPNGファイルがよく適しています。さまざまなページ背景にきれいに馴染むからです。元の形式によって端や背景部分の見え方が変わるため、最終的なシートは必ず確認してください。