ユニクロやミズノのサイトなどなど、トップページの上部に表示されているスライダーをよく目にする。おそらくjQueryなどのjavascriptで作成されていると思われるが、これを、本稿では純CSS（pure CSS）で作成する。これまでにも、このサイトでCSS製スライダーを作成してきたが、今回のは、写真の下に、スライド切換えボタンと、現スライドを標示するボタンを付け加えた、オールインワン型のスライダーである。本サンプルを土台に、CSSを駆使すれば、自分の意図したデザインのスライダーを作成して頂けると思う。
なお、画面のサイズに適応して表示サイズが縮小するように設定した。
サンプル（DEMO）
本サンプル表示用HTML
<!-- 画面上部の帯 -->
<div id="top_belt"></div>
<!-- スライド表示枠 -->
<div id="stage">
<!-- スライド切換えボタン用ラジオボタン -->
<input type="radio" id="r1" name="gal">
<input type="radio" id="r2" name="gal">
<input type="radio" id="r3" name="gal">
<input type="radio" id="r4" name="gal">
<input type="radio" id="r5" name="gal">
<!-- 送りボタン用ラジオボタン -->
<input type="radio" id="back1" name="gal"><input type="radio" id="next1" name="gal">
<input type="radio" id="back2" name="gal"><input type="radio" id="next2" name="gal">
<input type="radio" id="back3" name="gal"><input type="radio" id="next3" name="gal">
<input type="radio" id="back4" name="gal"><input type="radio" id="next4" name="gal">
<input type="radio" id="back5" name="gal"><input type="radio" id="next5" name="gal">
<!-- 現スライド標示ボタンのラジオボタンとの関連付け -->
<label for="r1" id="lb1" class="circ"><img src="images/btn_1.gif"></label>
<label for="r2" id="lb2" class="circ"><img src="images/btn_1.gif"></label>
<label for="r3" id="lb3" class="circ"><img src="images/btn_1.gif"></label>
<label for="r4" id="lb4" class="circ"><img src="images/btn_1.gif"></label>
<label for="r5" id="lb5" class="circ"><img src="images/btn_1.gif"></label>
<!-- スライド群 -->
<div id="photos">
<!-- スライド1 -->
<div id="photo1" class="pic">
<!-- スライド写真と現スライド標示ボタン -->
<img src="img2/1.jpg"><img src="images/btn_2.gif">
<!-- 送りボタンの表示とラジオボタンとの関連付け -->
<label for="back1"><span class="pb">＜</span></label>
<label for="next1"><span class="nb">＞</span></label>
</div>
<div id="photo2" class="pic">
<img src="img2/2.jpg"><img src="images/btn_2.gif">
<label for="back2"><span class="pb">＜</span></label>
<label for="next2"><span class="nb">＞</span></label>
</div>
<div id="photo3" class="pic">
<img src="img2/3.jpg"><img src="images/btn_2.gif">
<label for="back3"><span class="pb">＜</span></label>
<label for="next3"><span class="nb">＞</span></label>
</div>
<div id="photo4" class="pic">
<img src="img2/4.jpg"><img src="images/btn_2.gif">
<label for="back4"><span class="pb">＜</span></label>
<label for="next4"><span class="nb">＞</span></label>
</div>
<div id="photo5" class="pic">
<img src="img2/5.jpg"><img src="images/btn_2.gif">
<label for="back5"><span class="pb">＜</span></label>
<label for="next5"><span class="nb">＞</span></label>
</div>
</div>
<!-- stageの高さの確保 -->
<div style="padding:28%;"></div>
</div>
HTMLのポイント説明
・スライドは、両側の送りボタン表示枠とそれに挟まれた写真枠と、写真下部の現スライド標示ボタン表示枠とからなる。
・個々のスライドは、水平に帯状に並べる（CSSで）。
・スライド切換えボタンは、個々のスライド枠外のステージに配置され、現スライド標示ボタンと同じ位置に各ボタンが来るように配置する。
本サンプル表示用CSS
※各スライドにリンクを貼ることが可能になるよう、修正しました。
css記述中に /* と */ で挟んだ記述がありますが、これは、初期の記述で、不要となったものです。修正した記述が必要なものは、その前後に示してありますので、そちらを採用してください。
/* 画面上部の帯 */
#top_belt { max-width:660px;height:15px;background:#666;margin:0 auto; }
/*スライダー全体のコンテナー*/
#stage {
position: relative;
max-width: 660px;
margin: 0 auto;
background:#666;
overflow: hidden;
}
/*全ラジオボタンを非表示に*/
#r1,#r2,#r3,#r4,#r5,#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5 {
display: none;
}
/* 表示切換えボタンと表示位置 */
.circ img {
position: absolute;
bottom:2.5%;
cursor: pointer;
}
#lb1 img { left: 40%;width:3%; }
#lb2 img { left: 43%;width:3%; }
#lb3 img { left: 46%;width:3%; }
#lb4 img { left: 49%;width:3%; }
#lb5 img { left: 52%;width:3%; }
/* 左右送りボタン */
.pb, .nb { color:#fff;font-weight:bold; font-size:26px;display:block;position:absolute;top:45%;/*z-index:200;pointer-events:auto;*/}
.pb { left:0%; }
.nb { left:96%; }
.pb:hover, .nb:hover { color:orange; cursor:pointer; }
/* stageが初期サイズ以下のなったときのサイズ */
@media screen and (max-width: 660px) { .pb, .nb { font-size:18px; } }
/*全表示スライドのコンテナー*/
#photos {
position: absolute;
width:100%;
height:90%; /*100%;*/
left: 4.55%;
opacity:0;
/*pointer-events: none;*/
animation:flowSlides 40s infinite;
}
/* 個々のスライド・現スライド標示ボタン */
.pic {
position: absolute;
width:100%;
height:100%;
}
.pic img:nth-child(1) { width:90.9%; margin-left:4.55%; }
.pic img:nth-child(2) { width:3%; bottom:-8.5%; /*2.5%;*/ }
/*表示スライドをphotosの中に横並びで一列に並べる*/
#photo1 { left: 0; }
#photo2 { left: 660px; }
#photo3 { left: 1320px; }
#photo4 { left: 1980px; }
#photo5 { left: 2640px; }
/* 写真の下に現スライド標示ボタンを配置 */
#photo1 img:nth-child(2) { position:absolute;left:40%;width:3%; }
#photo2 img:nth-child(2) { position:absolute;left:43%;width:3%; }
#photo3 img:nth-child(2) { position:absolute;left:46%;width:3%; }
#photo4 img:nth-child(2) { position:absolute;left:49%;width:3%; }
#photo5 img:nth-child(2) { position:absolute;left:52%;width:3%; }
/*チェックされたドットに相当するスライドが画面中央になるようにphotosを移動*/
#r1:checked ~ #photos { animation:flowSlides1 40s infinite; animation-delay: 0s; }
#r2:checked ~ #photos { animation:flowSlides2 40s infinite; animation-delay:-8s; }
#r3:checked ~ #photos { animation:flowSlides3 40s infinite; animation-delay:-16s; }
#r4:checked ~ #photos { animation:flowSlides4 40s infinite; animation-delay:-24s; }
#r5:checked ~ #photos { animation:flowSlides5 40s infinite; animation-delay:-32s; }
/* 左右送りボタン */
#back1:checked ~ #photos { animation:flowSlides5 40s infinite; animation-delay:-32s; }
#back2:checked ~ #photos { animation:flowSlides1 40s infinite; animation-delay: 0s; }
#back3:checked ~ #photos { animation:flowSlides2 40s infinite; animation-delay:-8s; }
#back4:checked ~ #photos { animation:flowSlides3 40s infinite; animation-delay:-16s; }
#back5:checked ~ #photos { animation:flowSlides4 40s infinite; animation-delay:-24s; }
#next1:checked ~ #photos { animation:flowSlides2 40s infinite; animation-delay:-8s; }
#next2:checked ~ #photos { animation:flowSlides3 40s infinite; animation-delay:-16s; }
#next3:checked ~ #photos { animation:flowSlides4 40s infinite; animation-delay:-24s; }
#next4:checked ~ #photos { animation:flowSlides5 40s infinite; animation-delay:-32s; }
#next5:checked ~ #photos { animation:flowSlides1 40s infinite; animation-delay: 0s; }
/* 初期スライドショー */
@keyframes flowSlides {
0% { left:0px; opacity:0; }
2% { left:0px; opacity:1; }
18% { left:0px; opacity:1; }
20% { left:0px; opacity:0; }
20.01% { left:-660px; opacity:0; }
22% { left:-660px; opacity:1; }
38% { left:-660px; opacity:1; }
40% { left:-660px; opacity:0; }
40.01% { left:-1320px; opacity:0; }
42% { left:-1320px; opacity:1; }
58% { left:-1320px; opacity:1; }
60% { left:-1320px; opacity:0; }
60.01% { left:-1980px; opacity:0; }
62% { left:-1980px; opacity:1; }
78% { left:-1980px; opacity:1; }
80% { left:-1980px; opacity:0; }
80.01% { left:-2640px; opacity:0; }
82% { left:-2640px; opacity:1; }
98% { left:-2640px; opacity:1; }
100% { left:-2640px; opacity:0; }
}
/* 各スライド向けスライドショー */
@keyframes flowSlides1 {
0% { left:0px; opacity:0; }
2% { left:0px; opacity:1; }
18% { left:0px; opacity:1; }
20% { left:0px; opacity:0; }
20.01% { left:-660px; opacity:0; }
22% { left:-660px; opacity:1; }
38% { left:-660px; opacity:1; }
40% { left:-660px; opacity:0; }
40.01% { left:-1320px; opacity:0; }
42% { left:-1320px; opacity:1; }
58% { left:-1320px; opacity:1; }
60% { left:-1320px; opacity:0; }
60.01% { left:-1980px; opacity:0; }
62% { left:-1980px; opacity:1; }
78% { left:-1980px; opacity:1; }
80% { left:-1980px; opacity:0; }
80.01% { left:-2640px; opacity:0; }
82% { left:-2640px; opacity:1; }
98% { left:-2640px; opacity:1; }
100% { left:-2640px; opacity:0; }
}
@keyframes flowSlides2 {
0% { left:0px; opacity:0; }
2% { left:0px; opacity:1; }
18% { left:0px; opacity:1; }
20% { left:0px; opacity:0; }
20.01% { left:-660px; opacity:0; }
22% { left:-660px; opacity:1; }
38% { left:-660px; opacity:1; }
40% { left:-660px; opacity:0; }
40.01% { left:-1320px; opacity:0; }
42% { left:-1320px; opacity:1; }
58% { left:-1320px; opacity:1; }
60% { left:-1320px; opacity:0; }
60.01% { left:-1980px; opacity:0; }
62% { left:-1980px; opacity:1; }
78% { left:-1980px; opacity:1; }
80% { left:-1980px; opacity:0; }
80.01% { left:-2640px; opacity:0; }
82% { left:-2640px; opacity:1; }
98% { left:-2640px; opacity:1; }
100% { left:-2640px; opacity:0; }
}
@keyframes flowSlides3 {
0% { left:0px; opacity:0; }
2% { left:0px; opacity:1; }
18% { left:0px; opacity:1; }
20% { left:0px; opacity:0; }
20.01% { left:-660px; opacity:0; }
22% { left:-660px; opacity:1; }
38% { left:-660px; opacity:1; }
40% { left:-660px; opacity:0; }
40.01% { left:-1320px; opacity:0; }
42% { left:-1320px; opacity:1; }
58% { left:-1320px; opacity:1; }
60% { left:-1320px; opacity:0; }
60.01% { left:-1980px; opacity:0; }
62% { left:-1980px; opacity:1; }
78% { left:-1980px; opacity:1; }
80% { left:-1980px; opacity:0; }
80.01% { left:-2640px; opacity:0; }
82% { left:-2640px; opacity:1; }
98% { left:-2640px; opacity:1; }
100% { left:-2640px; opacity:0; }
}
@keyframes flowSlides4 {
0% { left:0px; opacity:0; }
2% { left:0px; opacity:1; }
18% { left:0px; opacity:1; }
20% { left:0px; opacity:0; }
20.01% { left:-660px; opacity:0; }
22% { left:-660px; opacity:1; }
38% { left:-660px; opacity:1; }
40% { left:-660px; opacity:0; }
40.01% { left:-1320px; opacity:0; }
42% { left:-1320px; opacity:1; }
58% { left:-1320px; opacity:1; }
60% { left:-1320px; opacity:0; }
60.01% { left:-1980px; opacity:0; }
62% { left:-1980px; opacity:1; }
78% { left:-1980px; opacity:1; }
80% { left:-1980px; opacity:0; }
80.01% { left:-2640px; opacity:0; }
82% { left:-2640px; opacity:1; }
98% { left:-2640px; opacity:1; }
100% { left:-2640px; opacity:0; }
}
@keyframes flowSlides5 {
0% { left:0px; opacity:0; }
2% { left:0px; opacity:1; }
18% { left:0px; opacity:1; }
20% { left:0px; opacity:0; }
20.01% { left:-660px; opacity:0; }
22% { left:-660px; opacity:1; }
38% { left:-660px; opacity:1; }
40% { left:-660px; opacity:0; }
40.01% { left:-1320px; opacity:0; }
42% { left:-1320px; opacity:1; }
58% { left:-1320px; opacity:1; }
60% { left:-1320px; opacity:0; }
60.01% { left:-1980px; opacity:0; }
62% { left:-1980px; opacity:1; }
78% { left:-1980px; opacity:1; }
80% { left:-1980px; opacity:0; }
80.01% { left:-2640px; opacity:0; }
82% { left:-2640px; opacity:1; }
98% { left:-2640px; opacity:1; }
100% { left:-2640px; opacity:0; }
}
CSSのポイント説明
・スライドは、水平に並べ帯状になるようにする。
・スライドショーは、スライドを8秒間隔のFadeIN_OUTで切り替えるタイプで、切り替え時に素早く表示位置に水平移動させている。
・送りボタン、切換えボタンは、クリック時に目的のスライドからスライドショーが再開始されるように、スライドショーで使うanimationを共有している。
・現スライド標示ボタンは、個々のスライドに配置されたボタンが、スライドと一緒に移動し、相当する切換えボタンの位置に配置される。
・写真やボタン類の配置位置は％指定になっているので、使用する写真サイズ、デザインによって調整を必要とする。
・切換えボタンが#photosの下層になっていて、クリックに反応しないので、#photosのcssにpointer-events: none;を記述して反応するようにしている。また、送りボタンには、pointer-events: auto; を記述してクリックに反応するようにしている。