今回は電光掲示板を作成して見ました。
上は背景用に用意した画像（backpic.jpg 400 ×300px）です。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>電光掲示板風テキスト</title>
<style>
/* 全体背景色 */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
/* 背景画像をタイリング表示 */
background-image: url(pic/backpic.jpg) ;
font-family: Arial, sans-serif;
}
/* 電光掲示板のスタイル */
.marquee-container {
width: 100%;
overflow: hidden;
background-color: #000000; /* Black */
border: 10px solid #4169e1; /* royalblue */
padding: 10px;
}
/* テキストのスタイルとアニメーション */
.marquee-text {
display: inline-block;
white-space: nowrap; /* テキストを1行表示 */
font-size: 2em; /* 文字の高さ */
/* サイズ未設定なら1em=16px */
animation: scroll 10s linear infinite;
/* スクロールのスピード */
color: #ffdd00; /* 黄色に近い電光掲示板色 */
}
/* スクロールアニメーション */
/* ここの値は変更しない方がいいです */
@keyframes scroll {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
</style>
</head>
<body>
<div class="marquee-container">
<div class="marquee-text">
昔々、ある所に老夫婦が慎ましく住んでおりました。
そんなある日、お爺さんは山へ柴刈りに、
お婆さんが川へ洗濯に出かけると・・・
<!-- 表示テキストは改行せずに記述 -->
</div>
</div>
</body>
</html>
<!-- index.html -->
背景画像はデフォルト設定のタイリングにしています。
今回もユニバーサルデザイン的には好ましくないので、切り替えボタンは用意しましょう。
