HTMLでのスクロールスパイの実装 – HTMLで始めるホームページ作成

スクロールスパイの概要

スクロールスパイは、ページ内のセクションをスクロールするたびにナビゲーションバーを更新する技術です。これにより、ユーザーがどのセクションにいるか視覚的に理解しやすくなります。

準備

• HTMLの構造を準備する
• CSSでスタイルを整える
• JavaScriptで機能を追加する

HTMLの構造

まず、基本的なHTMLの構造を作成します。以下に例を示します。

<div id="navbar">
    <a href="#section1" rel="nofollow" target="_blank" title="セクション1" aria-label="セクション1">セクション1</a>
    <a href="#section2" rel="nofollow" target="_blank" title="セクション2" aria-label="セクション2">セクション2</a>
    <a href="#section3" rel="nofollow" target="_blank" title="セクション3" aria-label="セクション3">セクション3</a>
  </div>

  <section id="section1" role="group">
    <h2 class="wp-block-heading">セクション1</h2>
    <p>ここはセクション1の内容です。</p>
  </section>

  <section id="section2" role="group">
    <h2 class="wp-block-heading">セクション2</h2>
    <p>ここはセクション2の内容です。</p>
  </section>

  <section id="section3" role="group">
    <h2 class="wp-block-heading">セクション3</h2>
    <p>ここはセクション3の内容です。</p>
  </section>

CSSでのスタイリング

次に、CSSを使用してナビゲーションバーとセクションをスタイルします。

body {
  font-family: Arial, sans-serif;
}

#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  color: white;
  text-align: center;
}

#navbar a {
  padding: 14px 20px;
  display: inline-block;
  color: white;
  text-decoration: none;
}

#navbar a.active {
  background-color: #666;
}

section {
  padding: 60px 20px;
  margin-top: 60px;
}

JavaScriptでの機能追加

最後に、JavaScriptでスクロールスパイの機能を追加します。

document.addEventListener('scroll', function() {
  var sections = document.querySelectorAll('section');
  var navLinks = document.querySelectorAll('#navbar a');
  var currentIndex = -1;

  sections.forEach(function(section, index) {
    if (window.scrollY >= section.offsetTop - 10) {
      currentIndex = index;
    }
  });

  navLinks.forEach(function(link, index) {
    if (index === currentIndex) {
      link.classList.add('active');
    } else {
      link.classList.remove('active');
    }
  });
});

結論

これで、スクロールスパイの基本的な実装が完了しました。さらに、応用したカスタマイズも可能です。例えば、アニメーションを追加したり、複雑なレイアウトに対応することができます。ぜひ、プロジェクトに取り入れてみてください。

注意: スクロールスパイの実装にはHTML、CSS、JavaScript、全てのスキルが必要です。

webDev参考書