信号機プログラムを作ってみた
信号機の信号が切り替わる仕組みをプログラミングで再現してみました。
以下はhtmlとcssになります。
信号機.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="信号機.css">
<title>Document</title>
</head>
<body>
<h1>信号機</h1>
<div class="outside">
<!--青信号-->
<div class="blue_light" id="b_l"></div>
<!--黄色信号-->
<div class="yellow_light" id="y_l"></div>
<!--赤信号-->
<div class="red_light" id="r_l"></div>
</div>
<button id="start_btn">起動</button>
<button id="reset_btn">終了</button>
<script>
//信号が切り替わると色が変化する
b_l = document.getElementById("b_l");
y_l = document.getElementById("y_l");
r_l = document.getElementById("r_l");
s_button = document.getElementById("start_btn");
r_button = document.getElementById("reset_btn");
let count = 0; // いま何秒目かを数える変数
let timerId = null;
s_button.addEventListener('click', () => {
// すでにタイマーが動いている場合は二重に動かないようにする
if (timerId !== null) return;
// 1秒(1000ms)ごとに中の処理をずっと繰り返す
timerId = setInterval(() => {
if (count === 0) {
// 0秒目：青を点灯
b_l.style.backgroundColor = "blue";
y_l.style.backgroundColor = "black";
r_l.style.backgroundColor = "black";
}
else if (count === 3) {
// 3秒目：黄を点灯（元のコードの3500msに近いキリのいい秒数）
b_l.style.backgroundColor = "black";
y_l.style.backgroundColor = "yellow";
r_l.style.backgroundColor = "black";
}
else if (count === 4) {
// 4秒目：赤を点灯（元のコードの4500msに近い秒数）
b_l.style.backgroundColor = "black";
y_l.style.backgroundColor = "black";
r_l.style.backgroundColor = "red";
}
count++; // 秒数を1増やす
// 7秒経ったらカウンタを0リセットして最初の「青」に戻す
if (count >= 7) {
count = 0;
}
}, 1000);
});
r_button.addEventListener('click', () => {
clearInterval(timerId);
timerId = null;
}
)
</script>
</body>
</html>
信号機.css
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column; /* ★追加：要素を上から下に縦並びにする */
justify-content: center;
align-items: center;
gap: 40px; /* ★追加：信号機とボタンの間のスキマを40px空ける */
}
h1 {
position: absolute; /* 他の要素の配置を無視して、画面を基準に絶対配置する */
top: 40px; /* 画面の「一番上から40px」の場所に固定 */
left: 50%; /* 画面の「左から50%」の位置に配置（これだけだと左端が真ん中に来る） */
transform: translateX(-50%); /* ★最重要：h1自身の幅の半分だけ左に戻し、完全に中央に揃える */
margin: 0; /* デフォルトの余白をリセットして位置を安定させる */
}
.outside{
display:flex;
justify-content: space-around;
align-items: center;
background-color: gray;
width:700px;
height:300px;
border-radius: 100px;
}
.blue_light{
border:solid;
width: 200px;
height:200px;
border-radius:200px;
background-color:blue;
}
.yellow_light{
border:solid;
width: 200px;
height:200px;
border-radius:200px;
background-color:yellow;
}
.red_light{
border:solid;
width: 200px;
height:200px;
border-radius:200px;
background-color:red;
}
/* ボタンのスタイル（共通化） */
#start_btn, #reset_btn {
padding: 12px 36px;
font-size: 18px;
font-weight: bold;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.2s;
}
/* 起動ボタンは緑 */
#start_btn {
background-color: #08c70e;
}
#start_btn:hover {
background-color: #069e0a;
}
/* 終了ボタンは赤 */
#reset_btn {
background-color: #de3333;
}
#reset_btn:hover {
background-color: #b82525;
}
GitHubにも信号機プログラムのファイルを用意しておきました。
信号機.cssと信号機.htmlのファイルをダウンロードしてください。