category
サイト構築 -CSS

[CSS]CSS Spritesに利用できる画像置換の実装例いろいろ

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

複数の画像を一枚にまとめて、スタイルシートで背景画像として指定するCSS Spritesに利用できる画像置換の実装例の紹介です。

画像置換する際には、CSSオフ時・画像オフ時・印刷時・音声ブラウザ対応・空タグ使用などを考慮する必要があります。

備考

  • コードは、参考サイトからサイズ指定などを変更しています。
  • 画像置換元は、全てH3要素になっています。
    H3は、テキスト(見出しのテキスト)もしくは画像(印刷用の見出し画像)です。
  • ブラウザに「背景画像」が表示されていれば、期待通りの動作です。
  • 使用している画像は、次の通りです。
  • 名称は、Revised Image Replacementを参考にしています。

サンプル:01 -Classic FIR

デモページ

サンプル:02 -Single-pixel <img> Replacement

デモページ

サンプル:03 -Radu Method

デモページ

サンプル:04 -Leahy/Langridge Method

デモページ

サンプル:05 -Phark Method

デモページ

サンプル:06 -Phark Revisited

デモページ

サンプル:07 -Dwyer Method

デモページ

サンプル:08 -Gilder/Levin Metho

デモページ

サンプル:09 -Lindsay Method

デモページ

サンプル:10 -Shea Enhancement

デモページ

サンプル:11

デモページ

サンプル:12

デモページ

サンプル:13

デモページ

サンプル:14

デモページ

参考サイト

Post on:2008年3月28日

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

トラックバック

トラックバック(URL)

コメント

comment:

※承認制のため、即時には反映されません。

まねきねこプロジェクト|開発ブログ
on 2008年11月4日

RPGツクール画像を使ってマップスクロール(CSS SPRITE)

CSS SPRITEというテクがある。通常、Webサイトには多数の画像を表示しているが、その画像を一枚の画像としてまとめたものを読み込み、CSSのbackground-imageやbackground-positionを用いて、画像の必…

ページの先頭へ




© coliss

RSS