<ol>
<li>test</li>
<li>test</li>
</ol>
次のように表示されます:
数字に色を付け、テキストを黒にしたい!
CSSを編集できますが、HTMLにアクセスできません。
CSS仕様 は、これを行う例です。残念ながら、Firefox 3では動作しますが、IE7では動作しないようです。
<html>
<head>
<style>
ol { counter-reset: item; }
ol li { display: block; }
ol li:before {
content: counter(item) ". ";
counter-increment: item;
color: red;
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</body>
</html>
これが機能するかどうかはわかりませんが、そうすべきだと思います:
<li style='color: red;'><span style='color:black;'>test</span></li>
編集する
htmlを編集できない場合、それは不可能だと思います。 HTMLにjavascriptを追加できる場合(頭に1回)、次のようにできます。
$(document).ready( function() {
$('ol li').wrapInner('<span class="black"> </span>').addClass('red');
});
これにはjQueryライブラリが必要です。
次に、CSSで、赤と黒のクラスをcolor:red/black宣言で設定します。
また、最初の行の下に(リスト番号の下ではなく)左揃えで各リストアイテムのテキストをラップするソリューションもあります。
[〜#〜] html [〜#〜]
<ol class="GreenNumbers">
<li>Long text that might wrap onto a second line.</li>
<li>Long text that might wrap onto a second line.</li>
<li>Long text that might wrap onto a second line.</li>
</ol>
[〜#〜] css [〜#〜]
.GreenNumbers {
list-style-type: none;
}
.GreenNumbers ol {
margin-left: 2em;
}
.GreenNumbers li {
counter-increment: count-me;
}
.GreenNumbers li::before {
content: counter(count-me) ". ";
display: block;
position: relative;
max-width: 0px;
max-height: 0px;
left: -1.3em;
top: .05em;
color: #008000;
font-weight: bold;
}
これはあなたが探していることをするはずです:
http://archivist.incutio.com/viewlist/css-discuss/67894
HTML
<ol>
<li>1 some text here</li>
<li>2 some more text that can span longer than one line</li>
</ol>
CSS
ol { list-style: none; padding-left: 2em; text-indent: -1em;}
li:first-letter { float: left;
font-size: ??;
color: white;
background: orange;
line-height: 1.0; }
デザインに応じて色と背景を変更したい場合を除きます。
この次のものはやり過ぎですが、リストのスタイル設定方法に関する多くの情報を提供します。
http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/
-アダム
@kdgregoryのコードは機能しましたが、箇条書きリストに影響しました。 li
をol li
に変更して、箇条書き項目が影響を受けないようにしました。そのようです:
ol { counter-reset: item }
ol li { display: block }
ol li:before { content: counter(item) ". "; counter-increment: item; color: red; }
追伸また、BODY
などの要素にはCSSで大文字を使用することを好みます。そうすると、クラス.body
およびid #body
と簡単に区別できます。
hTMLを編集できないのは残念です... jsはどうですか?
<script>
var x = document.getElementsByTagName('li');
for (i=0; i<x.length; i++) { x[i].innerHTML ="<span>" + x[i].innerHTML + "</span>" }
// or with jQuery
$('.li').each(function(){this.innerHTML="<span>" + this.innerHTML + "</span>" })
</script>
<style>
li {color: #DDD;}
li span {color: black;}
</style>
そうでない場合、多分十分なソリューションは
ol {background-color: #DDD;}
li {background-color: white;}
他の人が言ったことを少し広げて、追加の質問の明確化のために、HTMLに触れないCSSからこれを行う組み込みの方法はありません。 HTMLをできるだけクリーンでセマンティックに保ちたい場合は、JavaScriptを使用して、おそらくjQueryのようなライブラリを使用してスタイリングを行い、CSSがより効果的になるようにDOMを調整します。
ただし、情報を伝えるために色を使用することには注意が必要です。色付きの数字の目的が何なのかはわかりませんが、色を使用して情報を表示すると、色覚異常のユーザーはループから抜け出し、アクセシビリティにとっては大したことはありません。
html:
<ol>
<li>1 A long bullet here it is long to show how it behaves on a second line</li>
<li>2 A long bullet here it is long to show how it behaves on a second line</li>
<li>3 A long bullet here it is long to show how it behaves on a second line</li>
<li>4 A long bullet here it is long to show how it behaves on a second line</li>
<li>5 A long bullet here it is long to show how it behaves on a second line</li>
</ol>
css:
ol {リストスタイル:なし; padding-left:10px; text-indent:0px; margin-left:5px;} ol li {color:#666;} ol li:first-letter {color:#69A8DE; padding-right:5px; margin-left:-15px;}