HTML の リスト の 一部だけ 文字の色を 変更する

目的

• HTMLファイルのリストで箇条書きされた内容の一行のみ文字の色を変更する方法をまとめる

押さえるポイント

• 変更したい行のliタグにクラスを与えてCSSにて文字の色を設定する。

書き方の例

• 下記にHTMLファイルの内容を記載する

<ul>
  <li>おはようございます。</li>
  <li class="selected">こんにちは。</li>
  <li>こんばんは。</li>
</ul>

• 下記にCSSファイルの内容を記載する。

.selected {
    color: カラーコード;
}

より具体的な例

箇条書きされたリストの｢おはようございます。｣の文字を赤色に設定する。

〜サンプルコード〜

• 下記にHTMLファイルの内容を記載する。

<ul>
  <li>おはようございます。</li>
  <li class="style">こんにちは。</li>
  <li>こんばんは。</li>
</ul>

• CSSで上記のHTMLファイルのstyleクラスに対して文字を赤色に設定する。
• 下記にCSSファイルの内容を記載する。

.style{
  color: red;
}