星19個のうち5つだけを表示させて「星レベル」を表現
先ほど用意した「星が19個並んだ画像」は、星1つあたりの横幅が15pxになるよう作られています。（空白も含めて15px）
 |
つまり、以下のように表示開始位置を調整した上で、横幅75px（星5つ分）だけを表示させれば、様々な星レベル（星ランク）の値を表現できます。
左端から 0pxの位置： 星5.0 ， 左端から150pxの位置： 星4.5
左端から15pxの位置： 星4.0 ， 左端から165pxの位置： 星3.5
左端から30pxの位置： 星3.0 ， 左端から180pxの位置： 星2.5
左端から45pxの位置： 星2.0 ， 左端から195pxの位置： 星1.5
左端から60pxの位置： 星1.0 ， 左端から210pxの位置： 星0.5
左端から75pxの位置： 星0.0
星19個のうち5つだけを表示させるスタイルシート
上記のように表示範囲を限定するスタイルシートソースは、以下の通りです。 （星画像のファイル名は「starlevels.gif」としています。）
.starlevel5 {
background-image: url('starlevels.gif'); /*星画像*/
background-repeat: no-repeat; /* 繰り返しはナシ */
width: 75px; /* 横幅は星５つ分 */
height: 15px; /* 高さは星１つ分 */
}
.star50 { background-position: left top; }
.star40 { background-position: -15px top; }
.star30 { background-position: -30px top; }
.star20 { background-position: -45px top; }
.star10 { background-position: -60px top; }
.star00 { background-position: -75px top; }
.star45 { background-position: -150px top; }
.star35 { background-position: -165px top; }
.star25 { background-position: -180px top; }
.star15 { background-position: -195px top; }
.star05 { background-position: -210px top; }
■starlevel5クラス：
最初の「starlevel5」クラスで、背景画像（background-image）として星画像を指定しています。
タイル状に繰り返す必要はないので、背景画像の繰り返し（background-repeat）は「なし（no-repeat）」を指定しています。
横幅（width）は星5つ分である「75px」（＝15px×5個）を指定し、高さ（height）は星1つ分である「15px」を指定しています。
■star50～star05クラス：
次に、背景画像の表示位置を決定する background-position プロパティのみを記述した9個のクラスを列挙しています。
background-positionプロパティの値には、「左端からの表示位置」と「上端からの表示位置」の2つを並べて記述します。
※値「left」は左端のことで「0px」と同じ。値「top」は上端のことで「0px」と同じ。
「star50」クラスは「星５」，「star45」クラスは「星4.5」
「star40」クラスは「星４」，「star35」クラスは「星3.5」
： ： ： ： ： ：
「star00」クラスは「星０」，「star05」クラスは「星0.5」
……を表しています。
例えば、「星４」を表す star40クラスでは、値に「-15px」を指定しています。 これは、背景画像をマイナス方向（左側）へ15ピクセルずらして表示することを意味します。 その結果、「左から15ピクセル目」から始まる「合計75ピクセル」が表示されることになり、「橙色４つ＋灰色１つ」が表示できます。
さて、上記のスタイルシートを用意できたら、実際に星を表示させるHTMLを記述しましょう。 詳細は、次のページでご紹介いたします。
