HTMLとCSSで一文字毎に文字色を変える
概要:CSSでは、テキストの文字列から一文字単位で指定できるセレクタは無いので、本格的な対応は、諸先輩の記事に記述通り、JavaScriptを利用するするのが、本来の方法なのでしょう。一方、JavaScriptには、抵抗感があり、利用したい個所が少なく簡単に表示したい場合、以下の方法がある。
本格的な一文字単位とは言えないが、ul li を使い一文字ずつ li に記述して表示している。若干、邪道と言えるが、タイトルなどでどうしても文字毎に色を変えてみたいなど、短いテキストならよいかなと! と思い記述している。尚、ul li 以外にspanタグも利用できる。
以下の事例では、5色を使い、nth-of-type疑似クラスで5文字毎に文字色を指定している。
特定の文字(平仮名)のサイズ変更例を追加
☆ ul li リストは、Defaultで修飾記号が付くので以下のcssを入れて下さい。
1 |
ul, li {list-style-type:none;} |
- 文
- 字
- 毎
- に
- 文
- 字
- 色
- を
- 変
- え
- る
- サ
- ン
- プ
- ル
1 2 3 4 5 6 |
<-- HTML --> <div class="mark"> <ul> <li>文</li><li>字</li><li>毎</li><li>に</li><li>文</li><li>字</li><li>色</li><li>を</li><li>変</li><li>え</li><li>る</li><li>サ</li><li>ン</li><li>プ</li><li>ル</li> </ul> </div> |
注意事項:liの区切りは改行しないで下さい。改行した場合、7px程の隙間が出来るので、解消するには親要素にfont-size:0;を入れて下さい。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<-- CSS --> .mark { width:90%; border:1px solid #000; border-radius: 5px; background-color: #000;} .mark > ul{ text-align:center; padding:10px 0px;;} .mark > ul li{ display:inline-block; /* liを横並びに */ font-size:25px; font-weight:bold; width:35px;} /* --- 5文字毎に文字色の変更 --- */ .mark > ul li:nth-of-type(5n+1){color:#fc9;} /* 1つ目から5つ毎に最後迄 → 1,6,11 */ .mark > ul li:nth-of-type(5n+2){color:#fff;} /* 2つ目から5つ毎に最後迄 → 2,7,12 */ .mark > ul li:nth-of-type(5n+3){color:#cff;} /* 3つ目から5つ毎に最後迄 → 3,8,13 */ .mark > ul li:nth-of-type(5n+4){color:#ff0;} /* 4つ目から5つ毎に最後迄 → 4,9,14 */ .mark > ul li:nth-of-type(5n+5){color:#ccc;} /* 5つ目から5つ毎に最後迄 → 5,10,15 */ /* --- 特定の文字(平仮名)のサイズ変更例 --- */ .mark > ul li:nth-of-type(4), .mark > ul li:nth-of-type(8), .mark > ul li:nth-of-type(10), .mark > ul li:nth-of-type(11){ font-size:20px;} |
補足:文字を入れるセレクタにspanを使う方法もあります。その場合、以下のようにして下さい。
1 2 3 4 5 6 7 8 |
<-- HTML --> <div class="mark"> <p> <span>文</span> <span>字</span> /* 以下省略 */ </p> </div> |
CSSは、ul を p に、li をspan にします。
1 2 3 4 |
<-- CSS --> .mark > p{ /* 元 .mark > ul{ */ .mark > p > span{ /* 元 .mark > ul li{ */ .mark > p > span:nth-of-type(5n+1){color:#fc9;} |