HTMLとCSSで画像のスライドショーを作成
記事投稿日: 2024年5月4日（土）
最終更新日: 2024年5月4日（土）
目次
はじめに
ページにお知らせ用の画像のスライドショーを設置したくて、HTMLとCSSを書いてみました。 サンプルのコードをメモとして残しておきます。
HTMLとCSSのサンプル
HTMLとCSSのサンプルはこんな感じです。 実際のお知らせの表示はページの最下部にあります。
HTML
スライドショーに配置する画像を設定します。
<div class="slide">
<img src="https://yusukekato.jp/images/news/SOJ_news_20240503_2.jpg">
<img src="https://yusukekato.jp/images/news/SOJ_news_20230503_2.jpg">
</div>
CSS
スライドショー全体を10秒に設定し、それぞれの画像は5秒ごとに切り替わります。 アニメーションは永久的に動き続けます。 @keyframesでアニメーションのタイミングと位置を設定しています。
.slide {
position: relative;
overflow: hidden;
width: 480px;
height: 270px;
padding: 0.5rem 1.0rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
margin-left: auto;
margin-right: auto;
background: #fff;
border: 1px solid #AAA;
}
.slide img {
display: block;
position: absolute;
margin-left: auto;
margin-right: auto;
width: inherit;
height: inherit;
left: 100%;
animation: slide-anime 10s linear infinite;
}
.slide img:nth-of-type(1) {animation-delay: 0s;}
.slide img:nth-of-type(2) {animation-delay: 5s;}
@keyframes slide-anime {
0% {left: 100%;}
4% {left: 3%;}
46% {left: 3%;}
50% {left: -100%;}
100% {left: -100%;}
}
おわりに
JavaScriptを実装しなくてもアニメーションができるのはありがたいですね。 もっとオシャレに動かせるように頑張ります。 それでは、また。
お知らせ
- 2024/09/07: ズグロシロハラインコ「ぽぽ」我が家へ
- 2024/08/01: れもんが我が家に来て一ヶ月
- 2024/06/29: セキセイインコ「れもん」我が家へ
- 2024/05/03: シェル芸オンラインジャッジ一周年
過去のお知らせ
- 2023/05/03: シェル芸オンラインジャッジ開始
- 2023/04/08: 加藤祐介ブログ開始
シリーズ記事一覧
各シリーズの記事を下記にまとめてあります。
