はじめに
CSSを学びたいのStep25です！！今回は太陽系の惑星の公転をHTMLとCSSで表現してみました！
公転周期を表示するためにJavaScriptを一部利用しております！！
成果物
ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>太陽系の公転アニメーション</title>
<!-- CSSファイルをリンク -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="solar-system">
<!-- 経過年数の表示 -->
<div class="year-counter">経過年数: <span id="years">0</span> 年</div>
<div class="sun"></div>
<!-- 水星 -->
<div class="orbit mercury-orbit">
<div class="planet mercury">
<div class="planet-label">水星</div>
</div>
</div>
<!-- 金星 -->
<div class="orbit venus-orbit">
<div class="planet venus">
<div class="planet-label">金星</div>
</div>
</div>
<!-- 地球 -->
<div class="orbit earth-orbit">
<div class="planet earth">
<div class="planet-label">地球</div>
</div>
</div>
<!-- 火星 -->
<div class="orbit mars-orbit">
<div class="planet mars">
<div class="planet-label">火星</div>
</div>
</div>
<!-- 木星 -->
<div class="orbit jupiter-orbit">
<div class="planet jupiter">
<div class="planet-label">木星</div>
</div>
</div>
<!-- 土星 -->
<div class="orbit saturn-orbit">
<div class="planet saturn">
<div class="planet-label">土星</div>
</div>
</div>
<!-- 天王星 -->
<div class="orbit uranus-orbit">
<div class="planet uranus">
<div class="planet-label">天王星</div>
</div>
</div>
<!-- 海王星 -->
<div class="orbit neptune-orbit">
<div class="planet neptune">
<div class="planet-label">海王星</div>
</div>
</div>
<!-- 冥王星（オプション） -->
<div class="orbit pluto-orbit">
<div class="planet pluto">
<div class="planet-label">冥王星</div>
</div>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>
styles.css
/* 太陽系の全体設定 */
.solar-system {
position: relative;
width: 800px;
height: 800px;
margin: 0 auto;
background: black;
overflow: hidden;
}
/* 経過年数の表示スタイル */
.year-counter {
position: absolute;
top: 10px;
left: 10px;
color: white;
font-size: 18px;
z-index: 100;
}
/* 太陽のスタイル */
.sun {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin: -40px 0 0 -40px;
background: yellow;
border-radius: 50%;
box-shadow: 0 0 30px yellow;
}
/* 惑星の軌道のスタイル */
.orbit {
position: absolute;
top: 50%;
left: 50%;
transform-origin: center center;
}
/* 惑星のスタイル */
.planet {
position: absolute;
top: -6px; /* 惑星のサイズの半分を引いて中心に揃える */
left: 0;
width: 12px;
height: 12px;
background: white;
border-radius: 50%;
transform-origin: center center;
}
/* 惑星のラベルのスタイル */
.planet-label {
position: absolute;
top: 15px; /* 惑星からの距離を調整 */
left: 50%;
transform: translateX(-50%);
color: white;
font-size: 12px;
text-align: center;
white-space: nowrap;
}
/* 各惑星の個別設定 */
/* 水星 */
.mercury-orbit {
width: 120px;
height: 120px;
margin: -60px 0 0 -60px;
animation: rotate-mercury 2.4s linear infinite;
}
.mercury {
left: 60px;
background: gray;
}
@keyframes rotate-mercury {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 金星 */
.venus-orbit {
width: 160px;
height: 160px;
margin: -80px 0 0 -80px;
animation: rotate-venus 6.2s linear infinite;
}
.venus {
left: 80px;
background: orange;
}
@keyframes rotate-venus {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 地球 */
.earth-orbit {
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
animation: rotate-earth 10s linear infinite;
}
.earth {
left: 100px;
background: blue;
}
@keyframes rotate-earth {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 火星 */
.mars-orbit {
width: 240px;
height: 240px;
margin: -120px 0 0 -120px;
animation: rotate-mars 18.8s linear infinite;
}
.mars {
left: 120px;
background: red;
}
@keyframes rotate-mars {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 木星 */
.jupiter-orbit {
width: 280px;
height: 280px;
margin: -140px 0 0 -140px;
animation: rotate-jupiter 50s linear infinite;
}
.jupiter {
left: 140px;
background: brown;
width: 20px;
height: 20px;
top: -10px;
}
@keyframes rotate-jupiter {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 土星 */
.saturn-orbit {
width: 320px;
height: 320px;
margin: -160px 0 0 -160px;
animation: rotate-saturn 80s linear infinite;
}
.saturn {
left: 160px;
background: goldenrod;
width: 18px;
height: 18px;
top: -9px;
}
@keyframes rotate-saturn {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 天王星 */
.uranus-orbit {
width: 360px;
height: 360px;
margin: -180px 0 0 -180px;
animation: rotate-uranus 110s linear infinite;
}
.uranus {
left: 180px;
background: lightblue;
width: 16px;
height: 16px;
top: -8px;
}
@keyframes rotate-uranus {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 海王星 */
.neptune-orbit {
width: 400px;
height: 400px;
margin: -200px 0 0 -200px;
animation: rotate-neptune 140s linear infinite;
}
.neptune {
left: 200px;
background: darkblue;
width: 16px;
height: 16px;
top: -8px;
}
@keyframes rotate-neptune {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 冥王星（オプション） */
.pluto-orbit {
width: 440px;
height: 440px;
margin: -220px 0 0 -220px;
animation: rotate-pluto 170s linear infinite;
}
.pluto {
left: 220px;
background: lightgray;
width: 8px;
height: 8px;
top: -4px;
}
@keyframes rotate-pluto {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
script.js
// 開始時刻を取得
let startTime = Date.now();
function updateYears() {
let currentTime = Date.now();
let elapsedSeconds = (currentTime - startTime) / 1000;
let elapsedYears = (elapsedSeconds / 10).toFixed(2); // 地球の公転周期を10秒と設定
document.getElementById('years').textContent = elapsedYears;
requestAnimationFrame(updateYears);
}
updateYears();