ポケモンゲットだぜ!
ポケモンずかん
https://zukan.pokemon.co.jp/
スライドショーを作ってみよう！
スタイルシートをリンクする
|
1 |
<link href="style.css" rel="stylesheet"> |
スライドショー
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<section class="gallery"> <ul class="gallery_slide"> <li><img src="001.png"></li> <li><img src="002.png"></li> <li><img src="003.png"></li> <li><img src="004.png"></li> <li><img src="005.png"></li> <li><img src="006.png"></li> <li><img src="007.png"></li> <li><img src="008.png"></li> <li><img src="009.png"></li> <li><img src="010.png"></li> </ul> </section> |
スタイルシート
|
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 |
li{list-style-type:none;} /* 親要素の設定 */ .gallery { width: 100%; overflow: hidden; /* 子要素がはみ出さないようにする */ } /* スライダー部分の設定 */ .gallery_slide { display: flex; /* 横並びにする */ width: 100%; /* 横幅いっぱいにする */ animation: slide 24s linear infinite; /* アニメーションの設定 */ } /* 各アイテムの設定 */ .gallery_slide li { flex: 0 0 25%; /* 1つの画像が全体の4分の1の幅を取る */ width: 100%; /* 幅を指定 */ } /* スライダー部分の設定 */ .gallery_slide { display: flex; width: 100%; animation: slide 24s linear infinite; /* 無限ループの設定 */ } /* アニメーション（スライド） */ @keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); /* 1周分の移動 */ } } .gallery_slide { display: flex; width: 100%; animation: slide 12s linear infinite; /* 12秒で1周する設定 */ } |
素材を使う
● ダウンロードする
