プログラミング学習
当サイト使用テーマ・サーバー
![](http://image.moshimo.com/af-img/3130/000000053838.jpg)
\ SWELL【WordPressテーマ】 /
![](https://www10.a8.net/0.gif?a8mat=3TEWTB+BHSA7M+50+5SMI35)
\ レンタルサーバー【ConoHa WING】 /
美容・脱毛
![](https://aqua-programdiary.com/wp-content/uploads/2024/03/1.webp)
![](https://aqua-programdiary.com/wp-content/uploads/2024/03/2.webp)
![](https://aqua-programdiary.com/wp-content/uploads/2024/03/3.webp)
![](https://aqua-programdiary.com/wp-content/uploads/2024/03/4.webp)
ホームページ制作
![](https://aqua-programdiary.com/wp-content/uploads/2024/03/hp-pr.webp)
この記事では、CSSのアニメーションを使って無限ループで流れる画像を実装するプログラミングコードを解説していきます。
最初に完成形を見ていきます。
3枚の画像が右から左に向かって流れています。
See the Pen cssanimation02 by aqua (@aqua-programdiary) on CodePen.
まずは、HTMLのコーディングをしていきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="slide-animation">
<ul class="slide-contents">
<li><img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image1.jpg" alt=""></li>
<li><img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image2.jpg" alt=""></li>
<li><img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image3.jpg" alt=""></li>
</ul>
<ul class="slide-contents">
<li><img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image1.jpg" alt=""></li>
<li><img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image2.jpg" alt=""></li>
<li><img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image3.jpg" alt=""></li>
</ul>
<ul class="slide-contents">
<li><img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image1.jpg" alt=""></li>
<li><img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image2.jpg" alt=""></li>
<li><img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image3.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html> ... </html>
:
<head> ... </head>
:
meta
要素は文字コードとビューポート設定を指定します。link
要素で外部のスタイルシート(style.css
)を読み込みます。<body> ... </body>
:
<div class="slide-animation"> ... </div>
:
<ul class="slide-contents"> ... </ul>
:
ul
要素です。li
要素内に画像が配置されます。<li><img src="..."></li>
:
li
要素です。img
要素の src
属性に画像の URL を指定しています。CSSのコーディングをして完成です。
@charset 'utf-8';
img {
width: 100%;
}
li {
list-style: none;
}
ul {
margin: 0;
padding: 0;
}
.slide-animation {
display: flex;
gap: 10px;
overflow: hidden;
}
.slide-animation li {
width: 300px;
}
.slide-contents {
display: flex;
gap: 10px;
animation: loopAnimation 30s linear infinite;
}
@keyframes loopAnimation {
0% {
transform: translate(0%);
}
100% {
transform: translate(-100%);
}
}
@charset 'utf-8';
img { ... }
:
li { ... }
:
li
要素(スライドコンテンツの各アイテム)に適用されるスタイルです。デフォルトのリストスタイルを無効にします。ul { ... }
:
ul
要素に適用されるスタイルです。マージンとパディングをゼロに設定します。.slide-animation { ... }
:
display: flex
でフレックスコンテナを作成し、子要素間のギャップを設定します。overflow: hidden
でコンテナ外の要素を隠します。.slide-animation li { ... }
:
.slide-contents { ... }
:
display: flex
でフレックスコンテナを作成し、子要素間のギャップを設定します。animation
プロパティでキーフレームアニメーション loopAnimation
を30秒かけて無限に実行します。@keyframes loopAnimation { ... }
: