年表
Software Documentation

歴史年表ツール Historical Timeline Viewer

日本史・世界史の主要事件を一覧できるインタラクティブ年表。
時代別フィルタリング・全文検索・同時比較表示を備えた、
純粋な HTML / CSS / JavaScript 製の静的ウェブアプリケーション。

HTML5 CSS3 Vanilla JS No Dependencies 単一ファイル
scroll
Overview

ソフトウェア概要

🎯
目的
日本史と世界史の重要事件を時系列で俯瞰し、時代の流れと国際的な同時代性を直感的に把握できるよう設計された教育・学習支援ツール。
⚙️
構成
外部ライブラリへの依存を一切持たない単一 HTML ファイル構成。サーバー不要・インストール不要で、ファイルをブラウザで開くだけで即座に動作する。
📚
収録データ
日本史 約 50 件（紀元前 660 年〜令和）、世界史 約 50 件（紀元前 3000 年〜2020 年）。合計 100 件以上の事件・出来事を網羅。
🖥️
対応環境
モダンブラウザ（Chrome・Firefox・Safari・Edge）に対応。レスポンシブデザインにより、PC・タブレット・スマートフォンで快適に閲覧できる。
100+
収録イベント総数
5
時代区分
6
イベントカテゴリ
政治・外交
文化・芸術
戦争・紛争
社会・経済
宗教・思想
科学・技術
Display Modes

3つの表示モード

🌍
世界史モード
世界史の事件のみを縦型タイムラインで表示。古代文明の誕生からパンデミックまで、人類史の大きな流れをたどることができる。
⚖
同時表示モード
日本史と世界史を左右2カラムで並べて比較表示。同時代に何が起きていたかを視覚的に照合できる、最も学習効果の高いモード。
Key Features

主要機能

01
時代別フィルタリング
古代・中世・近世・近代・現代の 5 区分でイベントを絞り込み表示。膨大なデータの中から学習したい時代に即座にフォーカスできる。フィルタはモード切替に関係なく独立して動作する。
古代中世近世近代現代
02
リアルタイム全文検索
入力と同時にタイトル・説明文・年号を横断検索し、結果を即座に絞り込む。検索キーワードは結果カード内でハイライト表示されるため、目的のイベントを素早く特定できる。正規表現エスケープ処理により特殊文字も安全に処理。
タイトル検索本文検索年号検索ハイライト
03
詳細モーダル表示
各イベントカードをクリックすると、背景をブラーしたモーダルダイアログが開き、詳細な解説文・年号・カテゴリ・史種（日本史 / 世界史）を確認できる。モーダル外クリックで即座に閉じる。
詳細解説カテゴリ表示backdrop-filter
04
アニメーション & マイクロインタラクション
モード切替・フィルタ変更のたびにカードが時間差（ストリーム）でフェードインする。各カードはホバー時に横スライドとハイライトで反応し、インジケータードットはホバー時に拡大する。
CSS Animationanimation-delayhover transition
05
カテゴリ色分けシステム
各イベントは「政治・外交」「文化・芸術」「戦争・紛争」「社会・経済」「宗教・思想」「科学・技術」の 6 カテゴリに分類。タイムライン上のドットとカードアクセントカラーが連動し、種類を視覚的に識別できる。
6カテゴリ色分けドットラベル表示
How to Use

使い方

1
表示モードを選択
画面上部のモードバーから「日本史」「世界史」「同時表示」のいずれかを選択します。ボタンの色が切り替わり、対応するタイムラインが表示されます。
2
時代フィルターで絞り込む（任意）
モードバー直下の時代ボタン（古代〜現代）をクリックして表示範囲を絞り込みます。「すべて」を選ぶと全時代が表示されます。
3
キーワードで検索（任意）
検索バーにキーワードを入力すると、入力に連動してリアルタイムで絞り込みが行われます。例：「明治」「戦争」「1853」など。
4
カードをクリックして詳細を確認
気になるイベントカードをクリックすると、詳細な解説文を含むモーダルが表示されます。閉じるには「✕」ボタンまたはモーダル外をクリックします。
5
同時表示で時代を比較
「同時表示」モードでは、日本史（左列）と世界史（右列）が並んで表示されます。同じ時代区分を見比べることで、日本と世界の歴史的連関を学べます。
Technical Specification

技術仕様

項目内容
ファイル形式 単一 HTML ファイル（CSS・JS インライン埋め込み）
外部依存 Google Fonts（Shippori Mincho・Noto Serif JP・Crimson Pro）のみ。ロジック・レイアウトは完全自己完結。
データ構造 JavaScript オブジェクト配列。各イベントは { year, title, desc, era, cat } の 5 フィールドで構成。
イベント登録方式 CARD_REGISTRY（グローバル辞書）にユニークキーで登録。HTML 属性への JSON 直接埋め込みを排除し、文字エスケープ問題を防止。
レンダリング innerHTML による動的 DOM 生成。表示モード・フィルタ・検索の変更で全再描画。
アニメーション CSS @keyframes（slideIn・slideInRight・fadeIn・modalIn）＋ animation-delay によるストリーム表示。
レスポンシブ CSS Grid + メディアクエリ（680px ブレークポイント）。同時表示は幅狭時に縦積みに変化。
検索実装 Array.filter + RegExp。特殊文字エスケープ済み。年号・タイトル・本文の OR 検索。