HTML、CSS、JavaScriptで特定のキーワードにハイライトをつけるソースコードを紹介！

<div id="text-content">
	<p>テクノロジーとイノベーションは、現代社会において非常に重要な役割を果たしています。テクノロジーは、科学的な知識を活用して、新しい製品やサービスを開発し、生活の質を向上させるための手段です。例えば、スマートフォンやインターネットの普及により、情報の共有やコミュニケーションが劇的に向上しました。</p>
	<p>一方、イノベーションは、新しいアイデアやアプローチを取り入れて、新しい価値を創造するプロセスです。テクノロジーとイノベーションはしばしば相互に補完的であり、革新的なテクノロジーが新しいイノベーションの源となることが多いです。例えば、自動運転車の開発は、高度なテクノロジーとイノベーションの結果であり、交通の安全性や効率性を向上させる可能性があります。</p>
	<p>テクノロジーとイノベーションは、産業界だけでなく、医療、教育、エネルギー、環境保護など、さまざまな分野で重要です。これらの要素を活用することで、持続可能な未来を築くための解決策を見つけることができるでしょう。したがって、私たちはテクノロジーとイノベーションに対する投資と研究を進め、より良い社会を築くための力を発揮する必要があります。</p>
</div>

#text-content {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    background-color: #f7f6f6;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    line-height: 1.6;
    border-radius: 8px;
}
.highlight {
    background-color: #ffeb3b;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

function highlightText(container, words) {
    const paragraphs = container.getElementsByTagName('p');
    for (let p of paragraphs) {
        let html = p.innerHTML;
        words.forEach(word => {
            const regExp = new RegExp(`(${word})`, 'gi');
            html = html.replace(regExp, `<span class="highlight">$1</span>`);
        });
        p.innerHTML = html;
    }
}

window.onload = () => {
    const textContainer = document.getElementById('text-content');
    const wordsToHighlight = ['テクノロジー', 'イノベーション'];
    highlightText(textContainer, wordsToHighlight);
};