この記事にはプロモーションが含まれています。

【コピペOK】テキスト・ハイライトアニメーション完全ガイド｜4種類

2025-07-24

ケケンタ

テキストにハイライト効果を実装したい……

ケケンタ

文字が光るようなアニメーションを作りたい……

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

Web制作において人気の高いアニメーション効果
テキスト・ハイライトアニメーション

をご紹介します。

4種類のハイライト効果をご紹介しているので、いままさに「テキストを目立たせたい！」という方は丸っとコピペしてどうぞご活用ください！

この記事で紹介するテキスト・ハイライトアニメーション

基本的なハイライト（背景色の変化）
グラデーションハイライト（グラデーション効果）
アンダーラインハイライト（下線のアニメーション）
テキストシャドウハイライト（影の効果）

ケケンタ

特に見出しの強調や重要なテキストの表示には、テキスト・ハイライトアニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

なお、今回ご紹介するアニメーションはCSSとJavaScriptを組み合わせて実装するので、より高度なインタラクションを実現できます。

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

【コピペOK】背景アニメーション完全ガイド｜5種類【HTML】

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら

連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

Laravelの教科書バージョン10対応【Laravel11サポートガイドあり】

created by Rinker

¥3,000 (2025/07/25 20:06:07時点 Amazon調べ-詳細)

テキスト・ハイライトアニメーションとは

テキスト・ハイライトアニメーションは、テキストに視覚的な強調効果を付けるアニメーション効果です。ユーザーの注目を集め、重要な情報を効果的に伝えるための手法です。

効果的な使用場面

〇 適している場面

見出しやタイトルの強調
重要なキーワードの表示
ランディングページのメインメッセージ
ブログ記事のハイライト部分
ナビゲーションのアクティブ状態

✕ 避けるべき場面

大量のテキスト全体
読みやすさを重視する場面
アクセシビリティを重視する場面
過度に使用した場合

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
基本的なハイライト	⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
グラデーションハイライト	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
アンダーラインハイライト	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
テキストシャドウハイライト	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐

基本的なハイライト

① デモ

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

この基本的なハイライトの特徴

背景色が変化するシンプルな効果
高いパフォーマンス
すべてのブラウザで対応
読みやすさを保持

② HTML

<!-- スクロール用の領域 -->
<div class="scroll-area">
  <div class="scroll-content">
    <h2>スクロールしてください</h2>
    <p>下にスクロールするとハイライトアニメーションが表示されます</p>
  </div>
</div>

<div class="highlight-container">
  <h1 class="basic-highlight">基本的なハイライト効果</h1>
  <p class="basic-highlight">このテキストは<span class="highlight-text">ハイライト</span>されます。</p>
  <div class="basic-highlight">重要な<span class="highlight-text">メッセージ</span>を強調表示</div>
</div>

③ CSS

/* スクロール用の領域 */
.scroll-area {
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}

.scroll-content h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.scroll-content p {
  font-size: 1.2rem;
  opacity: 0.9;
}

.highlight-container {
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

.basic-highlight {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.highlight-text {
  position: relative;
  background: linear-gradient(120deg, #a8edea 0%, #fed6e3 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.2em;
  background-position: 0 88%;
  transition: all 0.25s ease-in;
  padding: 0 2px;
}

.highlight-text:hover {
  background-size: 100% 100%;
  background-position: 0 0;
  color: #333;
  font-weight: bold;
}

/* アニメーション版 */
.highlight-text.animate {
  animation: highlightSlide 0.6s ease-out forwards;
}

@keyframes highlightSlide {
  0% {
    background-size: 0% 0.2em;
    background-position: 0 88%;
  }
  50% {
    background-size: 100% 0.2em;
    background-position: 0 88%;
  }
  100% {
    background-size: 100% 100%;
    background-position: 0 0;
  }
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const highlightElements = document.querySelectorAll('.highlight-text');

  // ホバー時のアニメーション
  highlightElements.forEach(element => {
    element.addEventListener('mouseenter', function() {
      this.classList.add('animate');
    });

    element.addEventListener('mouseleave', function() {
      this.classList.remove('animate');
    });
  });

  // スクロール時のアニメーション
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('animate');
      }
    });
  }, {
    threshold: 0.5
  });

  highlightElements.forEach(el => observer.observe(el));
});

⑤ カスタマイズ例

/* カラーテーマ変更 */
.highlight-text {
  background: linear-gradient(120deg, #ff6b6b 0%, #4ecdc4 100%);
}

/* アニメーション速度変更 */
.highlight-text {
  transition: all 0.5s ease-in;
}

/* バウンス効果 */
.highlight-text:hover {
  transform: scale(1.05);
}

/* 回転効果 */
.highlight-text:hover {
  transform: rotate(2deg);
}

グラデーションハイライト

① デモ

See the Pen グラデーションハイライト by ケケンタ (@lgshifbg-the-looper) on CodePen.

このグラデーションハイライトの特徴

美しいグラデーション効果
視覚的インパクト大
モダンなデザイン
カラフルな表現

② HTML

<div class="gradient-container">
  <h1 class="gradient-highlight">グラデーションハイライト</h1>
  <p class="gradient-text">このテキストは<span class="gradient-text-highlight">グラデーション</span>でハイライトされます。</p>
  <div class="gradient-text">美しい<span class="gradient-text-highlight">カラー効果</span>を実現</div>
</div>

③ CSS

.gradient-container {
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

.gradient-highlight {
  font-size: 24px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 3s ease infinite;
}

.gradient-text {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.gradient-text-highlight {
  position: relative;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientMove 2s ease infinite;
  font-weight: bold;
}

.gradient-text-highlight::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gradient-text-highlight:hover::before {
  opacity: 1;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes gradientMove {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const gradientElements = document.querySelectorAll('.gradient-text-highlight');

  // テキストデータ属性の設定
  gradientElements.forEach(element => {
    element.setAttribute('data-text', element.textContent);
  });

  // ホバー効果の強化
  gradientElements.forEach(element => {
    element.addEventListener('mouseenter', function() {
      this.style.animationDuration = '0.5s';
    });

    element.addEventListener('mouseleave', function() {
      this.style.animationDuration = '2s';
    });
  });
});

⑤ カスタマイズ例

/* カラーテーマ変更 */
.gradient-text-highlight {
  background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #f5576c);
}

/* アニメーション速度変更 */
.gradient-text-highlight {
  animation: gradientMove 1s ease infinite;
}

/* パルス効果 */
.gradient-text-highlight {
  animation: gradientMove 2s ease infinite, pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

アンダーラインハイライト

① デモ

See the Pen アンダーラインハイライト by ケケンタ (@lgshifbg-the-looper) on CodePen.

このアンダーラインハイライトの特徴

下線がアニメーション
エレガントな効果
読みやすさを保持
シンプルで洗練された印象

② HTML

<!-- スクロール用の領域 -->
<div class="scroll-area">
  <div class="scroll-content">
    <h2>スクロールしてください</h2>
    <p>下にスクロールするとアンダーラインハイライトが表示されます</p>
  </div>
</div>

<div class="underline-container">
  <h1 class="underline-highlight">アンダーラインハイライト</h1>
  <p class="underline-text">このテキストは<span class="underline-text-highlight">アンダーライン</span>でハイライトされます。</p>
  <div class="underline-text">エレガントな<span class="underline-text-highlight">下線効果</span>を実現</div>
</div>

③ CSS

/* スクロール用の領域 */
.scroll-area {
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}

.scroll-content h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.scroll-content p {
  font-size: 1.2rem;
  opacity: 0.9;
}

.underline-container {
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

.underline-highlight {
  font-size: 24px;
  position: relative;
  display: inline-block;
}

.underline-highlight::after {
  content: '';
  position: absolute;
  width: 0;
  height: 3px;
  bottom: -5px;
  left: 0;
  background: linear-gradient(90deg, #667eea, #764ba2);
  transition: width 0.6s ease;
}

.underline-highlight:hover::after {
  width: 100%;
}

.underline-text {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.underline-text-highlight {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.underline-text-highlight::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
  transition: width 0.4s ease;
}

.underline-text-highlight:hover::after {
  width: 100%;
}

/* アニメーション版 */
.underline-text-highlight.animate::after {
  width: 100%;
  animation: underlineDraw 0.8s ease-out;
}

@keyframes underlineDraw {
  0% { width: 0; }
  50% { width: 100%; }
  100% { width: 100%; }
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const underlineElements = document.querySelectorAll('.underline-text-highlight');

  // ホバー時のアニメーション
  underlineElements.forEach(element => {
    element.addEventListener('mouseenter', function() {
      this.classList.add('animate');
    });

    element.addEventListener('mouseleave', function() {
      this.classList.remove('animate');
    });
  });

  // スクロール時のアニメーション
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        setTimeout(() => {
          entry.target.classList.add('animate');
        }, 200);
      }
    });
  }, {
    threshold: 0.5
  });

  underlineElements.forEach(el => observer.observe(el));
});

⑤ カスタマイズ例

/* カラーテーマ変更 */
.underline-text-highlight::after {
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
}

/* アニメーション速度変更 */
.underline-text-highlight::after {
  transition: width 0.8s ease;
}

/* 波紋効果 */
.underline-text-highlight::after {
  box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
}

/* 段階的アニメーション */
.underline-text-highlight.animate::after {
  animation: underlineStagger 1s ease-out;
}

@keyframes underlineStagger {
  0% { width: 0; }
  25% { width: 25%; }
  50% { width: 50%; }
  75% { width: 75%; }
  100% { width: 100%; }
}

テキストシャドウハイライト

① デモ

See the Pen テキストシャドウハイライト by ケケンタ (@lgshifbg-the-looper) on CodePen.

このテキストシャドウハイライトの特徴

影の効果でテキストを強調
3D的な表現
視覚的インパクト大
モダンなデザイン

② HTML

<div class="shadow-container">
  <h1 class="shadow-highlight">テキストシャドウハイライト</h1>
  <p class="shadow-text">このテキストは<span class="shadow-text-highlight">シャドウ効果</span>でハイライトされます。</p>
  <div class="shadow-text">3D的な<span class="shadow-text-highlight">影の表現</span>を実現</div>
</div>

③ CSS

.shadow-container {
  padding: 20px;
  font-family: 'Arial', sans-serif;
  background: #f5f5f5;
}

.shadow-highlight {
  font-size: 24px;
  color: #333;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.shadow-highlight:hover {
  text-shadow: 4px 4px 8px rgba(102, 126, 234, 0.5);
  transform: translateY(-2px);
}

.shadow-text {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #333;
}

.shadow-text-highlight {
  position: relative;
  color: #333;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
  cursor: pointer;
}

.shadow-text-highlight:hover {
  color: #667eea;
  text-shadow: 
    2px 2px 4px rgba(102, 126, 234, 0.3),
    4px 4px 8px rgba(102, 126, 234, 0.2),
    6px 6px 12px rgba(102, 126, 234, 0.1);
  transform: translateY(-1px);
}

/* アニメーション版 */
.shadow-text-highlight.animate {
  animation: shadowPulse 1.5s ease-in-out infinite;
}

@keyframes shadowPulse {
  0%, 100% {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    transform: translateY(0);
  }
  50% {
    text-shadow: 
      2px 2px 4px rgba(102, 126, 234, 0.3),
      4px 4px 8px rgba(102, 126, 234, 0.2),
      6px 6px 12px rgba(102, 126, 234, 0.1);
    transform: translateY(-2px);
  }
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const shadowElements = document.querySelectorAll('.shadow-text-highlight');

  // ホバー時のアニメーション
  shadowElements.forEach(element => {
    element.addEventListener('mouseenter', function() {
      this.classList.add('animate');
    });

    element.addEventListener('mouseleave', function() {
      this.classList.remove('animate');
    });
  });

  // スクロール時のアニメーション
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('animate');
      } else {
        entry.target.classList.remove('animate');
      }
    });
  }, {
    threshold: 0.5
  });

  shadowElements.forEach(el => observer.observe(el));
});

⑤ カスタマイズ例

/* カラーテーマ変更 */
.shadow-text-highlight:hover {
  color: #ff6b6b;
  text-shadow: 
    2px 2px 4px rgba(255, 107, 107, 0.3),
    4px 4px 8px rgba(255, 107, 107, 0.2);
}

/* アニメーション速度変更 */
.shadow-text-highlight {
  transition: all 0.6s ease;
}

/* 回転効果 */
.shadow-text-highlight:hover {
  transform: translateY(-1px) rotate(1deg);
}

/* スケール効果 */
.shadow-text-highlight:hover {
  transform: translateY(-1px) scale(1.05);
}