ヘッダー – ケケンタの独学ITブログ

【コピペOK】スクロール対応ヘッダーメニューアニメーション｜5種類【Web制作】

ケケンタ — Sun, 27 Jul 2025 22:39:36 +0000

ケケンタ

ヘッダーメニューの表示アニメーションを実装したい……

ケケンタ

サイト全体のナビゲーション効果を作りたい……

今回はこのようなお悩みをお持ちの方へ向けて

Web制作において人気の高いアニメーション効果
スクロール対応ヘッダーメニューアニメーション

をご紹介します。

5種類のスクロール対応ヘッダーメニュー効果を完全網羅した実装なので、いままさに「魅力的なヘッダーメニューを作りたい！」という方は丸っとコピペしてどうぞご活用ください！

この記事で紹介するスクロール対応ヘッダーメニューアニメーション

フェードイン（スクロール時の透明度変化）
スライドダウン（スクロール時のスライド効果）
スケール（スクロール時の拡大/縮小効果）
スティッキー（スクロール時の固定表示）
パララックス（スクロール時の視差効果）

ケケンタ

特にサイト全体のナビゲーションには、スクロール対応ヘッダーメニューアニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

なお、今回ご紹介するアニメーションはCSSとJavaScriptを組み合わせて実装するので、スクロール位置に応じた動的なインタラクションを実現できます。

あわせて読みたい

【コピペOK】モダンボタンホバーアニメーション｜8種類【Web制作】

【コピペOK】3Dボタンホバーアニメーション｜6種類【Web制作】

【コピペOK】文字が１つずつ表示！タイプライターの実装【HTML/CSS】

スクロール対応ヘッダーメニューアニメーションとは

スクロール対応ヘッダーメニューアニメーションは、サイトのヘッダー部分にスクロール位置に応じて動的に変化するメニューの視覚的な効果です。ユーザーの注目を集め、スムーズなインタラクションを提供するための手法です。

効果的な使用場面

適している場面

サイト全体のナビゲーション
企業サイト
ポータルサイト
ブログサイト
ランディングページ

避けるべき場面

モバイルサイト
シンプルなサイト
アクセシビリティを重視する場面
過度に使用した場合

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
フェードイン	⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
スライドダウン	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
スケール	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
スティッキー	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
パララックス	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐

フェードイン

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフェードインの特徴

スクロール時に初期ヘッダーが上にスライドして非表示
アニメーションヘッダーがフェードインで表示
スムーズな効果
視覚的インパクト中
エレガントな印象

② HTML


  
    
      サイトロゴ
    
    
      
        ホーム
        サービス
        会社概要
        お問い合わせ
      
    
  



  
    メインコンテンツ
    ここにメインコンテンツが入ります。
  

  
    コンテンツセクション1
    スクロールするとヘッダーがフェードインアニメーションで表示されます。
  

  
    コンテンツセクション2
    スクロール位置が100pxを超えるとヘッダーが表示されます。
  

  
    コンテンツセクション3
    スクロールを続けるとヘッダーのアニメーション効果を確認できます。
  

  
    コンテンツセクション4
    上にスクロールするとヘッダーが再び非表示になります。

③ CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 1000;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.3s ease;
}

.header.animated {
  opacity: 1;
  transform: translateY(0);
  background: rgba(102, 126, 234, 0.95);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.header.scroll-up {
  opacity: 0;
  transform: translateY(-100%);
}

.header.fade-out {
  opacity: 0;
  transform: translateY(-100%);
}

.header.fade-in {
  opacity: 1;
  transform: translateY(0);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
}

.logo a {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

.logo a:hover {
  color: #667eea;
}

.nav-menu {
  display: flex;
  align-items: center;
}

.nav-list {
  list-style: none;
  display: flex;
  gap: 30px;
}

.nav-link {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  padding: 10px 0;
  position: relative;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #667eea;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #667eea;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.main-content {
  margin-top: 70px;
}

.hero {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  padding: 0 20px;
}

.hero h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

.hero p {
  font-size: 18px;
  opacity: 0.9;
}

.content-section {
  padding: 100px 20px;
  text-align: center;
  background: #f8f9fa;
  min-height: 60vh;
}

.content-section:nth-child(even) {
  background: #ffffff;
}

.content-section h2 {
  font-size: 36px;
  margin-bottom: 20px;
  color: #333;
}

.content-section p {
  font-size: 18px;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const header = document.querySelector('.header');
  let isScrolled = false;
  
  window.addEventListener('scroll', function() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    
    if (scrollTop > 100 && !isScrolled) {
      // 初期ヘッダーを上にスライドして非表示
      header.classList.add('scroll-up');
      
      // 少し遅延させてアニメーションヘッダーをフェードイン
      setTimeout(() => {
        header.classList.remove('scroll-up');
        header.classList.add('animated');
      }, 300);
      
      isScrolled = true;
    } else if (scrollTop <= 100 && isScrolled) {
      // アニメーションヘッダーを上にフェードアウト
      header.classList.add('fade-out');
      header.classList.remove('animated');
      
      // 少し遅延させて初期ヘッダーをフェードイン
      setTimeout(() => {
        header.classList.remove('fade-out');
        header.classList.add('fade-in');
        
        // フェードイン完了後にクラスをクリア
        setTimeout(() => {
          header.classList.remove('fade-in');
        }, 300);
      }, 300);
      
      isScrolled = false;
    }
  });
});

⑤ カスタマイズ例

/* フェード速度の変更 */
.header {
  transition: all 0.5s ease;
}

/* アニメーションヘッダーの色変更 */
.header.animated {
  background: rgba(255, 193, 7, 0.95);
}

/* アニメーションヘッダーの方向変更 */
.header.animated {
  transform: translateY(0) scale(1.02);
}

/* スクロール閾値の変更 */
document.addEventListener('DOMContentLoaded', function() {
  const header = document.querySelector('.header');
  let isScrolled = false;

  window.addEventListener('scroll', function() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    if (scrollTop > 200 && !isScrolled) { // 閾値を200pxに変更
      header.classList.add('scroll-up');

      setTimeout(() => {
        header.classList.remove('scroll-up');
        header.classList.add('animated');
      }, 300);

      isScrolled = true;
    } else if (scrollTop <= 200 && isScrolled) {
      header.classList.add('fade-out');
      header.classList.remove('animated');

      setTimeout(() => {
        header.classList.remove('fade-out');
        header.classList.add('fade-in');

        setTimeout(() => {
          header.classList.remove('fade-in');
        }, 300);
      }, 300);

      isScrolled = false;
    }
  });
});

スライドダウン

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスライドダウンの特徴

スクロール時に初期ヘッダーが上にスライドして非表示
アニメーションヘッダーが上から下にスライドダウンで表示
自然な動き
視覚的インパクト中
直感的な印象

② HTML


  
    
      サイトロゴ
    
    
      
        ホーム
        サービス
        会社概要
        お問い合わせ
      
    
  



  
    メインコンテンツ
    ここにメインコンテンツが入ります。
  

  
    コンテンツセクション1
    スクロールするとヘッダーがスライドダウンアニメーションで表示されます。
  

  
    コンテンツセクション2
    スクロール位置が100pxを超えるとヘッダーが表示されます。
  

  
    コンテンツセクション3
    スクロールを続けるとヘッダーのアニメーション効果を確認できます。
  

  
    コンテンツセクション4
    上にスクロールするとヘッダーが再び非表示になります。

③ CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transform: translateY(0);
  transition: all 0.3s ease;
}

.header.scroll-up {
  transform: translateY(-100%);
}

.header.animated {
  transform: translateY(0);
  background: rgba(102, 126, 234, 0.95);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.header.slide-up {
  transform: translateY(-100%);
}

.header.slide-down {
  transform: translateY(0);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
}

.logo a {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

.logo a:hover {
  color: #667eea;
}

.nav-menu {
  display: flex;
  align-items: center;
}

.nav-list {
  list-style: none;
  display: flex;
  gap: 30px;
}

.nav-link {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  padding: 10px 0;
  position: relative;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #667eea;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #667eea;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.main-content {
  margin-top: 70px;
}

.hero {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  padding: 0 20px;
}

.hero h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

.hero p {
  font-size: 18px;
  opacity: 0.9;
}

.content-section {
  padding: 100px 20px;
  text-align: center;
  background: #f8f9fa;
  min-height: 60vh;
}

.content-section:nth-child(even) {
  background: #ffffff;
}

.content-section h2 {
  font-size: 36px;
  margin-bottom: 20px;
  color: #333;
}

.content-section p {
  font-size: 18px;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const header = document.querySelector('.header');
  let isScrolled = false;

  window.addEventListener('scroll', function() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    if (scrollTop > 100 && !isScrolled) {
      // 初期ヘッダーを上にスライドして非表示
      header.classList.add('scroll-up');

      // 少し遅延させてアニメーションヘッダーをスライドダウン
      setTimeout(() => {
        header.classList.remove('scroll-up');
        header.classList.add('animated');
      }, 300);

      isScrolled = true;
    } else if (scrollTop <= 100 && isScrolled) {
      // アニメーションヘッダーを上にスライドアップ
      header.classList.add('slide-up');
      header.classList.remove('animated');

      // 少し遅延させて初期ヘッダーをスライドダウン
      setTimeout(() => {
        header.classList.remove('slide-up');
        header.classList.add('slide-down');

        // スライドダウン完了後にクラスをクリア
        setTimeout(() => {
          header.classList.remove('slide-down');
        }, 300);
      }, 300);

      isScrolled = false;
    }
  });
});

⑤ カスタマイズ例

/* スライド速度の変更 */
.header {
  transition: all 0.5s ease;
}

/* スライド距離の変更 */
.header.scroll-up {
  opacity: 0;
  transform: translateY(-50px);
}

/* アニメーションヘッダーの色変更 */
.header.animated {
  background: rgba(255, 193, 7, 0.95);
}

/* スクロール閾値の変更 */
document.addEventListener('DOMContentLoaded', function() {
  const header = document.querySelector('.header');
  let isScrolled = false;

  window.addEventListener('scroll', function() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    if (scrollTop > 200 && !isScrolled) { // 閾値を200pxに変更
      header.classList.add('scroll-up');

      setTimeout(() => {
        header.classList.remove('scroll-up');
        header.classList.add('animated');
      }, 300);

      isScrolled = true;
    } else if (scrollTop <= 200 && isScrolled) {
      header.classList.add('slide-up');
      header.classList.remove('animated');

      setTimeout(() => {
        header.classList.remove('slide-up');
        header.classList.add('slide-down');

        setTimeout(() => {
          header.classList.remove('slide-down');
        }, 300);
      }, 300);

      isScrolled = false;
    }
  });
});

スケール

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスケールの特徴

アニメーションヘッダーがスケールアップで表示
一番上に戻るとアニメーションヘッダーがスケールダウン
動的な効果
視覚的インパクト大
モダンな印象

② HTML


  
    
      サイトロゴ
    
    
      
        ホーム
        サービス
        会社概要
        お問い合わせ
      
    
  



  
    メインコンテンツ
    ここにメインコンテンツが入ります。
  

  
    コンテンツセクション1
    スクロールするとヘッダーがスケールアニメーションで表示されます。
  

  
    コンテンツセクション2
    スクロール位置が100pxを超えるとヘッダーが表示されます。
  

  
    コンテンツセクション3
    スクロールを続けるとヘッダーのアニメーション効果を確認できます。
  

  
    コンテンツセクション4
    上にスクロールするとヘッダーが再び非表示になります。

③ CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 1000;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.3s ease;
}

.header.scroll-up {
  opacity: 0;
  transform: translateY(-100%);
}

.header.scale-in {
  opacity: 0;
  transform: translateY(0) scale(0.8);
}

.header.animated {
  opacity: 1;
  transform: translateY(0) scale(1);
  background: rgba(102, 126, 234, 0.95);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.header.scale-down {
  opacity: 0;
  transform: translateY(0) scale(0.8);
}

.header.scale-up {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
}

.logo a {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

.logo a:hover {
  color: #667eea;
}

.nav-menu {
  display: flex;
  align-items: center;
}

.nav-list {
  list-style: none;
  display: flex;
  gap: 30px;
}

.nav-link {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  padding: 10px 0;
  position: relative;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #667eea;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #667eea;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.main-content {
  margin-top: 70px;
}

.hero {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  padding: 0 20px;
}

.hero h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

.hero p {
  font-size: 18px;
  opacity: 0.9;
}

.content-section {
  padding: 100px 20px;
  text-align: center;
  background: #f8f9fa;
  min-height: 60vh;
}

.content-section:nth-child(even) {
  background: #ffffff;
}

.content-section h2 {
  font-size: 36px;
  margin-bottom: 20px;
  color: #333;
}

.content-section p {
  font-size: 18px;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const header = document.querySelector('.header');
  let isScrolled = false;
  
  window.addEventListener('scroll', function() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    
    if (scrollTop > 100 && !isScrolled) {
      // 初期ヘッダーを上にスライドして非表示
      header.classList.add('scroll-up');
      
      // 少し遅延させてアニメーションヘッダーをスケールイン
      setTimeout(() => {
        header.classList.remove('scroll-up');
        header.classList.add('scale-in');
        
        // さらに遅延させてスケールアップ
        setTimeout(() => {
          header.classList.remove('scale-in');
          header.classList.add('animated');
        }, 100);
      }, 300);
      
      isScrolled = true;
    } else if (scrollTop <= 100 && isScrolled) {
      // アニメーションヘッダーをスケールダウン
      header.classList.add('scale-down');
      header.classList.remove('animated');
      
      // 少し遅延させて初期ヘッダーをスケールアップ
      setTimeout(() => {
        header.classList.remove('scale-down');
        header.classList.add('scale-up');
        
        // スケールアップ完了後にクラスをクリア
        setTimeout(() => {
          header.classList.remove('scale-up');
        }, 300);
      }, 300);
      
      isScrolled = false;
    }
  });
});

⑤ カスタマイズ例

/* スケール速度の変更 */
.header {
  transition: all 0.5s ease;
}

/* スケール比率の変更 */
.header.animated {
  transform: translateY(0) scale(1.1);
}

/* アニメーションヘッダーの色変更 */
.header.animated {
  background: rgba(255, 193, 7, 0.95);
}

/* スクロール閾値の変更 */
document.addEventListener('DOMContentLoaded', function() {
  const header = document.querySelector('.header');
  let isScrolled = false;
  
  window.addEventListener('scroll', function() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    
    if (scrollTop > 200 && !isScrolled) { // 閾値を200pxに変更
      header.classList.add('scroll-up');
      
      setTimeout(() => {
        header.classList.remove('scroll-up');
        header.classList.add('scale-in');
        
        setTimeout(() => {
          header.classList.remove('scale-in');
          header.classList.add('animated');
        }, 100);
      }, 300);
      
      isScrolled = true;
    } else if (scrollTop <= 200 && isScrolled) {
      header.classList.add('scale-down');
      header.classList.remove('animated');
      
      setTimeout(() => {
        header.classList.remove('scale-down');
        header.classList.add('scale-up');
        
        setTimeout(() => {
          header.classList.remove('scale-up');
        }, 300);
      }, 300);
      
      isScrolled = false;
    }
  });
});

スティッキー

① デモ

See the Pen ヘッダーアニメーションスティッキー by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスティッキーの特徴

固定表示
シンプルな効果
視覚的インパクト小
実用的な印象

② HTML


  
    
      サイトロゴ
    
    
      
        ホーム
        サービス
        会社概要
        お問い合わせ
      
    
  



  
    メインコンテンツ
    ここにメインコンテンツが入ります。
  
  
    コンテンツセクション
    スクロールするとヘッダーが固定されます。

③ CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: all 0.3s ease;
}

.header.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
}

.logo a {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

.logo a:hover {
  color: #667eea;
}

.nav-menu {
  display: flex;
  align-items: center;
}

.nav-list {
  list-style: none;
  display: flex;
  gap: 30px;
}

.nav-link {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  padding: 10px 0;
  position: relative;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #667eea;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #667eea;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.main-content {
  margin-top: 70px;
}

.hero {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  padding: 0 20px;
}

.hero h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

.hero p {
  font-size: 18px;
  opacity: 0.9;
}

.content {
  padding: 100px 20px;
  text-align: center;
  background: #f8f9fa;
}

.content h2 {
  font-size: 36px;
  margin-bottom: 20px;
  color: #333;
}

.content p {
  font-size: 18px;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

④ カスタマイズ例

/* スティッキー効果の変更 */
.header.scrolled {
  background: rgba(102, 126, 234, 0.95);
}

.header.scrolled .nav-link {
  color: white;
}

/* スティッキー速度の変更 */
.header {
  transition: all 0.5s ease;
}

/* スティッキー高さの変更 */
.header-container {
  height: 60px;
}

パララックス

① デモ

See the Pen ヘッダーアニメーションパララックス by ケケンタ (@lgshifbg-the-looper) on CodePen.

このパララックスの特徴

スクロール時にヘッダーが視差効果で上に移動
ヒーローコンテンツが視差効果で下に移動
スクロール量に応じて動的に変化
奥行き感のある3D的な空間演出
動的な効果
視覚的インパクト大
高級感のある印象

② HTML


  
    
      サイトロゴ
    
    
      
        ホーム
        サービス
        会社概要
        お問い合わせ
      
    
  



  
    
      メインコンテンツ
      ここにメインコンテンツが入ります。
    
  

  
    コンテンツセクション1
    スクロールするとヘッダーとコンテンツが視差効果で動きます。
  

  
    コンテンツセクション2
    ヘッダーは上に、コンテンツは下に移動する視差効果です。
  

  
    コンテンツセクション3
    スクロール量に応じて動的に変化する3D的な空間演出です。
  

  
    コンテンツセクション4
    奥行き感のある魅力的なアニメーション効果を体験できます。

③ CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: all 0.3s ease;
  transform: translateY(0);
}

.header.parallax {
  transform: translateY(-50px);
  background: rgba(102, 126, 234, 0.95);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
}

.logo a {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

.logo a:hover {
  color: #667eea;
}

.nav-menu {
  display: flex;
  align-items: center;
}

.nav-list {
  list-style: none;
  display: flex;
  gap: 30px;
}

.nav-link {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  padding: 10px 0;
  position: relative;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #667eea;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #667eea;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.main-content {
  margin-top: 0;
}

.hero {
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 2;
}

.hero h1 {
  font-size: 48px;
  margin-bottom: 20px;
  transform: translateY(0);
  transition: transform 0.3s ease;
}

.hero p {
  font-size: 18px;
  opacity: 0.9;
  transform: translateY(0);
  transition: transform 0.3s ease;
}

.hero.parallax h1 {
  transform: translateY(-60px);
}

.hero.parallax p {
  transform: translateY(-40px);
}

.content-section {
  padding: 100px 20px;
  text-align: center;
  background: #f8f9fa;
  min-height: 60vh;
}

.content-section:nth-child(even) {
  background: #ffffff;
}

.content-section h2 {
  font-size: 36px;
  margin-bottom: 20px;
  color: #333;
}

.content-section p {
  font-size: 18px;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}


### ④ JavaScript

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const header = document.querySelector('.header');
  const hero = document.querySelector('.hero');
  const heroContent = document.querySelector('.hero-content');

  window.addEventListener('scroll', function() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    // ヘッダーの視差効果（上に移動）
    const headerParallax = scrollTop * 0.3;
    header.style.transform = `translateY(-${headerParallax}px)`;

    // ヒーローコンテンツの視差効果（下に移動）
    const heroParallax = scrollTop * 0.5;
    heroContent.style.transform = `translate(-50%, calc(-50% + ${heroParallax}px))`;

    // スクロール量に応じてヘッダーの背景色を変化
    if (scrollTop > 100) {
      header.style.background = `rgba(102, 126, 234, ${0.95 - scrollTop * 0.001})`;
      header.style.boxShadow = `0 2px 20px rgba(0, 0, 0, ${0.1 + scrollTop * 0.0005})`;
    } else {
      header.style.background = 'rgba(255, 255, 255, 0.95)';
      header.style.boxShadow = 'none';
    }
  });
});

⑤ カスタマイズ例

/* パララックス速度の変更 */
.header {
  transition: all 0.1s ease; /* より滑らかな動き */
}

/* パララックス方向の変更 */
.hero-content {
  transform: translate(-50%, -50%) rotate(${scrollTop * 0.1}deg);
}

/* パララックス効果の変更 */
.header {
  transform: translateY(-${scrollTop * 0.5}px) scale(${1 - scrollTop * 0.0001});
}

/* より動的なパララックス効果 */
document.addEventListener('DOMContentLoaded', function() {
  const header = document.querySelector('.header');
  const heroContent = document.querySelector('.hero-content');

  window.addEventListener('scroll', function() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    // より大きな視差効果
    const headerParallax = scrollTop * 0.5;
    const heroParallax = scrollTop * 0.8;

    header.style.transform = `translateY(-${headerParallax}px)`;
    heroContent.style.transform = `translate(-50%, calc(-50% + ${heroParallax}px))`;
  });
});

まとめ

今回ご紹介したスクロール対応ヘッダーメニューアニメーションは、Webサイトのユーザーエクスペリエンスを向上させる重要な要素です。

実装のコツ

適切なアニメーション時間（300ms〜500ms）
スムーズなイージング関数の使用
スクロール閾値の適切な設定（100px〜200px）
デスクトップデバイスでの動作確認
アクセシビリティの配慮
パフォーマンスの最適化

避けるべきポイント

過度に複雑なアニメーション
長すぎるアニメーション時間
読みにくい色の組み合わせ
パフォーマンスを考慮しない実装
過度な使用

おすすめの組み合わせ

企業サイト: フェードイン、スティッキー
ポータルサイト: スライドダウン、パララックス
ブログサイト: スケール、スティッキー

ケケンタ

特にサイト全体のナビゲーションでは、スクロールに応じたヘッダーメニューアニメーションがユーザーエクスペリエンスを大きく左右します。この記事のコードをご活用いただき、より魅力的なWebサイトの制作に繋がれば何よりです。

あわせて読みたい

【コピペOK】モダンボタンホバーアニメーション｜8種類【Web制作】

【コピペOK】3Dボタンホバーアニメーション｜6種類【Web制作】

【コピペOK】文字が１つずつ表示！タイプライターの実装【HTML/CSS】

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

学習の方向性に迷いがある方
効率的にスキルを身につけたい方
転職や副業でWeb制作を活用したい方
挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

忍者CODEでWeb制作を学ぶべき理由【業界最安値で挫折しない学習環境】 Web制作を学びたいけど、プログラミングスクールは高すぎるし、独学だと挫折しそうで不安…… このような悩みをお持ちの方に向けて、この記事では業界最安値でWeb制作を...

基本的なアニメーション

スクロール系

メニュー・タブ・ナビゲーション

＼どれを読むか迷ったときのおすすめ‼／

フォーム・UI要素

＼どれを読むか迷ったときのおすすめ‼／

ボタン・アイコン

＼どれを読むか迷ったときのおすすめ‼／

テキスト

＼どれを読むか迷ったときのおすすめ‼／

【完全版】テキスト・タイポグラフィアニメーション完全ガイド｜5カテゴリ・26種類

スライダー

【Splide】サムネイル型スライダーの簡単な作成方法【JSライブラリ】

特殊効果

背景アニメーション完全ガイド｜5種類

【コピペOK】ハンバーガーボタンのラインアニメーション｜5種類【Web制作】

ケケンタ — Wed, 16 Jul 2025 05:21:22 +0000

ケケンタ

ハンバーガーボタンのアニメーションを実装したい……

ケケンタ

3本の線がXに変化するアニメーションを作りたい……

今回はこのようなお悩みをお持ちの方へ向けて

Web制作において必須のUI要素
ハンバーガーボタンのアニメーション

をご紹介します。

5種類のラインアニメーション効果を完全網羅した実装なので、いままさに「ハンバーガーボタンを実装しないといけない！」という方は丸っとコピペしてどうぞご活用ください！

この記事で紹介するハンバーガーボタンのアニメーション

基本的なXアニメーション（シンプルで高パフォーマンス）
スライドアニメーション（線がスライドしてXに変化）
ローテーションアニメーション（回転しながらXに変化）
フェードアニメーション（フェードイン/アウトでXに変化）
スケールアニメーション（拡大縮小でXに変化）

特にモバイルファーストのWebサイトやモダンなUIデザインには、ハンバーガーボタンのアニメーションが非常に効果的です。

ケケンタ

この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

あわせて読みたい

【コピペOK】文字が１つずつ表示！タイプライターの実装【HTML/CSS】

【コピペOK】タブ切り替えを紹介｜横並び・縦並び・タブ折返し【HTML】

【コピペOK】背景アニメーション｜5種類【Web制作】

ハンバーガーボタンのラインアニメーションとは

ハンバーガーボタンのラインアニメーションは、3本の横線がXマークに変化するアニメーション効果です。ユーザーの操作に対する視覚的フィードバックを提供し、UIの使いやすさを向上させる効果的な手法です。

効果的な使用場面

適している場面

モバイルサイトのナビゲーション
レスポンシブWebデザイン
モダンなWebアプリケーション
ダッシュボードや管理画面
ワンぺージサイト

避けるべき場面

デスクトップ専用サイト（ハンバーガーメニュー自体が不要）
アクセシビリティを重視する場面（代替手段が必要）
高齢者向けサイト（認識しにくい場合がある）

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
Xアニメーション	⭐	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
スライドアニメーション	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
ローテーションアニメーション	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
フェードアニメーション	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
スケールアニメーション	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐

基本的なXアニメーション

① デモ

See the Pen 【ハンバーガーメニュー】Xアニメーション by ケケンタ (@lgshifbg-the-looper) on CodePen.

このXアニメーションの特徴

シンプルで分かりやすい実装
高いパフォーマンス
すべてのブラウザで対応

② HTML

アクセシビリティのためaria-labelを必ず設定してください。

③ CSS

.hamburger-menu {
  position: relative;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.hamburger-line {
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
}

/* アクティブ状態（Xアニメーション） */
.hamburger-menu.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const hamburger = document.querySelector('.hamburger-menu');

  hamburger.addEventListener('click', function() {
    this.classList.toggle('active');
  });
});

⑤ カスタマイズ例

/* 遅いアニメーション */
.hamburger-menu.slow .hamburger-line {
  transition: all 0.5s ease-in-out;
}

/* 速いアニメーション */
.hamburger-menu.fast .hamburger-line {
  transition: all 0.2s ease-in-out;
}

/* バウンス効果 */
.hamburger-menu.bounce .hamburger-line {
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* カラー変化 */
.hamburger-menu.active .hamburger-line {
  background-color: #ff6b6b;
}

スライドアニメーション

① デモ

See the Pen 【ハンバーガーメニュー】スライドアニメーション by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスライドアニメーションの特徴

線がスライドしてXに変化
スムーズな動き
視覚的に分かりやすい

② HTML

③ CSS

.hamburger-menu.slide {
  position: relative;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.hamburger-menu.slide .hamburger-line {
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.4s ease-in-out;
  position: relative;
}

/* スライドアニメーション */
.hamburger-menu.slide.active .hamburger-line:nth-child(1) {
  transform: translateX(-6px)  translateY(6px) rotate(45deg);
}

.hamburger-menu.slide.active .hamburger-line:nth-child(2) {
  transform: translateX(-100%);
  opacity: 0;
}

.hamburger-menu.slide.active .hamburger-line:nth-child(3) {
  transform: translateX(-6px) translateY(-7px) rotate(-45deg);
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const hamburger = document.querySelector('.hamburger-menu.slide');

  hamburger.addEventListener('click', function() {
    this.classList.toggle('active');
  });
});

ローテーションアニメーション

① デモ

See the Pen 【ハンバーガーメニュー】ローテーションアニメーション by ケケンタ (@lgshifbg-the-looper) on CodePen.

このローテーションアニメーションの特徴

線が回転しながらXに変化
3D的な動き
視覚的インパクト大

② HTML

③ CSS

.hamburger-menu.rotate {
  position: relative;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  perspective: 100px;
}

.hamburger-menu.rotate .hamburger-line {
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

/* ローテーションアニメーション */
.hamburger-menu.rotate.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translateY(9px);
}

.hamburger-menu.rotate.active .hamburger-line:nth-child(2) {
  transform: rotate(180deg);
  opacity: 0;
}

.hamburger-menu.rotate.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translateY(-10px);
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const hamburger = document.querySelector('.hamburger-menu.rotate');

  hamburger.addEventListener('click', function() {
    this.classList.toggle('active');
  });
});

⑤ カスタマイズ例

/* 360度回転 */
.hamburger-menu.rotate-360.active .hamburger-line:nth-child(1) {
  transform: rotate(405deg) translateY(7px);
}

.hamburger-menu.rotate-360.active .hamburger-line:nth-child(2) {
  transform: rotate(540deg);
  opacity: 0;
}

.hamburger-menu.rotate-360.active .hamburger-line:nth-child(3) {
  transform: rotate(315deg) translateY(-7px);
}

/* バウンス回転 */
.hamburger-menu.rotate-bounce .hamburger-line {
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

フェードアニメーション

① デモ

See the Pen 【ハンバーガーメニュー】フェードアニメーション by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフェードアニメーションの特徴

線がフェードイン/アウトでXに変化
エレガントな動き
シンプルで洗練された印象

② HTML

③ CSS

.hamburger-menu.fade {
  position: relative;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.hamburger-menu.fade .hamburger-line {
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.4s ease-in-out;
  position: relative;
}

/* フェードアニメーション */
.hamburger-menu.fade.active .hamburger-line:nth-child(1) {
  opacity: 0;
  transform: translateY(7px);
}

.hamburger-menu.fade.active .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scale(0);
}

.hamburger-menu.fade.active .hamburger-line:nth-child(3) {
  opacity: 0;
  transform: translateY(-7px);
}

/* Xマークの疑似要素 */
.hamburger-menu.fade::before,
.hamburger-menu.fade::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.4s ease-in-out;
  opacity: 0;
}

.hamburger-menu.fade::before {
  transform: rotate(45deg);
}

.hamburger-menu.fade::after {
  transform: rotate(-45deg);
}

.hamburger-menu.fade.active::before,
.hamburger-menu.fade.active::after {
  opacity: 1;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const hamburger = document.querySelector('.hamburger-menu.fade');

  hamburger.addEventListener('click', function() {
    this.classList.toggle('active');
  });
});

⑤ カスタマイズ例

/* 段階的フェード */
.hamburger-menu.fade-stagger .hamburger-line {
  transition-delay: 0s;
}

.hamburger-menu.fade-stagger .hamburger-line:nth-child(2) {
  transition-delay: 0.1s;
}

.hamburger-menu.fade-stagger .hamburger-line:nth-child(3) {
  transition-delay: 0.2s;
}

/* カラーフェード */
.hamburger-menu.fade-color.active .hamburger-line {
  background-color: transparent;
}

.hamburger-menu.fade-color.active::before,
.hamburger-menu.fade-color.active::after {
  background-color: #ff6b6b;
}

スケールアニメーション

① デモ

See the Pen 【ハンバーガーメニュー】スケールアニメーション by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスケールアニメーションの特徴

線が拡大縮小しながらXに変化
動的なスケール効果
視覚的インパクト大

② HTML

③ CSS

.hamburger-menu.scale {
  position: relative;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.hamburger-menu.scale .hamburger-line {
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

/* スケールアニメーション */
.hamburger-menu.scale.active .hamburger-line:nth-child(1) {
  transform: scale(1.3) rotate(45deg) translateY(7px);
}

.hamburger-menu.scale.active .hamburger-line:nth-child(2) {
  transform: scale(0);
  opacity: 0;
}

.hamburger-menu.scale.active .hamburger-line:nth-child(3) {
  transform: scale(1.3) rotate(-45deg) translateY(-7px);
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const hamburger = document.querySelector('.hamburger-menu.scale');

  hamburger.addEventListener('click', function() {
    this.classList.toggle('active');
  });
});

⑤ カスタマイズ例

/* バウンススケール */
.hamburger-menu.scale-bounce .hamburger-line {
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* オーバースケール */
.hamburger-menu.scale-over .hamburger-line:nth-child(1) {
  transform: scale(1.5) rotate(45deg) translateY(7px);
}

.hamburger-menu.scale-over .hamburger-line:nth-child(3) {
  transform: scale(1.5) rotate(-45deg) translateY(-7px);
}

/* 段階的スケール */
.hamburger-menu.scale-stagger .hamburger-line:nth-child(1) {
  transition-delay: 0s;
}

.hamburger-menu.scale-stagger .hamburger-line:nth-child(2) {
  transition-delay: 0.1s;
}

.hamburger-menu.scale-stagger .hamburger-line:nth-child(3) {
  transition-delay: 0.2s;
}

まとめ

今回ご紹介したハンバーガーメニューのラインアニメーションは、Webサイトのユーザビリティを向上させる重要な要素です。

実装のポイント

アクセシビリティを考慮したHTML構造
適切なアニメーション時間（300ms〜500ms）
スムーズなイージング関数の使用
モバイルデバイスでの動作確認

避けるべきポイント

過度に複雑なアニメーション
長すぎるアニメーション時間
アクセシビリティを無視した実装
パフォーマンスを考慮しない実装

おすすめの組み合わせ

シンプルなサイト: 基本的なXアニメーション
モダンなサイト: ローテーションアニメーション
プレミアムサイト: モーフィングアニメーション
パフォーマンス重視: フェードアニメーション

ケケンタ

特にモバイルファーストのWebサイトでは、ハンバーガーメニューのラインアニメーションがユーザーエクスペリエンスを大きく左右します！

この記事のコードをご活用いただき、より使いやすいWebサイトの制作に繋がれば何よりです。

あわせて読みたい

【コピペOK】文字が１つずつ表示！タイプライターの実装【HTML/CSS】

【コピペOK】タブ切り替えを紹介｜横並び・縦並び・タブ折返し【HTML】

【コピペOK】背景アニメーション｜5種類【Web制作】

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

学習の方向性に迷いがある方
効率的にスキルを身につけたい方
転職や副業でWeb制作を活用したい方
挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

基本的なアニメーション

スクロール系

メニュー・タブ・ナビゲーション

＼どれを読むか迷ったときのおすすめ‼／

フォーム・UI要素

＼どれを読むか迷ったときのおすすめ‼／

ボタン・アイコン

＼どれを読むか迷ったときのおすすめ‼／

テキスト

＼どれを読むか迷ったときのおすすめ‼／

【完全版】テキスト・タイポグラフィアニメーション完全ガイド｜5カテゴリ・26種類

スライダー

【Splide】サムネイル型スライダーの簡単な作成方法【JSライブラリ】

特殊効果

背景アニメーション完全ガイド｜5種類

【Web制作】PHPのinclude関数でヘッダーやフッターをパーツ化する

ケケンタ — Fri, 05 Jul 2024 06:01:33 +0000

Web制作をしていると

ヘッダーやフッターなどの共通部分をパーツ化したい

という場面が時折でてきます。

今回はその方法についてご紹介していきます。

この記事で分かること

HTMLファイル（.html）のままPHPを使用できるようにする方法
PHPのinclude関数でヘッダーやフッターなどの共通部分をパーツ化する方法
パーツの呼び出し元のファイルの階層が異なるときでもパスの「ズレ」を無くして読み込む方法

当記事は以下の記事を参考に執筆させていただきました。
参考：https://yusk.org/memo/php-memo/php_include_001.html

Web制作で副業するなら絶対使いこなしたいJavaScriptアニメーション

【コピペOK】タブ切り替えを紹介｜横並び・縦並び・タブ折返し【HTML】

【PHP超入門】PHPの基本構文をまるっと解説！【サンプルコードあり】

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。しかし、それに費やした累計学習期間は1年ほど。モチベーション…

HTMLファイルでもPHPを使用できるようにする方法

今回ご紹介する「共通部分のパーツ化」を行うにあたり、PHPのinclude関数を使用します。

そのため、前提条件として

パーツを読み込みたいファイル内でPHPが使用できることが必須

です。

ケケンタ

具体的には下記２つのいずれかの方法によって、そのファイル内でPHPが使用できるようになります。

ファイル内でPHPを使用できるようにする方法

拡張子を「.php」にする
.htaccessファイルにコードを記述して「.html」ファイル内でもPHPを使用できるようにする

①の方法では、単純に拡張子を「.php」に変更するだけでOKですが

②の方法については、サーバー内に設置されている.htaccessファイルに以下のコードを記述する必要があります。

以下の一文を.htaccessファイルに記述することで
HTMLファイルでもPHPが使用できるようになる

AddType application/x-httpd-php .html

サーバーによって記述内容が異なる場合があります。

PHPのinclude関数で共通パーツを呼び出す

この記事では拡張子を「.php」にする方法を採用しています。

それでは以下より、具体的にPHPのinclude関数を用いて共通パーツを呼び出す方法を解説していきます。

include関数とは

PHPのinclude関数は、外部ファイルを読み込むための関数です。
今回の例で言うと、外部ファイルとして作成してある「ヘッダー」や「フッター」を任意のファイルに読み込むために使用します。

注意点として、
ヘッダーやフッターなどの共通パーツ内で読み込む画像などのパスは、あくまでも「読み込んでいる側の階層」が「基点」となる
ことが挙げられます。
この記事では、そちらを考慮した読み込み方法もご紹介します。

ケケンタ

「パーツを呼び出すファイル同士の階層」が「同じ」か「異なる」かによって記述内容が微妙に変わってくるため、それぞれのパターンについてご紹介します。

【パターン①】呼び出し元のファイルの階層がすべて同じ場合

今回想定するファイルの階層

ファイル構成【パターン①】

各ファイル内で共通パーツを読み込む

共通パーツ内で各種ファイルを読み込む

【パターン①】のように呼び出し元のファイルがすべて同じ階層に設置されている場合、

「呼び出し元のファイルを起点とした相対パス」を記述することで「共通パーツ」も「各種ファイル」も問題なく呼び出すことが可能です。

【パターン②】呼び出し元のファイルの階層が異なる場合

呼び出し元のファイル階層がそれぞれ異なる場合はひと工夫必要になります。

今回想定するファイルの階層
※呼び出し元のファイルが２・３階層目に存在する点がポイント

ファイル構成【パターン②】

各ファイル内で共通パーツを読み込む

共通パーツ内で各種ファイルを読み込む


logo.svg"

include関数で共通パーツを読み込む前に「$Path」という変数（一時的な入れ物のようなもの）に「自分自身から見たときの『相対パスの基点』」を格納しています。
共通ファイル内でパスを指定するときは、この「相対パスの基点」を元に相対パスを記述しているという状態になっています。

ここで最も重要なのが「共通パーツから見たときの『相対パスの基点』を正確に設定できているかどうか」です。

これを間違えてしまうと、各種ファイルの読み込みが上手くいかなくなってしまいます。

ケケンタ

ご自身の各ファイルの階層に合わせて「相対パスの基点」を設定してみて下さい。

共通部分をパーツ化することでメンテナンス性が向上する

いかがだったでしょうか。

WordPressなどのCMSを使用しているときは特別な工夫をしなくてもヘッダーやフッターを簡単にパーツ化できます。

しかし、静的サイトで共通パーツを読み込む際には、「読み込み元のファイルの階層」を正しく理解して対応することが必要になってきます。

ケケンタ

最初は慣れないかもしれませんが、ご自身であれこれ試すことで理解が進むかと思います。

共通部分をパーツ化するメリットとして「メンテナンス性の向上」が挙げられます。

メンテナンス性が向上すればその後の修正作業も効率化されて工数も削減できます。

この記事がその一助となったなら何よりです。

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

学習の方向性に迷いがある方
効率的にスキルを身につけたい方
転職や副業でWeb制作を活用したい方
挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

【WordPress】特定のページで「ヘッダー」や「フッター」を非表示にする方法

ケケンタ — Sat, 29 Jun 2024 05:50:33 +0000

ケケンタ

WordPressで一部のページの「ヘッダー」や「フッター」を非表示にしたいんだけどやり方がわからない……

このようなお悩みをお持ちの方に向けて

WordPressの特定のページで
「ヘッダー」や「フッター」を非表示にする方法

を解説します。

【WordPress】JavaScriptはどこに書けばいい？「３つの方法」を解説

【WordPress】特定ページにCSSを読み込む「５つ」の方法【早見リスト付】

【WordPress】functions.phpを編集する「３つ」の方法と編集時の注意点

無料テーマCocoonからSWELLに乗り換えた７つの理由【WordPress】

あわせて読みたい

WordPressで特定のページの「ヘッダー」、「フッター」を非表示にする

具体的な作業の流れは以下の通りです。

作業の流れ

ヘッダーやフッターを非表示にしたいページの「ページID」を確認する
「追加CSS」にヘッダーやフッターを非表示にするためのプロパティを記述する

STEP１　ヘッダーやフッターを非表示にしたいページの「ページID」を確認する

STEP

管理画面で「ヘッダー」、「フッター」を非表示にしたいページの「編集画面」を開く

「ヘッダー」や「フッター」を非表示にしたいページの編集画面を開く

STEP

URLに記載されている「ページID」を確認する

ページIDを確認

STEP２　「追加CSS」にヘッダーやフッターを非表示にするためのプロパティを記述する

STEP

「追加CSS」を開く

「外観」→「カスタマイズ」→「追加CSS」を開く

追加CSSを開く手順

STEP

CSSを記述して保存する

STEP1で「追加CSS」を開いたら、下記のCSSを追記します。

対象のページが「固定ページ」なのか「投稿ページ」なのかによって記述内容（class名）が若干変わるため気を付けましょう。

固定ページの場合

.page-id-ページID header {
  display: none;
}

/*例*/
.page-id-9 header {
  display: none;
}

投稿ページの場合

.post-id-ページID header {
  display: none;
}

/*例*/
.post-id-5 header {
  display: none;
}

CSSを追記したあとは忘れずにページ上部にある「公開」ボタンを押しましょう。

ケケンタ

以上の手順によりWordPressで特定ページの「ヘッダー」や「フッター」を非表示にすることが可能です！

ページIDが分かれば特定ページのカスタマイズが簡単

いかがだったでしょうか。

今回のようにそのページのIDが分かれば、そのページに対してだけCSSを設定することが可能です。

今回は「ヘッダー」、「フッター」を非表示にするというピンポイントな内容でしたが、CSSの知識があれば他にも色々なカスタマイズも可能ですので、ぜひ挑戦してみて下さい。

ケケンタ

それでは、最後までご覧いただきありがとうございました！

当ブログではWordPressやWeb制作、PHPの情報を発信しています。
ご興味のある方は他の記事もご覧いただけると嬉しいです。

あわせて読みたい

【WordPress】ページごとのtitleタグの内容を変更する方法 WordPressでWebサイト制作をしているとページごとにtitleタグのテキストを変えなきゃいけない…！という状況に出くわすことがよくあります。方法はいくつかありますが…

あわせて読みたい

【WordPress】特定のページのみ背景色を変える方法 WordPressで特定のページだけ背景色を変えたいんだけどやり方がわからない…… 今回はこのようなお悩みについて解説をしていきます。この記事で分かること WordPressの…

あわせて読みたい

【WordPress】functions.phpを編集する「３つ」の方法と編集時の注意点 WordPressで機能カスタマイズをする際は、必ずと言っていいほどfunctions.phpを編集することになります。しかし、functions.phpを編集したことで何らかのエラーが発生…

ヘッダー – ケケンタの独学ITブログ

【コピペOK】スクロール対応ヘッダーメニューアニメーション｜5種類【Web制作】

スクロール対応ヘッダーメニューアニメーションとは

効果的な使用場面

実装方法の比較

フェードイン

① デモ

② HTML

メインコンテンツ

コンテンツセクション1

コンテンツセクション2

コンテンツセクション3

コンテンツセクション4

③ CSS

④ JavaScript

⑤ カスタマイズ例

スライドダウン

① デモ

② HTML

メインコンテンツ

コンテンツセクション1

コンテンツセクション2

コンテンツセクション3

コンテンツセクション4

③ CSS

④ JavaScript

⑤ カスタマイズ例

スケール

① デモ

② HTML

メインコンテンツ

コンテンツセクション1

コンテンツセクション2

コンテンツセクション3

コンテンツセクション4

③ CSS

④ JavaScript

⑤ カスタマイズ例

スティッキー

① デモ

② HTML

メインコンテンツ

コンテンツセクション

③ CSS

④ カスタマイズ例

パララックス

① デモ

② HTML

メインコンテンツ

コンテンツセクション1

コンテンツセクション2

コンテンツセクション3

コンテンツセクション4

③ CSS

④ JavaScript

⑤ カスタマイズ例

まとめ

もっと効率的にWeb制作を学びたい方へ

関連記事

基本的なアニメーション

スクロール系

メニュー・タブ・ナビゲーション

フォーム・UI要素

ボタン・アイコン

テキスト

スライダー

特殊効果

【コピペOK】ハンバーガーボタンのラインアニメーション｜5種類【Web制作】

ハンバーガーボタンのラインアニメーションとは

効果的な使用場面

実装方法の比較

基本的なXアニメーション

① デモ

② HTML

③ CSS

④ JavaScript

⑤ カスタマイズ例

スライドアニメーション

① デモ

② HTML

STEP１　ヘッダーやフッターを非表示にしたいページの「ページID」を確認する

STEP２　「追加CSS」にヘッダーやフッターを非表示にするためのプロパティを記述する