2011.05.09
html

HTMLのul liで点の部分だけ色を変える

先日ウェブサイトを作っていて、リストの点の部分だけ違う色にしたいというご要望がありました。
そんなこと今までなかったので考えてもみませんでしたが、簡単にできるだろうと色々試しました。

それが意外に手間取ってしまいました。

通常、

● 晴れ
● 雨
● 曇り

のようにする場合、

<ul>
  <li>晴れ</li>
  <li>雨</li>
  <li>曇り</li>
</ul>

となります。

<ul style="color:#EC8E9E;">
  <li>晴れ</li>
  <li>雨</li>
  <li>曇り</li>
</ul>

上記のように単純にulに色を指定しただけだと、全てが指定した色になってしまいます。

● 晴れ
● 雨
● 曇り

のように。

文字はそのままで、点だけ色を変えたい場合は、spanを使って色を指定しなおす必要があります。

Attention!!

以前はfontを使って対処しましたがHTML5ではfontタグが廃止されているので今後はfontタグは使わない方が得策です。

晴れ

曇り

としたい場合、

<ul style="color:#EC8E9E;">
  <li><span style="color:#333;">晴れ</span></li>
  <li><span style="color:#333;">雨</span></li>
  <li><span style="color:#333;">曇り</span></li>
</ul>

リスト表示する部分が少ない場合はこれで良いかもしれませんが、もっと良い方法もあります。
こちらに詳しく書き直しました。

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP