ロフト付きはおもしろい

ロフト大好きの68歳の老人の日記です

cssでつくるスライドショーをロフト付きホームページに挿入

良くできた見本(テンプレート)でしたのでうまくできました。cssがとにかく長いので全く私には理解できません。

昨日今日と
ホームページの
分かり易くするために
スライドショーを
作ってみました。

今まで
スライドショーは
gifアニメか
javaで作る物と
思っていましたが
cssだけで作るそうで
cssアニメと呼ばれるそうです。

もちろんはじめから
絶対に作れないので
作ったものを
挿入することにしました。

優秀な人には
簡単ですが
私には
なかなかです。

大阪防音賃貸
大阪園田ロフト付き賃貸
防犯対策付お部屋
カスタマイズ賃貸
ピアノのドラムも使えるお部屋
ドラムもピアノも使える大阪防音賃貸

ホームページ上の記載
本当は<head>内に設置するのですがこのブログは借りているものなので触れません。
<body>内に設置しております。
noblog」では動くみたいです。

<style type="text/css">
<!--

stage {position: relative;max-width: 600px;margin: 0 auto;overflow: hidden;height: 200px ;}#photos {position:absolute;top:0;width:100%;animation: imgPassToLeft0 30s infinite;-webkit-animation: imgPassToLeft0 30s infinite;}#photo0 { left: 0%; }#photo1 { left:100%; }#photo2 { left:200%; }#photo3 { left:300%; }#photo4 { left:400%; }#photo5 { left:500%; }#photo6 { left:600%; }.pic { position:absolute;top:0;width:100%; }.pic img { width:100%; }#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5{display: none;}.b_left span, .b_right span {position: absolute;font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;font-size: 40px;font-weight: bold;opacity:0;top: 40%;color:#EEE;}.b_left span {left: 5%;;}.b_right span {left: 85%;}.pic:hover > label div span {opacity:1; color:#EEE;}.pic label div span:hover {color:#f00;cursor:pointer;}#next1:checked ~ #photos {animation: imgPassToLeft1 30s infinite;animation-delay: -4.8s;-webkit-animation: imgPassToLeft1 30s infinite;-webkit-animation-delay: -4.8s;}#next2:checked ~ #photos {animation: imgPassToLeft2 30s infinite;animation-delay: -10.8s;-webkit-animation: imgPassToLeft2 30s infinite;-webkit-animation-delay: -10.8s;}#next3:checked ~ #photos {animation: imgPassToLeft3 30s infinite;animation-delay: -16.8s;-webkit-animation: imgPassToLeft3 30s infinite;-webkit-animation-delay: -16.8s;}#next4:checked ~ #photos {animation: imgPassToLeft4 30s infinite;animation-delay: -22.8s;-webkit-animation: imgPassToLeft4 30s infinite;-webkit-animation-delay: -22.8s;}#next5:checked ~ #photos {animation: imgPassToLeft5 30s infinite;animation-delay: -28.8s;-webkit-animation: imgPassToLeft5 30s infinite;-webkit-animation-delay: -28.8s;}#back1:checked ~ #photos {animation: imgPassToRight1 30s infinite;animation-delay: -28.8s;-webkit-animation: imgPassToRight1 30s infinite;-webkit-animation-delay: -28.8s;}#back2:checked ~ #photos {animation: imgPassToRight2 30s infinite;animation-delay: -22.8s;-webkit-animation: imgPassToRight2 30s infinite;-webkit-animation-delay: -22.8s;}#back3:checked ~ #photos {animation: imgPassToRight3 30s infinite;animation-delay: -16.8s;-webkit-animation: imgPassToRight3 30s infinite;-webkit-animation-delay: -16.8s;}#back4:checked ~ #photos {animation: imgPassToRight4 30s infinite;animation-delay: -10.8s;-webkit-animation: imgPassToRight4 30s infinite;-webkit-animation-delay: -10.8s;}#back5:checked ~ #photos {animation: imgPassToRight5 30s infinite;animation-delay: -4.8s;-webkit-animation: imgPassToRight5 30s infinite;-webkit-animation-delay: -4.8s;}@keyframes imgPassToLeft0 {0% { left:-100%; }16% { left:-100%; }20% { left:-200%; }36% { left:-200%; }40% { left:-300%; }56% { left:-300%; }60% { left:-400%; }76% { left:-400%; }80% { left:-500%; }96% { left:-500%; }100% { left:-600%; }}@keyframes imgPassToLeft1 {0% { left:-100%; }16% { left:-100%; }20% { left:-200%; }36% { left:-200%; }40% { left:-300%; }56% { left:-300%; }60% { left:-400%; }76% { left:-400%; }80% { left:-500%; }96% { left:-500%; }100% { left:-600%; }}@keyframes imgPassToLeft2 {0% { left:-100%; }16% { left:-100%; }20% { left:-200%; }36% { left:-200%; }40% { left:-300%; }56% { left:-300%; }60% { left:-400%; }76% { left:-400%; }80% { left:-500%; }96% { left:-500%; }100% { left:-600%; }}@keyframes imgPassToLeft3 {0% { left:-100%; }16% { left:-100%; }20% { left:-200%; }36% { left:-200%; }40% { left:-300%; }56% { left:-300%; }60% { left:-400%; }76% { left:-400%; }80% { left:-500%; }96% { left:-500%; }100% { left:-600%; }}@keyframes imgPassToLeft4 {0% { left:-100%; }16% { left:-100%; }20% { left:-200%; }36% { left:-200%; }40% { left:-300%; }56% { left:-300%; }60% { left:-400%; }76% { left:-400%; }80% { left:-500%; }96% { left:-500%; }100% { left:-600%; }}@keyframes imgPassToLeft5 {0% { left:-100%; }16% { left:-100%; }20% { left:-200%; }36% { left:-200%; }40% { left:-300%; }56% { left:-300%; }60% { left:-400%; }76% { left:-400%; }80% { left:-500%; }96% { left:-500%; }100% { left:-600%; }}@keyframes imgPassToRight1 {0% { left:-500%; }16% { left:-500%; }20% { left:-400%; }36% { left:-400%; }40% { left:-300%; }56% { left:-300%; }60% { left:-200%; }76% { left:-200%; }80% { left:-100%; }96% { left:-100%; }100% { left:0%; }}@keyframes imgPassToRight2 {0% { left:-500%; }16% { left:-500%; }20% { left:-400%; }36% { left:-400%; }40% { left:-300%; }56% { left:-300%; }60% { left:-200%; }76% { left:-200%; }80% { left:-100%; }96% { left:-100%; }100% { left:0%; }}@keyframes imgPassToRight3 {0% { left:-500%; }16% { left:-500%; }20% { left:-400%; }36% { left:-400%; }40% { left:-300%; }56% { left:-300%; }60% { left:-200%; }76% { left:-200%; }80% { left:-100%; }96% { left:-100%; }100% { left:0%; }}@keyframes imgPassToRight4 {0% { left:-500%; }16% { left:-500%; }20% { left:-400%; }36% { left:-400%; }40% { left:-300%; }56% { left:-300%; }60% { left:-200%; }76% { left:-200%; }80% { left:-100%; }96% { left:-100%; }100% { left:0%; }}@keyframes imgPassToRight5 {0% { left:-500%; }16% { left:-500%; }20% { left:-400%; }36% { left:-400%; }40% { left:-300%; }56% { left:-300%; }60% { left:-200%; }76% { left:-200%; }80% { left:-100%; }96% { left:-100%; }100% { left:0%; }}@-webkit-keyframes imgPassToLeft0 {0% { left:-100%; }16% { left:-100%; }20% { left:-200%; }36% { left:-200%; }40% { left:-300%; }56% { left:-300%; }60% { left:-400%; }76% { left:-400%; }80% { left:-500%; }96% { left:-500%; }100% { left:-600%; }}@-webkit-keyframes imgPassToLeft1 {0% { left:-100%; }16% { left:-100%; }20% { left:-200%; }36% { left:-200%; }40% { left:-300%; }56% { left:-300%; }60% { left:-400%; }76% { left:-400%; }80% { left:-500%; }96% { left:-500%; }100% { left:-600%; }}@-webkit-keyframes imgPassToLeft2 {0% { left:-100%; }16% { left:-100%; }20% { left:-200%; }36% { left:-200%; }40% { left:-300%; }56% { left:-300%; }60% { left:-400%; }76% { left:-400%; }80% { left:-500%; }96% { left:-500%; }100% { left:-600%; }}@-webkit-keyframes imgPassToLeft3 {0% { left:-100%; }16% { left:-100%; }20% { left:-200%; }36% { left:-200%; }40% { left:-300%; }56% { left:-300%; }60% { left:-400%; }76% { left:-400%; }80% { left:-500%; }96% { left:-500%; }100% { left:-600%; }}@-webkit-keyframes imgPassToLeft4 {0% { left:-100%; }16% { left:-100%; }20% { left:-200%; }36% { left:-200%; }40% { left:-300%; }56% { left:-300%; }60% { left:-400%; }76% { left:-400%; }80% { left:-500%; }96% { left:-500%; }100% { left:-600%; }}@-webkit-keyframes imgPassToLeft5 {0% { left:-100%; }16% { left:-100%; }20% { left:-200%; }36% { left:-200%; }40% { left:-300%; }56% { left:-300%; }60% { left:-400%; }76% { left:-400%; }80% { left:-500%; }96% { left:-500%; }100% { left:-600%; }}@-webkit-keyframes imgPassToRight1 {0% { left:-500%; }16% { left:-500%; }20% { left:-400%; }36% { left:-400%; }40% { left:-300%; }56% { left:-300%; }60% { left:-200%; }76% { left:-200%; }80% { left:-100%; }96% { left:-100%; }100% { left:0%; }}@-webkit-keyframes imgPassToRight2 {0% { left:-500%; }16% { left:-500%; }20% { left:-400%; }36% { left:-400%; }40% { left:-300%; }56% { left:-300%; }60% { left:-200%; }76% { left:-200%; }80% { left:-100%; }96% { left:-100%; }100% { left:0%; }}@-webkit-keyframes imgPassToRight3 {0% { left:-500%; }16% { left:-500%; }20% { left:-400%; }36% { left:-400%; }40% { left:-300%; }56% { left:-300%; }60% { left:-200%; }76% { left:-200%; }80% { left:-100%; }96% { left:-100%; }100% { left:0%; }}@-webkit-keyframes imgPassToRight4 {0% { left:-500%; }16% { left:-500%; }20% { left:-400%; }36% { left:-400%; }40% { left:-300%; }56% { left:-300%; }60% { left:-200%; }76% { left:-200%; }80% { left:-100%; }96% { left:-100%; }100% { left:0%; }}@-webkit-keyframes imgPassToRight5 {0% { left:-500%; }16% { left:-500%; }20% { left:-400%; }36% { left:-400%; }40% { left:-300%; }56% { left:-300%; }60% { left:-200%; }76% { left:-200%; }80% { left:-100%; }96% { left:-100%; }100% { left:0%; }}

-->
</style>

「html」部分

<div id="stage">
<input type="radio" id="back1" name="gal">
<input type="radio" id="back2" name="gal">
<input type="radio" id="back3" name="gal">
<input type="radio" id="back4" name="gal">
<input type="radio" id="back5" name="gal">
<input type="radio" id="next1" name="gal">
<input type="radio" id="next2" name="gal">
<input type="radio" id="next3" name="gal">
<input type="radio" id="next4" name="gal">
<input type="radio" id="next5" name="gal">
<div id="photos">
<div id="photo0" class="pic"><img src="gallery_visual5.jpg">
</div>
<div id="photo1" class="pic"><a href="http://cwaweb.bai.ne.jp/~asukaru/itiran_bouhan.html"> src="http://oosaka.loft-mura.com/img/gallery_visual1.jpg" alt="大阪防音賃貸"></a>
<label for="back1"><div id="left1" class="b_left"><span><</span></div></label>
<label for="next1"><div id="right1" class="b_right"><span>></span></div></label>
</div>
<div id="photo2" class="pic"><a href="http://cwaweb.bai.ne.jp/~asukaru/itiran_roft.htm"> src="http://oosaka.loft-mura.com/img/gallery_visual2.jpg" alt="大阪園田ロフト付き賃貸"></a>
<label for="back2"><div id="left2" class="b_left"><span><</span></div></label>
<label for="next2"><div id="right2" class="b_right"><span>></span></div></label>
</div>
<div id="photo3" class="pic"><a href="http://cwaweb.bai.ne.jp/~asukaru/bouhan.html"> src="http://oosaka.loft-mura.com/img/gallery_visual3.jpg" alt="防犯対策付お部屋"></a>
<label for="back3"><div id="left3" class="b_left"><span><</span></div></label>
<label for="next3"><div id="right3" class="b_right"><span>></span></div></label>
</div>
<div id="photo4" class="pic"><a href="http://cwaweb.bai.ne.jp/~asukaru/customize.html"> src="http://oosaka.loft-mura.com/img/gallery_visual4.jpg" alt="カスタマイズ賃貸"></a>
<label for="back4"><div id="left4" class="b_left"><span><</span></div></label>
<label for="next4"><div id="right4" class="b_right"><span>></span></div></label>
</div>
<div id="photo5" class="pic"><a href="http://cwaweb.bai.ne.jp/~asukaru/bouhan.html"> src="http://oosaka.loft-mura.com/img/gallery_visual5.jpg" alt="ピアノのドラムも使えるお部屋"></a>
<label for="back5"><div id="left5" class="b_left"><span><</span></div></label>
<label for="next5"><div id="right5" class="b_right"><span>></span></div></label>
</div>
<div id="photo6" class="pic"><a href="http://cwaweb.bai.ne.jp/~asukaru/d79.htm"> src="http://oosaka.loft-mura.com/img/gallery_visual1.jpg" alt="ドラムもピアノも使える大阪防音賃貸"></a>
</div>
</div>
<div style="padding:28%;"></div>
</div>