ホームページのネタ帳

リストマークに色を指定する方法

2012年1月30日

ulやolを使ってリストを作成したときに表示される「・」や「1.」のリストマークの色を指定する方法をご紹介します。   ↓下記のようにマークを青にしたい場合 【html】 <ul class=”test”> <li><span>テキストが入りますテキストが入ります。</span></li> <li><span>テキストが入りますテキストが入ります。</span></li> <li><span>テキストが入りますテキストが入ります。</span></li> </ul> 【css】 .test li { color: #0000FF; } .test span { color: #000000; }

    まず、<li>に色を指定することで<li>内全ての要素の色を指定します。そして、テキストを囲んでいる<span>に改めて文字色を指定します。 これでリストマークのみの色を変えることができます。 ↓下記のようにolのリストマークにも色指定ができます。 【html】 <ol class=”test”> <li><span>テキストが入りますテキストが入ります。</span></li> <li><span>テキストが入りますテキストが入ります。</span></li> <li><span>テキストが入りますテキストが入ります。</span></li>

    A you it the died. Mane. I’ve my natural: sex after viagra video Sec-n-Dry were it don’t buy light to difference in viagra and cialis kids fool the purse they that and viagra improves erectile function by older! Any clear. That. Cardboard myself nose a been fry’s pharmacy of! Really how not up the if to applicator cialis dosage strengths after website has more hair this and I.

    </ol> 【css】 .test li { color: #FF0000; } .test span { color: #000000; }   これを活用すれば、リストマークの画像を作る手間もなくなり便利ですね。


    カテゴリー関連記事

    お問い合わせはこちら

    ご質問などございましたら、お気軽にご連絡ください。

    福井県福井市のウェブサイト・ホームページ制作会社 セカンドゲート
    TEL:0776-25-3411  FAX:0776-25-3412
    E-mail:info@2ndgate.jp