OLのリストで、カッコ付きの番号にする方法【覚書】

括弧付きで数字を頭に振った箇条書きの文章を挿入したいことがよくあります。

こんな感じにしたい。

(1)	ひとまず何はともあれ、そうした幸福・仕合せのための偽りは、尊敬を自己についにもたらすために言ってくれるなら。
(2)	それで場合によっては、全く受売であっても、相当にさきほどのように遠慮がなければ、人に聞かせても意味のないことなのかもしれない。
(3)	その事情は私いっぱいを保つから翌日とも味わってしまいのか畳んないですて、その上何にまして私の自分をしゃべってならて、もしここをそうした必竟を考えるているがは必要にされのませはなかろべきとは勧めのです。

---

番号つきリストなら、「 ol 」を使うのが簡単ですが。

<ol> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> </ol>

括弧付きにはなってくれません。

1. あいうえお
2. かきくけこ
3. さしすせそ

検索してみたら、「 ol 」のリストに括弧をつける方法が出てきます。

ol { list-style-type: none; } ol li { counter-increment: cnt; } ol li:before { content: "(" counter(cnt) ") "; }

やってみたら、おお、括弧がつきました。

1. あいうえお
2. かきくけこ
3. さしすせそ

---

しかしこれには問題がありました。

1. ひとまず何はともあれ、そうした幸福・仕合せのための偽りは、尊敬を自己についにもたらすために言ってくれるなら。
2. それで場合によっては、全く受売であっても、相当にさきほどのように遠慮がなければ、人に聞かせても意味のないことなのかもしれない。
3. その事情は私いっぱいを保つから翌日とも味わってしまいのか畳んないですて、その上何にまして私の自分をしゃべってならて、もしここをそうした必竟を考えるているがは必要にされのませはなかろべきとは勧めのです。

長い文章を入れると、マーカー部分が文章の中に入ってしまうのですね・・・

これを外に出すには「 li:before 」を左にずらしてやれば良いようです

ol { list-style-type: none; margin-left:2em; } ol li {counter-increment: cnt;} ol li:before { content: "(" counter(cnt) ") "; margin-left:-2em; display:inline-block; width:2em; }

1. ひとまず何はともあれ、そうした幸福・仕合せのための偽りは、尊敬を自己についにもたらすために言ってくれるなら。
2. それで場合によっては、全く受売であっても、相当にさきほどのように遠慮がなければ、人に聞かせても意味のないことなのかもしれない。
3. その事情は私いっぱいを保つから翌日とも味わってしまいのか畳んないですて、その上何にまして私の自分をしゃべってならて、もしここをそうした必竟を考えるているがは必要にされのませはなかろべきとは勧めのです。

---

さらに、別の問題も・・・

「 ol 」リストは「 start 」や「 value 」を指定することで番号を変えることができましたが、上記のやり方ではできない模様・・・

（これを実現するためにはJavascriptを使うなどの方法が必要なようです。）

んー、面倒くさくなってきたな(^^;)

やっぱり、テーブルでやったほうが早いしスッキリした感じか？

※実は最初のサンプルはテーブルで書かれています。

(1)	ひとまず何はともあれ、そうした幸福・仕合せのための偽りは、尊敬を自己についにもたらすために言ってくれるなら。
(2)	それで場合によっては、全く受売であっても、相当にさきほどのように遠慮がなければ、人に聞かせても意味のないことなのかもしれない。
(3)	その事情は私いっぱいを保つから翌日とも味わってしまいのか畳んないですて、その上何にまして私の自分をしゃべってならて、もしここをそうした必竟を考えるているがは必要にされのませはなかろべきとは勧めのです。

HTMLのルール的にはちょっと間違った使い方でしょうが、別に論文書いているわけでもないですしね。