Entre-Astros — インタラクティブな太陽系サイト

Web
Entre-Astros — インタラクティブな太陽系サイト

Entre-Astros — インタラクティブな太陽系サイト

HTMLとCSSのみで構築された教育向けのインタラクティブな「太陽系」ウェブサイト。トップページには惑星の軌道アニメーションがあり、各惑星ごとに個別ページで情報・好奇心を刺激する豆知識・技術データを閲覧できます。学習プロジェクトとして設計されており、軽量な静的サイトとしてGitHub Pages等での公開に適しています。（約300字）

https://github.com/Danilo-Vicentin-Silva/Entre-Astros

概要

Este projeto apresenta um Sistema Solar interativo construído apenas com HTML e CSS. 学習コース（PpI・夜間 2.2025）の課題として作られたこのリポジトリは、トップページで惑星の軌道をCSSアニメーションで表現し、各惑星をクリックすると詳細ページ（paginasディレクトリ）に遷移してその惑星の特徴・データ・雑学などを確認できる仕組みになっています。JavaScriptを使わずに視覚的な表現を工夫しており、静的サイトとしての軽快さと教育的な提示が両立されています。

GitHub

リポジトリの統計情報

  • スター数: 3
  • フォーク数: 0
  • ウォッチャー数: 3
  • コミット数: 4
  • ファイル数: 5
  • メインの言語: HTML

主な特徴

  • HTML/CSSだけで実装されたインタラクティブな太陽系の視覚表現（軌道アニメーション）。
  • 各惑星ごとの個別ページ（情報・データ・豆知識）を用意。
  • 軽量な静的サイト構成でクラス課題向けに最適化。
  • ライセンスファイルや基本的なプロジェクト構成が含まれている（学習プロジェクトとして適切）。

技術的なポイント

このプロジェクトはJavaScriptを使わず、HTMLとCSSの表現力を最大限に引き出している点が最大の技術的特徴です。軌道の動きや惑星の回転はCSSのkeyframesやtransform（回転・平行移動・スケール）で実現していると推測され、疑似要素やアニメーション遅延（animation-delay）を組み合わせることで複数のオブジェクトを同期させる工夫が見られます。ページ構成は静的な複数HTMLファイル（index.htmlとpaginas配下の各惑星ページ）で、CSSは外部スタイルシート（cssディレクトリ）に分離しており、再利用性と可読性を確保しています。

さらに、画像や惑星の表現がビットマップかCSSによる円形要素かはリポジトリ構成から明確ではありませんが、CSSのみで描画する場合は可変のサイズ指定やメディアクエリでレスポンシブ対応が行える点が利点です。アクセシビリティ面では、リンクテキストやalt属性の整備、コントラスト配慮、アニメーションの減衰オプション（prefers-reduced-motion）を導入するとより良くなります。拡張性としては、今後JavaScriptを追加してデータ駆動（JSONで惑星データを管理）に移行すれば、ページ生成の自動化やインタラクティブな情報表示（モーダル、フィルター、タイムライン）が可能になります。デプロイはGitHub Pagesで容易に行え、静的リソースのままCDNキャッシュや圧縮を施せば読み込み性能も向上します。

プロジェクトの構成

主要なファイルとディレクトリ：

  • LICENSE: file
  • README.md: file
  • css: dir
  • index.html: file
  • paginas: dir

まとめ

教育用途に最適化された、HTML/CSSで魅せる静的な太陽系ビジュアライゼーション。

リポジトリ情報：

READMEの抜粋： PROJETO SISTEMA SOLAR INTERATIVO

Este projeto foi desenvolvido para a disciplina de PpI (Noturno) - 2.2025.

Descrição do Tema: Nosso site é uma representação interativa do Sistema Solar, criada utilizando apenas HTML e CSS. A página inicial apresenta uma animação das órbitas planetárias e cada planeta pode ser explorado em uma página individual com informações detalhadas, curiosidades e dados técnicos.

Integrantes do Grupo:

  • [Nome Completo do Aluno 1]
  • [Nome Completo do Aluno 2]
  • [Nome Com…