ＨＴＭＬとＣＳＳで一文字毎に文字色を変える

2020-11-9 修正

概要：ＣＳＳでは、テキストの文字列から一文字単位で指定できるセレクタは無いので、本格的な対応は、諸先輩の記事に記述通り、JavaScriptを利用するするのが、本来の方法なのでしょう。一方、JavaScriptには、抵抗感があり、利用したい個所が少なく簡単に表示したい場合、以下の方法がある。

本格的な一文字単位とは言えないが、ul li を使い一文字ずつ li に記述して表示している。若干、邪道と言えるが、タイトルなどでどうしても文字毎に色を変えてみたいなど、短いテキストならよいかなと！　と思い記述している。尚、ｕｌ　ｌｉ以外にｓｐａｎタグも利用できる。

以下の事例では、５色を使い、nth-of-type疑似クラスで５文字毎に文字色を指定している。

特定の文字（平仮名）のサイズ変更例を追加

☆ ul li リストは、Defaultで修飾記号が付くので以下のcssを入れて下さい。

  ul, li {list-style-type:none;}

1	ul, li {list-style-type:none;}

 <-- 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>

<-- HTML -->

<ul>

</ul>

</div>

注意事項：liの区切りは改行しないで下さい。改行した場合、７ｐｘ程の隙間が出来るので、解消するには親要素にfont-size:0;を入れて下さい。

<-- 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;}

/* --- ５文字毎に文字色の変更 --- */
.mark > ul li:nth-of-type(5n+1){color:#fc9;}  /* １つ目から５つ毎に最後迄 → 1,6,11  */
.mark > ul li:nth-of-type(5n+2){color:#fff;}  /* ２つ目から５つ毎に最後迄 → 2,7,12  */
.mark > ul li:nth-of-type(5n+3){color:#cff;}  /* ３つ目から５つ毎に最後迄 → 3,8,13  */
.mark > ul li:nth-of-type(5n+4){color:#ff0;}  /* ４つ目から５つ毎に最後迄 → 4,9,14  */
.mark > ul li:nth-of-type(5n+5){color:#ccc;}  /* ５つ目から５つ毎に最後迄 → 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;}

<-- 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;}

/* --- ５文字毎に文字色の変更 --- */

.mark > ul li:nth-of-type(5n+1){color:#fc9;} /* １つ目から５つ毎に最後迄 → 1,6,11 */

.mark > ul li:nth-of-type(5n+2){color:#fff;} /* ２つ目から５つ毎に最後迄 → 2,7,12 */

.mark > ul li:nth-of-type(5n+3){color:#cff;} /* ３つ目から５つ毎に最後迄 → 3,8,13 */

.mark > ul li:nth-of-type(5n+4){color:#ff0;} /* ４つ目から５つ毎に最後迄 → 4,9,14 */

.mark > ul li:nth-of-type(5n+5){color:#ccc;} /* ５つ目から５つ毎に最後迄 → 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を使う方法もあります。その場合、以下のようにして下さい。

 <-- HTML -->
<div class="mark">
  <p>
   <span>文</span>
   <span>字</span>
     /* 以下省略 */
  </p>
</div>

<-- HTML -->

<p>

/* 以下省略 */

</p>

</div>

ＣＳＳは、ｕｌをｐに、ｌｉをｓｐａｎ　にします。

<-- CSS -->
.mark > p{                                        /* 元　.mark > ul{ */
.mark > p > span{                                 /* 元　.mark > ul li{ */
.mark > p > span:nth-of-type(5n+1){color:#fc9;}

<-- CSS -->

.mark > p{ /* 元　.mark > ul{ */

.mark > p > span{ /* 元　.mark > ul li{ */

.mark > p > span:nth-of-type(5n+1){color:#fc9;}