CSSでゆっくり表示する方法！初心者向け徹底解説＆サンプルコード

はじめに
●CSSとは
●ゆっくり表示の基本
- 【transitionを使ったゆっくり表示】
- 【animationを使ったゆっくり表示】
●応用例とサンプルコード
- 【テキストのゆっくり表示】

はじめに

この記事では、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を使うことで、さまざまなゆっくり表示の効果を実現することができます。

初心者の方でも、上記のサンプルコードを参考に、自分のウェブページにゆっくり表示の効果を取り入れてみてください。