堀北真希うさぎ
主な作品
制作者が作ったイラストと動画の例

ページ案内▼

<ol>要素内の項目マーカに丸数字を使うには。

<ol>要素内の項目マーカに丸数字を使いたい方のためのスクリプトです。

<ol>要素内の項目マーカに丸数字を使うには・目次。

まず初めに。

<ol>要素内の項目マーカの表示形態を変えるには、CSSのlist-style-typeプロパティを用いれば良いのですが、丸数字は残念ながら対応しておりません。

そこで、是非マーカに丸数字を使いたいと言う場合向けのスクリプトです。

実を言うと、CSSでも不可能ではありません。

実はCSS第二水準を用いれば、この目的は果たせます。

具体的には、以下のようにします。

ol>li {
   list-style-type: none;
   text-indent: -1em;
   }

/* <ol>要素直下の 1番目の<li>要素のマーカ。 */
ol>li:first-child:before {
   content: "\2460";  /* 丸数字1のUSCコード*/
   }

/* <ol>要素直下の 2番目の<li>要素のマーカ。 */
ol>li:first-child+li:before {
   content: "\2461";  /* 丸数字2のUSCコード*/
   }

/* <ol>要素直下の 3番目の<li>要素のマーカ。 */
ol>li:first-child+li+li:before {
   content: "\2462";  /* 丸数字3のUSCコード*/
   }

/* <ol>要素直下の 4番目の<li>要素のマーカ。 */
ol>li:first-child+li+li+li:before {
   content: "\2463";  /* 丸数字4のUSCコード*/
   }

(中略)

/* <ol>要素直下の20番目の<li>要素のマーカ。 */
ol>li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li:before {
   content: "\2473";  /* 丸数字20のUSCコード*/
   }

/* <ol>要素直下の21番目以降のスタイル(算用数字で代用)。 */
ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
   list-style-type: decimal;
   text-indent: 0;
   }

ただ、この方法には以下の問題点があります。

使えないブラウザもあります
インターネットエクスプローラ 7.0までなど、:first-child擬似要素, 隣接セレクタ, :before擬似要素などに対応していないブラウザがあります。
記述が異常に長くなる
対応していない環境を無視したとしても、丸数字は20まであり、従って20項目までスタイル指定を行う必要があり、余りにも長過ぎてしまいます。

まぁ、JAVAスクリプトなしで実現出来るので、悪くは無いという方もいらっしゃるかもしれませんが…。

<ol>要素内の項目マーカに丸数字を使うスクリプトを作るに当たって注意したい事。

JAVAスクリプトが無効の場合は普通の数字になります
インターネットエクスプローラは、アクティヴスクリプトを無効に出来るようになっております。

従って、セキュリティ上の理由からスクリプトを無効にしている場合には、丸が付かない数字がマーカとなる事になります。

項目数は最大二十です
丸数字のフォントが20までしかないため、二十個を越えた場合はそれ以上はカウントアップしないようにしました。

尚、丸数字は数値文字参照を用いますので、機種依存の心配はありません。

<ol>要素内の項目マーカに丸数字を使う処理の仕様。

スクリプトは自由に改変していただいて構いませんが、そのためにも本記事で紹介しているスクリプトの前提条件を仕様として挙げておきます。

対象となる環境は現行のグラフィカルなウェブブラウザとします
具体的には、

となります。

対象はHTML文書内にある全ての<ol>要素とします
今回は簡単のため、文書内の全ての<ol>要素を対象としております。

特定の<ol>要素を除外したいと言う方のために、見本コードの中にそのためのヒントを入れておきました。

スクリプトの利用方法。

スクリプトは、HTML文書とは別のファイルで保存し、注釈リストを含むHTML文書では当該スクリプトを文書中の任意の箇所に<script>要素で埋め込むように記述します。

スクリプトはHTML文書の読込が完了すると自動的に処理スクリプトを起動して、DOMに対応しているグラフィカルなウェブブラウザでは文書内の<ol>要素のマーカを丸数字に変えます。

スクリプトの例。

以下のようなスクリプトを書いて、それをHTML文書からリンクすれば、対応している環境では、全ての<ol>要素直下の各項目のマーカとして丸数字が表示される事になります。

onload4olmarker=window.onload;
window.onload=function () {
    if (onload4olmarker) onload4olmarker();

    // 対応出来ない環境を弾く。
    if (!document.getElementById ||
         navigator.userAgent.indexOf('Opera/6')>-1 ||
         navigator.userAgent.indexOf('Opera 6')>-1) {
        return;
        }

    var i,j,c,eles2;
    var eles=document.getElementsByTagName('ol');
    i=eles.length;
    while (--i>=0) {

        /* 特定の<ol>要素を対象外とする場合は、この箇所に除外処理を入れます */

        eles2=eles[i].childNodes;
        j=-1; c=0x2460; //丸数字1のUCSコード。
        while (++j<eles2.length) {
            //  <li>要素ノードか。
            if (eles2[j].nodeType!=1 && eles2[j].nodeName.toLowerCase()!='li') continue;
            //  スタイルの調整。
            eles2[j].style.listStyle='none';  //  マーカは消す。
            eles2[j].style.textIndent='-1em'; //  マーカ代わりの文字の分だけ左にずらす。
            //  丸数字を内容の前に付ける。
            eles2[j].innerHTML='&#'+c+';'+eles2[j].innerHTML;
            //  丸数字の更新。
            ++c;
            if (c>=0x2473) c=0x2473; //丸数字は20まで。
            }
        }
    }

尚、特に意味はありませんが、今回は匿名函数を用いております。

からくり。

文書内にある全ての<ol>要素ノードに対し、その子ノードで<li>要素ノードとなっている場合に、そのノードの内容となっているHTMLの前に丸数字の数値文字参照を加えると言うものです。

この場合、そのままだと通常のリストのマーカが表示されてしまいますので、各<li>要素ノードの style.listStyle プロパティ(CSSでのlist-styleプロパティに対応)には、'none'(マーカ及びマーカ画像なし)を入れて当該プロパティ値に強制変更します。

加えて、通常のテキストをマーカ代わりにするため、各<li>要素ノードの style.textIndent プロパティ(CSSでのtext-indentプロパティに対応)には、'-1em'(一文字分左にインデント)を入れて書き出しの位置を一文字分左にずらします。

文字参照の値の初期値には、0x2460(①のUCSコード)から始まり、<li>要素を先頭から処理するごとに 1を加えていきますが、0x2473(⑳のUCSコード)に達したらそれ以上の丸数字は無いので、値を加えないようにします。

スクリプトについての注意事項。

今回挙げた処理では、<ol>要素の項目内に<p>要素などのブロックレヴェル要素が冒頭に入っている場合におかしな表示になる事があります。

これについては、要素の内容を吟味して調整する必要がありますが、そうするとコードがちょっと複雑になってしまいますので、今回は割愛させていただきました。

しらぎくのウェブサイト作成入門サイトマップ

marguerite.site@gmail.com