ページ遷移時のフェードインの追加方法

JavaScriptとCSSのトランジションを使用する方法:
- HTMLの各ページで、共通のクラス（例: "fade-in-element"）をフェードインさせたい要素に追加します。
- CSSで ".fade-in-element" クラスに対してトランジション効果を定義します。例えば、以下のようなCSSを使用できます:
```
.fade-in-element {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.fade-in-element.fade-in {
opacity: 1;
}
```
- JavaScriptを使用して、ページがロードされた時にフェードインクラスを追加します。以下はJavaScriptの例です:
```
document.addEventListener("DOMContentLoaded", function() {
var fadeElements = document.querySelectorAll(".fade-in-element");
fadeElements.forEach(function(element) {
 element.classList.add("fade-in");
});
});
```
この方法では、ページがロードされると要素がフェードインします。
CSSのアニメーションを使用する方法:
- CSSの @keyframes ルールを使用して、フェードインアニメーションを定義します。以下は例です:
```
@keyframes fade-in-animation {
0% { opacity: 0; }
100% { opacity: 1; }
}
```
- フェードインさせたい要素にアニメーションを適用します。以下のようなCSSを使用できます:
```
.fade-in-element {
animation: fade-in-animation 0.5s ease-in-out;
}
```
この方法では、要素がページ遷移時にフェードインします。
CSSフレームワークを使用する方法:
- いくつかのCSSフレームワーク（例: Animate.css）は、フェードインなどのトランジション効果を提供しています。これらのフレームワークを使用することで、簡単にフェードイン効果を実現できます。
これらの方法を使用すると、ページ遷移時にフェードイン効果を追加することができます。選択した方法に応じて、必要なコードを適切な場所に追加してください。