テキストハイライト – ケケンタの独学ITブログ https://kekenta-it-blog.com プログラミングやWeb制作の情報を発信 Sun, 10 Aug 2025 02:47:15 +0000 ja hourly 1 https://wordpress.org/?v=7.0 https://kekenta-it-blog.com/wp-content/uploads/2023/07/cropped-KEKENTA-BLOG-32x32.png テキストハイライト – ケケンタの独学ITブログ https://kekenta-it-blog.com 32 32 【コピペOK】テキスト・ハイライトアニメーション｜4種類【Web制作】 https://kekenta-it-blog.com/text-highlight-animations-guide/ https://kekenta-it-blog.com/text-highlight-animations-guide/#respond Thu, 24 Jul 2025 00:10:15 +0000 https://kekenta-it-blog.com/?p=15652

今回はこのようなお悩みをお持ちの方へ向けて Web制作において人気の高いアニメーション効果テキスト・ハイライトアニメーション をご紹介します。 4種類のハイライト効果をご紹介しているので、いままさに「テキストを目立たせた […]]]>

ケケンタ

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

ケケンタ

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

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

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

をご紹介します。

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

この記事で紹介するテキスト・ハイライトアニメーション
  • 基本的なハイライト（背景色の変化）
  • グラデーションハイライト（グラデーション効果）
  • アンダーラインハイライト（下線のアニメーション）
  • テキストシャドウハイライト（影の効果）
ケケンタ

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

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

あわせて読みたい

【コピペOK】入力フォームアニメーション｜7種類【Web制作】
【コピペOK】文字が１つずつ表示！タイプライターの実装【HTML/CSS】
【コピペOK】背景アニメーション｜5種類【Web制作】

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

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

効果的な使用場面

〇 適している場面

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

✕ 避けるべき場面

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

実装方法の比較

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

基本的なハイライト

① デモ

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);
}

まとめ

今回ご紹介したテキスト・ハイライトアニメーションは、Webサイトの視覚的な魅力を向上させる重要な要素です。

実装のコツ

  • 読みやすさを最優先に考慮
  • 適切なアニメーション時間（300ms〜800ms）
  • スムーズなイージング関数の使用
  • モバイルデバイスでの動作確認
  • アクセシビリティの配慮

避けるべきポイント

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

おすすめの組み合わせ

  • シンプルなサイト: 基本的なハイライト
  • モダンなサイト: グラデーションハイライト
  • プレミアムサイト: テキストシャドウハイライト
ケケンタ

特に見出しの強調や重要なテキストの表示では、テキスト・ハイライトアニメーションがユーザー体験を大きく左右します。この記事のコードをご活用いただき、より魅力的なWebサイトの制作に繋がれば何よりです。

あわせて読みたい

【コピペOK】入力フォームアニメーション｜7種類【Web制作】
【コピペOK】文字が１つずつ表示！タイプライターの実装【HTML/CSS】
【コピペOK】背景アニメーション｜5種類【Web制作】

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

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

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

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

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

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

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

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

関連記事

基本的なアニメーション

スクロール系

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

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

フォーム・UI要素

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

ボタン・アイコン

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

テキスト

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

スライダー

特殊効果

]]> https://kekenta-it-blog.com/text-highlight-animations-guide/feed/ 0