ポケモンずかん
https://zukan.pokemon.co.jp/
スライドショーを作ってみよう！
キャラクターが、くるくる回って楽しいページを作ってみよう。
【サンプル】
https://wwweb.jp/sample/001/
スタイルシートを用意し、HTMLからリンクする
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>タイトルを入力</title>
</head>
<body>
</body>
</html>スライドショーエリア
画像を用意し、以下のように呼び出す。
<section class="gallery">
<ul class="gallery_slide">
<li><figure><img src="001.png"></figure></li>
<li><figure><img src="002.png"></figure></li>
<li><figure><img src="003.png"></figure></li>
<li><figure><img src="004.png"></figure></li>
<li><figure><img src="005.png"></figure></li>
<li><figure><img src="006.png"></figure></li>
<li><figure><img src="007.png"></figure></li>
<li><figure><img src="008.png"></figure></li>
<li><figure><img src="009.png"></figure></li>
<li><figure><img src="010.png"></figure></li>
</ul>
</section>スタイルシート
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周する設定 */
}
ロゴや背景素材を使う場合
● ダウンロードする
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。