2026年4月27日
教室の前にデジタル看板を置こう
文化祭で教室の前に看板を出したいけど、模造紙を書くのは大変…。そんなときは、HTMLでデジタル看板を作ってタブレットやPCに表示しましょう。
デジタル看板なら、文字が動いたり、色が変わったり、写真がスライドショーで切り替わったりと、紙の看板にはできない演出ができます。
しかも、HTMLファイルをUSBメモリに入れてタブレットのブラウザで開くだけ。インターネット接続も不要です。
この記事では、文化祭のデジタル看板をHTMLで作る方法を、コード例付きで解説します。
プログラミングが初めての人でも大丈夫です。HTMLの基本から学びたい人は、プログラミングの始め方を先に読んでおくとスムーズです。
デジタル看板の基本構成
デジタル看板に表示する内容:
- クラス名・出し物の名前（大きな文字）
- 開催時間
- 「ぜひ来てね！」などのメッセージ
- 背景色やイラスト
HTMLの基本構造:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>デジタル看板</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="signage">
<h1 class="signage-title">2年3組 お化け屋敷</h1>
<p class="signage-time">10:00〜15:00</p>
<p class="signage-message">ぜひ来てね！</p>
</div>
</body>
</html>全画面表示にするCSS
看板は画面いっぱいに表示したいので、余白をなくして中央配置にします。
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
font-family: sans-serif;
}
.signage {
text-align: center;
padding: 40px;
}
.signage-title {
font-size: 72px;
margin-bottom: 24px;
}
.signage-time {
font-size: 36px;
margin-bottom: 16px;
}
.signage-message {
font-size: 28px;
}ポイント:
- min-height: 100vh で画面の高さいっぱいに表示
- display: flex + align-items: center で上下中央配置
- background: linear-gradient でグラデーション背景
CSSの基本的な書き方がわからない人は、最初のCSSで基礎を確認しましょう。色の指定方法やフォントサイズの変え方を学べます。
看板のデザインは自由にカスタマイズできます。背景色を学校のスクールカラーに変えたり、フォントサイズを調整したり。自分のクラスに合ったデザインを考えてみましょう。
CSSアニメーションで動きをつける
静止画だけだと目を引きにくいので、CSSアニメーションで動きをつけましょう。
テキストを点滅させる
.signage-message {
animation: blink 2s ease-in-out infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}テキストを左から右にスライドさせる（ニュースティッカー風）
.signage-ticker {
animation: slide 10s linear infinite;
white-space: nowrap;
}
@keyframes slide {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}背景色をゆっくり変化させる
body {
animation: bgChange 10s ease infinite;
}
@keyframes bgChange {
0% { background: linear-gradient(135deg, #667eea, #764ba2); }
50% { background: linear-gradient(135deg, #f093fb, #f5576c); }
100% { background: linear-gradient(135deg, #667eea, #764ba2); }
}📖 CSSアニメーションの詳しい書き方は「CSSアニメーションの作り方」で学べます。
アニメーションは組み合わせて使えます。点滅するメッセージ＋背景色の変化、のように複数のアニメーションを同時に動かすと、より目を引く看板になります。ただし、動きが多すぎると見づらくなるので、2〜3種類に抑えるのがコツです。
複数ページを自動で切り替える（JavaScript）
情報が多い場合は、複数のスライドを自動で切り替える方法もあります。
HTMLに複数のスライドを用意
<div class="slides">
<div class="slide active">
<h1>2年3組 お化け屋敷</h1>
<p>10:00〜15:00</p>
</div>
<div class="slide">
<h1>整理券配布中！</h1>
<p>1階廊下にて</p>
</div>
<div class="slide">
<h1>残り枠あとわずか！</h1>
<p>お早めに！</p>
</div>
</div>CSS
.slide { display: none; }
.slide.active { display: block; }JavaScript（5秒ごとに切り替え）
const slides = document.querySelectorAll('.slide');
let current = 0;
setInterval(function() {
slides[current].classList.remove('active');
current = (current + 1) % slides.length;
slides[current].classList.add('active');
}, 5000);これで5秒ごとにスライドが自動で切り替わります。
setIntervalの数値（5000）を変えると、切り替え速度を調整できます。3000にすれば3秒ごと、10000にすれば10秒ごとになります。情報量が多いスライドは長めに表示しましょう。
スライドの枚数は自由に増やせます。新しいdivにclass="slide"を付けて追加するだけです。お知らせ、タイムスケジュール、注意事項など、伝えたい情報を分けて表示できます。
🔗 DOM操作の基礎は「JavaScriptでHTMLを操作する方法【DOM入門】」で学べます。
タブレットに表示する方法
作ったHTMLファイルをタブレットで表示する手順:
- HTMLファイル（index.html）とCSSファイル（style.css）をUSBメモリに保存する
- タブレットにUSBメモリを接続する（変換アダプタが必要な場合あり）
- ファイルマネージャーでHTMLファイルを開く → ブラウザで表示される
- ブラウザの全画面モード（F11）にする
💡 USBが使えない場合:
- ファイルをGoogleドライブにアップロードして、タブレットからアクセスする
- GitHub Pagesで公開して、URLをタブレットで開く
文化祭の前日にリハーサルをしておくと安心です。実際にタブレットで表示して、文字の大きさや色が見やすいか、アニメーションの速度が適切かを確認しましょう。教室の照明の下で見え方が変わることもあります。
注意点:
- タブレットの画面が消えないよう、スリープ設定を「なし」にしておく
- 充電ケーブルをつないだまま表示する
当日のトラブル対策
文化祭当日にトラブルが起きることもあります。事前に対策しておきましょう。
- ブラウザが閉じてしまった場合：ファイルマネージャーからHTMLファイルを再度開くだけで復旧できます。手順をメモに書いて、タブレットの横に貼っておくと安心です。
- 文字が小さくて読めない場合：font-sizeの値を大きくしましょう。看板は遠くから見ることが多いので、タイトルは72px以上がおすすめです。
- 画面の向きが変わってしまう場合：タブレットの画面回転ロックをオンにしておきましょう。横向き固定にすると、看板として安定します。
まとめ
- ✅ デジタル看板はHTML + CSS + 少しのJavaScriptで作れる
- ✅ 全画面表示は min-height: 100vh + Flexbox中央配置
- ✅ CSSアニメーションで点滅・スライド・背景変化の動きをつけられる
- ✅ 複数スライドの自動切り替えは setInterval で実装
- ✅ USBメモリに入れてタブレットのブラウザで開くだけ（ネット不要）
あわせて読みたい記事
- 文化祭のウェブサイトを作ろう！ — 文化祭サイトの基本的な作り方
- 文化祭サイトをスマホ対応にする方法 — レスポンシブ対応
- 文化祭のアンケートフォームを作ろう！ — 来場者アンケートの作り方
- CSSアニメーションの作り方 — アニメーションの詳しい解説
- JavaScriptでHTMLを操作する方法【DOM入門】 — DOM操作の基礎
- HTMLで初めてのWebページを作る方法 — HTMLの最初の一歩