CSSスプライトとJavaScript

通常ホームページの画像はimgタグでそのまま全部表示させますが、CSSスプライトは一枚の画像の一部分を表示させるテクニックです。
例えば下のようなトランプの画像があります。この画像は一枚です。

この一枚の画像を読み込んで、ハートのエースやスペードの10など任意の一つのカードを表示することができます。
下はその例です。はじめはカードの裏面が表示されていますが、クリックすることで適当なカードが表示されます。
これらのカード画像は裏も表も全部上記の一枚の画像の一部分です。
CSSスプライトを使わないとトランプ全部で50枚以上の画像を用意する必要があり面倒なことになります。
CSSスプライトを使うことにより画像数を減らすことができ、サイトの表示を速めることができます。

HTML部分

外側のdivで使っているoverflow:hiddenは、内側で使っているfloat:leftをclearするためのものです。
cardクラスは全部共通、初期値でuraクラスを与えています。

<div style="width:500px;overflow:hidden;">
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
<div class="card ura"></div>
</div>

</div>

CSS部分

background-positionをずらすことにより、表示位置を変えています。
クラス名のc1～c13はクラブの1～13。d1～d13はダイヤの1～13。h1～h13はハートの1～13。s1～s13はスペードの1～13。
今回は、裏面とハートの1～10、スペードの1～10までしか使っていないのですが、一応全部載せています。

.card{
    background: url("https://liveinhope.biz/wp-content/uploads/2017/06/cards.jpg");
    width:87px;
    height:121px;
    margin:0 10px 10px 0;
    float:left;
}
.c1{
    background-position : 0px 0px;
}
.c2{
    background-position : -93px 0px;
}
.c3{
    background-position : -185px 0px;
}
.c4{
    background-position : -278px 0px;
}
.c5{
    background-position : -371px 0px;
}
.c6{
    background-position : -464px 0px;
}
.c7{
    background-position : -557px 0px;
}
.c8{
    background-position : -650px 0px;
}
.c9{
    background-position : -742px 0px;
}
.c10{
    background-position : -835px 0px;
}
.c11{
    background-position : -928px 0px;
}
.c12{
    background-position : -1021px 0px;
}
.c13{
    background-position : -1113px 0px;
}

.d1{
    background-position : 0px -146px;
}
.d2{
    background-position : -93px -146px;
}
.d3{
    background-position : -185px -146px;
}
.d4{
    background-position : -278px -146px;
}
.d5{
    background-position : -371px -146px;
}
.d6{
    background-position : -464px -146px;
}
.d7{
    background-position : -557px -146px;
}
.d8{
    background-position : -650px -146px;
}
.d9{
    background-position : -742px -146px;
}
.d10{
    background-position : -835px -146px;
}
.d11{
    background-position : -928px -146px;
}
.d12{
    background-position : -1021px -146px;
}
.d13{
    background-position : -1113px -146px;
}

.h1{
    background-position : 0px -291px;
}
.h2{
    background-position : -93px -291px;
}
.h3{
    background-position : -185px -291px;
}
.h4{
    background-position : -278px -291px;
}
.h5{
    background-position : -371px -291px;
}
.h6{
    background-position : -464px -291px;
}
.h7{
    background-position : -557px -291px;
}
.h8{
    background-position : -650px -291px;
}
.h9{
    background-position : -742px -291px;
}
.h10{
    background-position : -835px -291px;
}
.h11{
    background-position : -928px -291px;
}
.h12{
    background-position : -1021px -291px;
}
.h13{
    background-position : -1113px -291px;
}

.s1{
    background-position : 0px -437px;
}
.s2{
    background-position : -93px -437px;
}
.s3{
    background-position : -185px -437px;
}
.s4{
    background-position : -278px -437px;
}
.s5{
    background-position : -371px -437px;
}
.s6{
    background-position : -464px -437px;
}
.s7{
    background-position : -557px -437px;
}
.s8{
    background-position : -650px -437px;
}
.s9{
    background-position : -742px -437px;
}
.s10{
    background-position : -835px -437px;
}
.s11{
    background-position : -928px -437px;
}
.s12{
    background-position : -1021px -437px;
}
.s13{
    background-position : -1113px -437px;
}

.ura{
    background-position : -185px -583px;
    cursor: pointer;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

.card{

background: url("https://liveinhope.biz/wp-content/uploads/2017/06/cards.jpg");

width:87px;

height:121px;

margin:0 10px 10px 0;

float:left;

}

.c1{

background-position : 0px 0px;

}

.c2{

background-position : -93px 0px;

}

.c3{

background-position : -185px 0px;

}

.c4{

background-position : -278px 0px;

}

.c5{

background-position : -371px 0px;

}

.c6{

background-position : -464px 0px;

}

.c7{

background-position : -557px 0px;

}

.c8{

background-position : -650px 0px;

}

.c9{

background-position : -742px 0px;

}

.c10{

background-position : -835px 0px;

}

.c11{

background-position : -928px 0px;

}

.c12{

background-position : -1021px 0px;

}

.c13{

background-position : -1113px 0px;

}

.d1{

background-position : 0px -146px;

}

.d2{

background-position : -93px -146px;

}

.d3{

background-position : -185px -146px;

}

.d4{

background-position : -278px -146px;

}

.d5{

background-position : -371px -146px;

}

.d6{

background-position : -464px -146px;

}

.d7{

background-position : -557px -146px;

}

.d8{

background-position : -650px -146px;

}

.d9{

background-position : -742px -146px;

}

.d10{

background-position : -835px -146px;

}

.d11{

background-position : -928px -146px;

}

.d12{

background-position : -1021px -146px;

}

.d13{

background-position : -1113px -146px;

}

.h1{

background-position : 0px -291px;

}

.h2{

background-position : -93px -291px;

}

.h3{

background-position : -185px -291px;

}

.h4{

background-position : -278px -291px;

}

.h5{

background-position : -371px -291px;

}

.h6{

background-position : -464px -291px;

}

.h7{

background-position : -557px -291px;

}

.h8{

background-position : -650px -291px;

}

.h9{

background-position : -742px -291px;

}

.h10{

background-position : -835px -291px;

}

.h11{

background-position : -928px -291px;

}

.h12{

background-position : -1021px -291px;

}

.h13{

background-position : -1113px -291px;

}

.s1{

background-position : 0px -437px;

}

.s2{

background-position : -93px -437px;

}

.s3{

background-position : -185px -437px;

}

.s4{

background-position : -278px -437px;

}

.s5{

background-position : -371px -437px;

}

.s6{

background-position : -464px -437px;

}

.s7{

background-position : -557px -437px;

}

.s8{

background-position : -650px -437px;

}

.s9{

background-position : -742px -437px;

}

.s10{

background-position : -835px -437px;

}

.s11{

background-position : -928px -437px;

}

.s12{

background-position : -1021px -437px;

}

.s13{

background-position : -1113px -437px;

}

.ura{

background-position : -185px -583px;

cursor: pointer;

}

JavaScript部分

JavaScriptについては、次回解説しますが、今回のソースは以下です。

//シャッフル関数はこちらを参照　https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
function shuffle(array) {
    var currentIndex = array.length, temporaryValue, randomIndex;
    while (0 !== currentIndex) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }
    return array;
}

//カードの配列
var arr = [];

//オブジェクトを作るためのコンストラクタ関数
function Card(suit, no) {
    this.suit = suit;
    this.no = no;
}

//配列にnewを使ってオブジェクトのインスタンスを追加（ハートの1から10まで）
for (var i = 1; i <= 10; i++) {
    arr.push(new Card("h", i));
}

//配列にnewを使ってオブジェクトのインスタンスを追加（スペードの1から10まで）
for (var i = 1; i <= 10; i++) {
    arr.push(new Card("s", i));
}

//配列をシャッフル
arr = shuffle(arr);

//イベント登録する関数
function clickFunction(event) {
    //配列からオブジェクトを取り出す
    var a = arr[event.target.eventParam];
    //クラス名を変更
    this.className = "card " + a.suit + a.no;
}

//cardというクラス名が付いている要素群（HTMLCollection）を求める
var elements = document.getElementsByClassName("card");

//elementsをループしてイベント登録する
for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', clickFunction, false);
    elements[i].eventParam = i;
}

//シャッフル関数はこちらを参照　https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array

function shuffle(array) {

var currentIndex = array.length, temporaryValue, randomIndex;

while (0 !== currentIndex) {

randomIndex = Math.floor(Math.random() * currentIndex);

currentIndex -= 1;

temporaryValue = array[currentIndex];

array[currentIndex] = array[randomIndex];

array[randomIndex] = temporaryValue;

}

return array;

}

//カードの配列

var arr = [];

//オブジェクトを作るためのコンストラクタ関数

function Card(suit, no) {

this.suit = suit;

this.no = no;

}

//配列にnewを使ってオブジェクトのインスタンスを追加（ハートの1から10まで）

for (var i = 1; i <= 10; i++) {

arr.push(new Card("h", i));

}

//配列にnewを使ってオブジェクトのインスタンスを追加（スペードの1から10まで）

for (var i = 1; i <= 10; i++) {

arr.push(new Card("s", i));

}

//配列をシャッフル

arr = shuffle(arr);

//イベント登録する関数

function clickFunction(event) {

//配列からオブジェクトを取り出す

var a = arr[event.target.eventParam];

//クラス名を変更

this.className = "card " + a.suit + a.no;

}

//cardというクラス名が付いている要素群（HTMLCollection）を求める

var elements = document.getElementsByClassName("card");

//elementsをループしてイベント登録する

for (var i = 0; i < elements.length; i++) {

elements[i].addEventListener('click', clickFunction, false);

elements[i].eventParam = i;

}

ここまでは下準備で、次回何かを作ってみます。