はじめに
この記事では、CSSでゆっくり表示を実現する方法を初心者向けに徹底解説します。
使い方や応用方法、サンプルコードを交えながら、わかりやすく説明していきます。
まずは基本から始め、徐々に応用方法についても触れていくので、初心者の方でも安心して学べる内容になっています。
●CSSとは
CSS（Cascading Style Sheets）は、ウェブページのデザインやレイアウトを制御するための言語です。
HTMLで書かれた文章や画像などの要素に対して、見た目を整える役割があります。
●ゆっくり表示の基本
ゆっくり表示を実現するためには、CSSのアニメーション機能を利用します。
アニメーション機能には、transition と animation の2つの方法があります。
ここでは、両方の方法を使ってゆっくり表示を実現する方法を紹介します。
【transitionを使ったゆっくり表示】
まずは、transition を使ってゆっくり表示を実現する方法を見ていきましょう。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: width 2s, height 2s;
}
.box:hover {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>このサンプルコードでは、.box というクラス名が付けられたdiv要素に対して、transition を使ってゆっくり表示を実現しています。
transition プロパティは、対象要素のプロパティが変化する際のアニメーションを指定します。
今回は、widthとheightの変化に対して、それぞれ2秒かけてアニメーションを行うように指定しています。
この例では、.box 要素にマウスをホバーすると、幅と高さがそれぞれ200pxに変化し、その変化が2秒かけてゆっくり表示されます。
【animationを使ったゆっくり表示】
次に、animation を使ったゆっくり表示の方法を見ていきましょう。
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.box {
width: 100px;
height: 100px;
background-color: red;
animation: fadeIn 3s ease-in-out;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>このサンプルコードでは、@keyframes を使って、fadeIn というアニメーションを定義しています。
このアニメーションでは、0%（開始時）の透明度を0、100%（終了時）の透明度を1としています。
その後、.box というクラス名が付けられたdiv要素に対して、animation プロパティを使ってゆっくり表示を実現しています。
animation プロパティは、指定したアニメーションを適用するためのプロパティです。
今回は、fadeIn アニメーションを3秒かけて実行し、イージング（アニメーションの速度変化）は ease-in-out に設定しています。
この例では、ページが読み込まれると、.box 要素が3秒かけてゆっくり表示されます。
●応用例とサンプルコード
ここからは、ゆっくり表示の応用例とそれに対応するサンプルコードを紹介します。
【テキストのゆっくり表示】
テキストをゆっくり表示させる方法も、上で紹介した transition や animation を利用することができます。
animation を使ってテキストをゆっくり表示させるサンプルコードを示します。
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.hidden {
opacity: 0;
animation: fadeIn 3s ease-in-out;
}
.visible {
opacity: 1;
}
</style>
<script>
window.addEventListener('scroll', function() {
var elements = document.querySelectorAll('.hidden');
for (var i = 0; i < elements.length; i++) {
var rect = elements[i].getBoundingClientRect();
if (rect.top < window.innerHeight) {
elements[i].classList.add('visible');
}
}
});
</script>
</head>
<body>
<div class="hidden" style="height: 1000px;"></div>
<div class="hidden" style="height: 100px; background-color: green;"></div>
</body>
</html>このサンプルコードでは、.hidden クラスを持つ要素に対して、fadeIn アニメーションを適用しています。
その後、JavaScriptを使ってスクロールイベントを検知し、要素が表示範囲内に入った際に .visible クラスを追加します。
これにより、スクロールに応じて要素がゆっくり表示されます。
このように、CSSのtransitionやanimationを使うことで、さまざまなゆっくり表示の効果を実現することができます。
初心者の方でも、上記のサンプルコードを参考に、自分のウェブページにゆっくり表示の効果を取り入れてみてください。
