通常ホームページの画像はimgタグでそのまま全部表示させますが、CSSスプライトは一枚の画像の一部分を表示させるテクニックです。
例えば下のようなトランプの画像があります。この画像は一枚です。
この一枚の画像を読み込んで、ハートのエースやスペードの10など任意の一つのカードを表示することができます。
下はその例です。はじめはカードの裏面が表示されていますが、クリックすることで適当なカードが表示されます。
これらのカード画像は裏も表も全部上記の一枚の画像の一部分です。
CSSスプライトを使わないとトランプ全部で50枚以上の画像を用意する必要があり面倒なことになります。
CSSスプライトを使うことにより画像数を減らすことができ、サイトの表示を速めることができます。
HTML部分
外側のdivで使っているoverflow:hiddenは、内側で使っているfloat:leftをclearするためのものです。
cardクラスは全部共通、初期値でuraクラスを与えています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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> |
CSS部分
background-positionをずらすことにより、表示位置を変えています。
クラス名のc1~c13はクラブの1~13。d1~d13はダイヤの1~13。h1~h13はハートの1~13。s1~s13はスペードの1~13。
今回は、裏面とハートの1~10、スペードの1~10までしか使っていないのですが、一応全部載せています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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については、次回解説しますが、今回のソースは以下です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
//シャッフル関数はこちらを参照 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; } |
ここまでは下準備で、次回何かを作ってみます。