ビルド時にすべてのページを HTML として事前生成します。ページを開いた瞬間から表示が始まり、JavaScript の読み込みや実行を待つ必要がありません。インタラクションを必要としないページには JavaScript を配信しない方針のため、余分なスクリプトが表示速度に影響しない構成になっています。
ビルド時
デプロイ前に1回だけ実行
ブラウザ
レンダリングなしで即返却
各ページの要素は画面内にスクロールされたタイミングで順番にフェードインします。要素が画面内に入ったことをブラウザが検知し、CSS アニメーションを適用します。要素ごとに遅延を設定でき、複数の要素を時間差で表示することで視覚的なリズムを生み出します。
スクロール検知
ブラウザが位置を監視
CSS アニメーション
フェードイン
PC・タブレット・スマートフォンのどの画面幅でも崩れることなく表示します。画面の幅に応じてレイアウトのカラム数を切り替えつつ、文字サイズは画面幅に連動して滑らかに拡縮します。
レイアウト
幅に応じて切り替え
文字サイズ
連続的に変化
| フレームワーク | Astro 6 |
|---|---|
| 言語 | TypeScript |
| スタイリング | CSS カスタムプロパティ |
| アニメーション | IntersectionObserver + CSS |
| 品質 | ESLint、Prettier |