【実例10選】Javascriptで動きのあるサイトを作成しよう

はじめに
●Javascriptで動きのあるサイトを作る基本
- ○HTMLとCSS
●Javascriptで動きをつける10の方法
まとめ

はじめに

この記事を読めば、Javascriptで動きのあるサイトを作成する方法が身につきます。

初心者でもわかりやすいように、サンプルコードや注意点、カスタマイズ方法も詳しく解説しているので、ぜひ参考にしてください。

●Javascriptで動きのあるサイトを作る基本

動きのあるサイトを作成するには、HTML、CSS、Javascriptの3つの要素が必要です。

○HTMLとCSS

HTMLはウェブページの構造を定義し、CSSはデザインやレイアウトを指定します。

これらの基本を理解しておくことで、Javascriptを使ってサイトに動きをつける準備が整います。

詳しくはホーム画面から選んで学べます。

●Javascriptで動きをつける10の方法

ここからは、Javascriptでサイトに動きをつける10の方法をサンプルコードと共に紹介します。

○サンプルコード1：画像スライダー

画像スライダーは、画像を自動的に切り替えることでスライドショーを作成する機能です。

下記のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>画像スライダー</title>
  <style>
    .slider {
      position: relative;
      width: 100%;
      height: 300px;
      overflow: hidden;
    }
    .slider img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 1s;
    }
    .slider img.active {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="slider">
    <img src="image1.jpg" alt="画像1" class="active">
    <img src="image2.jpg" alt="画像2">
    <img src="image3.jpg" alt="画像3">
  </div>
  <script>
    const images = document.querySelectorAll('.slider img');
    let currentIndex = 0;
    setInterval(() => {
      images[currentIndex].classList.remove('active');
      currentIndex = (currentIndex + 1) % images.length;
      images[currentIndex].classList.add('active');
    }, 3000);
  </script>
</body>
</html>

○サンプルコード2：ドロップダウンメニュー

ドロップダウンメニューは、親要素にカーソルを合わせると子要素が表示される機能です。

下記のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ドロップダウンメニュー</title>
  <style>
    .dropdown {
      position: relative;
      display: inline-block;
    }
    .dropdown-menu {
      display: none;
      position: absolute;
      background-color: white;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    .dropdown-menu a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    .dropdown-menu a:hover {
      background-color: #ddd;
    }
    .dropdown:hover .dropdown-menu {
      display: block;
    }
  </style>
</head>
<body>
  <div class="dropdown">
    <button>メニュー</button>
    <div class="dropdown-menu">
      <a href="#">メニュー1</a>
      <a href="#">メニュー2</a>
      <a href="#">メニュー3</a>
    </div>
  </div>
</body>
</html>

○サンプルコード3：モーダルウィンドウ

モーダルウィンドウは、画面上にポップアップウィンドウを表示する機能です。

下記のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>モーダルウィンドウ</title>
  <style>
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.4);
    }
    .modal-content {
      background-color: white;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
    }
    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }
    .close:hover,
    .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button id="modalBtn">モーダルを開く</button>
  <div id="myModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <p>モーダルウィンドウの内容</p>
    </div>
  </div>
  <script>
    const modal = document.getElementById('myModal');
    const btn = document.getElementById('modalBtn');
    const span = document.getElementsByClassName('close')[0];

    btn.onclick = function() {
      modal.style.display = 'block';
    }
    span.onclick = function() {
      modal.style.display = 'none';
    }
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = 'none';
      }
    }
  </script>
</body>
</html>

○サンプルコード4：アコーディオン

アコーディオンは、クリックするとコンテンツが展開・収納される機能です。

下記のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>アコーディオン</title>
  <style>
    .accordion {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
    }
    .active, .accordion:hover {
      background-color: #ccc;
    }
    .panel {
      padding: 0 18px;
      background-color: white;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
    }
  </style>
</head>
<body>
  <button class="accordion">セクション1</button>
  <div class="panel">
    <p>セクション1の内容</p>
  </div>
  <button class="accordion">セクション2</button>
  <div class="panel">
    <p>セクション2の内容</p>
  </div>
  <button class="accordion">セクション3</button>
  <div class="panel">
    <p>セクション3の内容</p>
  </div>
  <script>
    const accordions = document.getElementsByClassName('accordion');
    for (let i = 0; i < accordions.length; i++) {
      accordions[i].addEventListener('click', function() {
        this.classList.toggle('active');
        const panel = this.nextElementSibling;
        if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + 'px';
        }
      });
    }
  </script>
</body>
</html>

○サンプルコード5：スクロールアニメーション

スクロールアニメーションは、ページをスクロールすることで要素がアニメーション付きで表示される機能です。

下記のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スクロールアニメーション</title>
  <style>
    .animated {
      opacity: 0;
      transition: opacity 0.5s;
    }
    .visible {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="animated">スクロールアニメーションのテキスト</div>
  <script>
    const animatedElement = document.querySelector('.animated');
    window.addEventListener('scroll', function() {
      const rect = animatedElement.getBoundingClientRect();
      if (rect.top <= window.innerHeight) {
        animatedElement.classList.add('visible');
      } else {
        animatedElement.classList.remove('visible');
      }
    });
  </script>
</body>
</html>

○サンプルコード6：カルーセル

カルーセルは、複数の要素が自動的に切り替わるスライドショー機能です。

下記のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>カルーセル</title>
  <style>
    .carousel {
      display: flex;
      overflow: hidden;
      width: 300px;
      height: 200px;
    }
    .carousel-item {
      display: none;
      width: 100%;
      height: 100%;
    }
    .carousel-item.active {
      display: block;
    }
  </style>
</head>
<body>
  <div class="carousel">
    <div class="carousel-item active">スライド1</div>
    <div class="carousel-item">スライド2</div>
    <div class="carousel-item">スライド3</div>
  </div>
  <script>
    let currentIndex = 0;
    const carouselItems = document.querySelectorAll('.carousel-item');

    function switchCarousel() {
      carouselItems[currentIndex].classList.remove('active');
      currentIndex = (currentIndex + 1) % carouselItems.length;
      carouselItems[currentIndex].classList.add('active');
    }

    setInterval(switchCarousel, 3000);
  </script>
</body>
</html>

○サンプルコード7：テキストアニメーション

テキストアニメーションは、文字にアニメーション効果を与える機能です。

下記のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テキストアニメーション</title>
  <style>
    .text-animation {
      font-size: 24px;
      position: relative;
      overflow: hidden;
    }
    .text-animation span {
      display: inline-block;
      position: relative;
      animation: slide 1s linear infinite;
    }
    @keyframes slide {
      0% {
        transform: translateY(100%);
      }
      50% {
        transform: translateY(-100%);
      }
      100% {
        transform: translateY(100%);
      }
    }
  </style>
</head>
<body>
  <div class="text-animation">
    <span>テキストアニメーション</span>
  </div>
</body>
</html>

○サンプルコード8：パララックス効果

パララックス効果は、背景画像と前景要素が異なる速度でスクロールされることで立体感を演出する効果です。

下記のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>パララックス効果</title>
  <style>
    .parallax {
      position: relative;
      background-image: url('your-image.jpg');
      height: 500px;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(0, 0, 0, 0.5);
    }
  </style>
</head>
<body>
  <div class="parallax">
    <div class="content">
      <h1>パララックス効果のテキスト</h1>
    </div>
  </div>
</body>
</html>

○サンプルコード9：タブ切り替え

タブ切り替えは、複数のコンテンツをタブで切り替えて表示する機能です。

下記のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タブ切り替え</title>
  <style>
    .tabs {
      display: flex;
    }
    .tab {
      cursor: pointer;
      padding: 8px 16px;
      background-color: #eee;
    }
    .tab:hover, .tab.active {
      background-color: #ccc;
    }
    .tab-content {
      display: none;
    }
    .tab-content.active {
      display: block;
    }
  </style>
</head>
<body>
  <div class="tabs">
    <div class="tab active" data-tab="1">タブ1</div>
    <div class="tab" data-tab="2">タブ2</div>
    <div class="tab" data-tab="3">タブ3</div>
  </div>
  <div class="tab-content active" data-content="1">コンテンツ1</div>
  <div class="tab-content" data-content="2">コンテンツ2</div>
  <div class="tab-content" data-content="3">コンテンツ3</div>
  <script>
    const tabs = document.querySelectorAll('.tab');
    const tabContents = document.querySelectorAll('.tab-content');

    tabs.forEach(tab => {
      tab.addEventListener('click', function() {
        const targetContentId = this.dataset.tab;

        tabs.forEach(t => t.classList.remove('active'));
        tabContents.forEach(c => c.classList.remove('active'));

        this.classList.add('active');
        document.querySelector(`.tab-content[data-content="${targetContentId}"]`).classList.add('active');
      });
    });
  </script>
</body>
</html>

○サンプルコード10：フィルタリング

フィルタリングは、特定の条件に合致する要素だけを表示する機能です。

下記のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フィルタリング</title>
  <style>
    .filter-btn {
      cursor: pointer;
      padding: 8px 16px;
      background-color: #eee;
    }
    .filter-btn:hover {
      background-color: #ccc;
    }
    .item {
      display: none;
    }
  </style>
</head>
<body>
  <button class="filter-btn" data-filter="all">全て</button>
  <button class="filter-btn" data-filter="category1">カテゴリ1</button>
  <button class="filter-btn" data-filter="category2">カテゴリ2</button>
  <div class="item" data-category="category1">アイテム1</div>
  <div class="item" data-category="category1">アイテム2</div>
  <div class="item" data-category="category2">アイテム3</div>
  <div class="item" data-category="category2">アイテム4</div>
  <script>
    const filterBtns = document.querySelectorAll('.filter-btn');
    const items = document.querySelectorAll('.item');

    filterBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        const filterCategory = this.dataset.filter;

        items.forEach(item => {
          if (filterCategory === 'all') {
            item.style.display = 'block';
          } else if (item.dataset.category === filterCategory) {
            item.style.display = 'block';
          } else {
            item.style.display = 'none';
          }
        });
      });
    });
  </script>
</body>
</html>