加藤祐介ブログ

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を実装しなくてもアニメーションができるのはありがたいですね。 もっとオシャレに動かせるように頑張ります。 それでは、また。

お知らせ

シェル芸オンラインジャッジ

加藤祐介ブログはMITライセンスで公開されています。
Copyright Since 2023 (C) YusukeKato All Rights Reserved.