CSSを使用して文の各単語に異なるスタイルを適用する方法

1. ::first-letter 擬似クラスを使用する方法:

   <p class="sentence-styling">This is a sample sentence.</p>

   .sentence-styling::first-letter {
    font-size: 20px;
    font-weight: bold;
   }

   この方法では、最初の文字に対して異なるスタイルを適用することができます。

2. 文字列をspan要素で囲む方法:

   <p class="word-styling">
    <span>This</span>
    <span>is</span>
    <span>a</span>
    <span>sample</span>
    <span>sentence.</span>
   </p>

   .word-styling span:nth-child(1) {
    font-weight: bold;
   }
   .word-styling span:nth-child(2) {
    color: red;
   }
   .word-styling span:nth-child(3) {
    text-decoration: underline;
   }
   /* 他の単語にも同様にスタイルを適用 */

   この方法では、各単語を個別のspan要素で囲み、それぞれに異なるスタイルを適用します。

3. JavaScriptを使用して各単語にクラスを追加する方法:

   <p id="sentence">This is a sample sentence.</p>

   const sentenceElement = document.getElementById('sentence');
   const words = sentenceElement.innerHTML.split(' ');
   sentenceElement.innerHTML = words.map(word => `<span>${word}</span>`).join(' ');

   .word-1 {
    font-weight: bold;
   }
   .word-2 {
    color: red;
   }
   .word-3 {
    text-decoration: underline;
   }
   /* 他の単語にも同様にクラスを作成 */

   この方法では、JavaScriptを使用して各単語を囲むspan要素を動的に生成し、それぞれにクラスを追加します。

これらはいくつかの方法の例ですが、CSSを使用して文の各単語に異なるスタイルを適用するためのアプローチです。必要に応じてこれらの例をカスタマイズして使用してください。