bijin.css で "bijin16.jpg" を切り分けて描画します。
  1. "bijin16.jpg" は 60*60 の Sprite を４行４列に並べた画像です。
    この画像から CSS(Cascading Style Sheets) で Sprite を切り分けて描画します。
  2. 美人の画像を切り分ける "bijin.css" です。
    sumaho.css に続けて bijin.css をリンクします。
    #map {
    width: 240px;
    height: 240px;
}
#bg {
    width: 240px;
    height: 240px;
}
.info {
    clear: both;
    padding: 10px 0;
}
.chip {
    float: left;
    width: 60px;
    height: 60px;
    background-image: url("bijin16.jpg");
}
.c0 {background-position: -0px -0px;}
.c1 {background-position: -60px -0px;}
.c2 {background-position: -120px -0px;}
.c3 {background-position: -180px -0px;}
.c4 {background-position: -0px -60px;}
.c5 {background-position: -60px -60px;}
.c6 {background-position: -120px -60px;}
.c7 {background-position: -180px -60px;}
.c8 {background-position: -0px -120px;}
.c9 {background-position: -60px -120px;}
.c10 {background-position: -120px -120px;}
.c11 {background-position: -180px -120px;}
.c12 {background-position: -0px -180px;}
.c13 {background-position: -60px -180px;}
.c14 {background-position: -120px -180px;}
.c15 {background-position: -180px -180px;}
  3. 美人の画像から４枚目, ７枚目, １０枚目の Sprite を描画してみます。
    <body><br>
<div class="chip c3"></div>
<div class="chip c6"></div>
<div class="chip c9"></div>