☰

HTML: テキスト文字列内の特定の単語の色を変更する 質問する

tag-icon • tag-icon html css text colors inline
HTML: テキスト文字列内の特定の単語の色を変更する 質問する

以下のメッセージがあります（少し変更されています）:

「2011 年 1 月 30 日までにコンテストに応募すると、素晴らしい夏の旅行を含む最高 $$$$ の賞金を獲得できる可能性があります。」

現在、私は以下を所有しています:

<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">

テキスト文字列をフォーマットしますが、「2011 年 1 月 30 日」の色を #FF0000 に、「夏」の色を #0000A0 に変更します。

これを HTML またはインライン CSS で厳密に行うにはどうすればよいでしょうか?

ベストアンサー1

<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">
  Enter the competition by 
  <span style="color: #ff0000">January 30, 2011</span>
  and you could win up to $$$$ — including amazing 
  <span style="color: #0000a0">summer</span> 
  trips!
</p>

または、代わりに CSS クラスを使用することもできます。

<html>
  <head>
    <style type="text/css">
      p { 
        font-size:14px; 
        color:#538b01; 
        font-weight:bold; 
        font-style:italic;
      }
      .date {
        color: #ff0000;
      }
      .season { /* OK, a bit contrived... */
        color: #0000a0;
      }
    </style>
  </head>
  <body>
    <p>
      Enter the competition by 
      <span class="date">January 30, 2011</span>
      and you could win up to $$$$ — including amazing 
      <span class="season">summer</span> 
      trips!
    </p>
  </body>
</html>

おすすめ記事