加藤祐介ブログ

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

お知らせ

過去のお知らせ

シリーズ記事一覧

各シリーズの記事を下記にまとめてあります。

我が家のインコ「れもん&ぽぽ&ぐぐ」の日記 我が家のインコ「れもん&ぽぽ&ぐぐ」の日記15 : 落花生、新聞紙、れもんとぐぐの邂逅 インコの飼い方と注意点(2024年版) 我が家のインコ「れもん&ぽぽ&ぐぐ」の日記14 : 大人に近づくれもんと遊ぶ余裕が出てきたぐぐ 我が家のインコ「れもん&ぽぽ&ぐぐ」の日記13 : 生後4ヶ月を迎えたれもんと我が家に慣れてきたぐぐ 我が家のインコ「れもん&ぽぽ&ぐぐ」の日記12 : ぽぽが亡くなりました、そしてぐぐがやってきました インコ仲間「れもん&ぽぽ」の日記11 : ズグロシロハラインコのぽぽ、我が家へ セキセイインコ「れもん」の日記10 : 生後100日のれもん、ついに喋る セキセイインコ「れもん」の日記9 : 換羽期のれもん セキセイインコ「れもん」の日記8 : 病院へ挑戦! セキセイインコ「れもん」の日記7 : 外出用ゲージにチャレンジ! セキセイインコ「れもん」の日記6 : 新宿ことり博に行ってきました! セキセイインコ「れもん」の日記5 : 3週間経って順調に成長している模様 セキセイインコ「れもん」の日記4 : 鳥フェス千葉2024に行ってきました! セキセイインコ「れもん」の日記3 : 2週間経って我が家にも慣れてきた模様 セキセイインコ「れもん」の日記:第2回 セキセイインコの「れもん」が我が家にやってきました!
AlpacaHackで始めるCTF入門 AlpacaHackで始めるCTF入門6:AlpacaHack Round 4 - Simple Flag Checkerに挑戦 AlpacaHackで始めるCTF入門5:AlpacaHack Round 3 - qrimeに挑戦 AlpacaHackで始めるCTF入門4:AlpacaHack Round 2 - Simple Loginに挑戦 AlpacaHackで始めるCTF入門3:初めてのCTFに参加 AlpacaHackで始めるCTF入門2:DreamhackでCTF入門 AlpacaHackで始めるCTF入門1:初めてのCTF
シェル芸 第66回シェル芸勉強会メモ 第64回シェル芸勉強会メモ ChatGPTでシェル芸勉強会の問題が解きたい シェル芸botで遊びたい(Bash)
ROS 2 改訂新版『ROS 2ではじめよう』を読了&メモ書き ROS 2 Jazzy公式チュートリアル02: ROS 2のノードとトピックについて ROS 2 Jazzy公式チュートリアル01: ROS 2 Jazzyのインストールから動作確認まで ROS 2 Humble 公式チュートリアル 02: ROS 2 のノード関係のコマンド ROS 2 Humble 公式チュートリアル 01: 環境構築から turtlesim まで
読書日記 改訂新版『ROS 2ではじめよう』を読了&メモ書き
映画日記 映画日記『ラストマイル』感想【ネタバレあり】
料理日記 料理日記:豆腐春巻き 料理日記:鶏肉とナスのほりにし炒め 料理日記:卵焼き 料理日記:鶏肉の照り焼き&小松菜のおひたし 料理日記:納豆蕎麦 料理日記:ローストビーフ 料理日記:バターガーリックチキン
その他 HTMLのvideoタグで貼った動画のサムネイルがSafariで表示されない問題を解決 WSL2上のUbuntuのVimで矩形選択するための設定 JR東日本公式のお忘れ物チャットにお世話になった話 HTMLとCSSで画像のスライドショーを作成 GitHub Actionsでサーバ上のブログを自動更新 『Omega Crafter』プレイ日記: チュートリアル編 自作ブログ大改造計画 Windows と Ubuntu のデュアルブート HTML数式表示テスト 自作ブログ開始

加藤祐介ブログの著作物はCC BY-NC-ND 4.0で公開されています。
加藤祐介ブログのソフトウェアはApache License 2.0で公開されています。
About License: GitHub - YusukeKatoBlog/LICENSE
© 2023 YusukeKato All Rights Reserved.