CSSで画像の一部だけを表示する方法

  • CSS
  • 現在地

CSS Sprites で、画像を結合した際に再度CSSをいじったのでページの内容(主に具体例の部分)を書き直しました。(2011年05月21日)

clip プロパティとは

clip というプロパティは、セレクタが表示される領域内から座標を指定して、指定外の部分を隠しその部分だけを切抜き表示するものです。

画像をいくつも読み込むとページの表示速度が落ちることになるので一枚の画像から一部を切り抜いて表示する CSS Sprites や、:hover などの擬似クラスと組み合わせたロールオーバーにも使用できます。

サイト内リンクCSS Sprites のために画像を一枚に結合する

使用の際の注意と書き方

このプロパティの使用に少し苦労したので、ポイントについてリスト式で書いておこうと思います。

  1. clip を適用するセレクタが、絶対配置(position:absolute;)か固定配置(position:fixed;)されていないと clip の記述は適用されない。
  2. clip では、rect() の中に座標を上(top)右(right)下(bottom)左(left)の順にカンマ(,)で区切って記述する。

    半角空白だとW3Cのチェックでエラーになったので、カンマに変更。IE6,7には条件付きコメントによる別スタイルシートの方で半角空白で記述しておけば、適用できます。

  3. 下の座標は bottom プロパティのように下からの数値ではなく、上からの数値となり、右の座標も左からの数値となる。
  4. 座標の値に auto を指定した場合は 0 と同様。また、値は px 以外に % や em なども使用可能。
  5. 切り抜かれた領域以外も隠されてはいるが、表示されるはずの領域を確保するので、表示位置を指定したい場合、セレクタの領域外の余白(margin)をマイナスで指定してずらす必要あり。
  6. 上記と同様に切り抜き領域外は隠されて表示されるので、ブラウザ(IE6,7)によってはその領域により無駄にスクロールバーが表示される。そのため予防策として画像を表示させる領域に position:relative; と overflow:hidden; を指定して隠す必要がある。
  7. セレクタはボックスのような要素なら画像以外も指定可能だが、座標外にテキストがある場合隠しテキスト扱いされる恐れがあるかもしれない。(あくまで推測ですが。)

そのため切抜き表示したい場合は、以下のように切り抜く画像に設定する ID 以外に、表示領域用の Class も併せて記述することになります。

  • 領域用class{
    • width:値;height:値;overflow:hidden;position:relative;
    }
  • 画像用ID{
    • clip:rect(top,right,bottom,left);position:absolute;
    }

clip による切り抜き表示の具体例

方法だけだとわかりにくいので、具体例として以前このサイト内で実際に使用していた画像から、W3CのXHTML用アイコンを clip で切り抜いて表示する場合の記述を載せておきます。

説明
  1. 画像を表示させる領域 .bunner にて幅と高さを指定し、対IE6,7用に overflow:hidden; と position:relative; で領域外を隠します。
  2. 次に、画像に position:absolute; と clip(); による切り抜く座標の情報を持たせる ID(#x-w3c)を用意します。
  3. あとは、HTML上で .bunner を指定したブロック内で、#x-w3c のID を持った <img> にて、画像を指定することで切抜き表示できます。
CSS
  • .bunner{width:88px;height:31px;overflow:hidden;position:relative;}
  • #x-w3c{clip:rect(37px,227px,68px,139px);position:absolute;margin:-37px 0 0 -140px;}
HTML
  • <div class="bunner">
    • <a href="http://validator.w3.org/check?uri=referer" target="_blank">
      • <img src="http://vavevoo.web.fc2.com/img/csg.png" id="x-w3c" name="x-w3c" alt="Valid XHTML 1.0 Transitional" />
    • </a>
  • </div>

最後に、上の記述で切抜き表示するとこのようになります。

id の x-w3c は、実際に使用しているため2度使うとエラーが出ます。なので、上記の画像はインラインスクリプトで再現してみました。

追記

なお、CSS Sprites のために使用する場合は、HTML上で画像の width と height を指定してしまうと、CSS Sprites 用の画像のサイズが変わった場合に、歪んでしまいます。

この場合、いちいち全HTMLの画像のサイズを変更しないといけなくなるので、width と height は CSS 側で変更しましょう。

また、.bunner は 88×31 専用になっていますので、他のサイズ用の領域も必要ということになります。

なので、以下のように .bunner の記述を CSS Sprites 専用の class 属性を別に用意して分けた方が管理しやすいです。(HTMLでは同時に読み込みましょう。)

  • .sprites{overflow:hidden;position:relative;}
  • .sprites img{width:291px;height:162px;}
  • .bunner{width:88px;height:31px;}

これで画像のサイズが変わった場合は、.sprites img のサイズを変更するだけでよくなり、新たに表示領域とする class を作る場合も、width と height さえ指定すればよくなります。

後書き

CSS Sprites の方法として、background-position による切抜き表示でなく、alt 属性が使える clip による切抜きを採用してみました。

ただ、clip がブラウザごとに扱いが異なるようで、画像を表示させる領域に overflow:hidden; と position:relative; を設定しないと安定した表示が見込めません。

なので、記述が増えてしまう事もあり、alt 属性と title 属性を使う必要がないただのボタンを設置する場合は、background-position による方法の方がいいかもしれません。

サイト内関連ページ : PageSpeed を参考に Web ページの表示速度向上のためにやってみたことのまとめ

スポンサードリンク

inserted by FC2 system