olのリスト形式について｜番号の形を変えることはできますか？

お世話になります。

olリストで出力するとliの先頭に、
１．
２．
３．
と表示されると思うんですが、これを
①．
②．
③．
などの別の形に変えることはできますか？
また、そういったプロパティがなければ、その番号を指定するようなセレクタはありますか？

初歩的な質問なのかもしれませんが、よろしくお願いいたします。

行動規範の内容に同意します

回答3件

ベストアンサー

無理やり書体を指定したり（書体が入っていないと見えませんが）、
jQueryでやる方法もありそうですが、
[作りました]olの通し番号を丸や四角付きにするjQueryプラグイン「orderedList.js」

CSSで無理やりやるならこんな感じですかね？
※3桁になると丸が楕円になりますが…

lang
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>こんなんとか？</title>
6<style>
7/*---------------------------------------
8Reset
9----------------------------------------*/
10html, body, ol, li {
11	font-size:100%;
12}
13
14body {
15	font-family:"メイリオ", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック",Verdana, Arial, Helvetica, sans-serif;
16	font-size:13px;
17	*font-size:small;
18	*font:x-small;
19	font-size:small\9;
20	line-height:1.5;
21}
22ol{
23	margin:0 auto;
24	width:180px;
25	counter-reset:number;
26	list-style:none;
27	list-style-position:outside;
28}
29ol li{
30	padding:5px 5px 5px 1.5em;
31	border-bottom:1px dotted #CCC;
32	position:relative;
33}
34ol li::before{
35	border:1px solid #333;
36	border-radius:50%;
37	width:1.5em;
38	height:1.5em;
39	counter-increment:number;
40	content:counter(number);
41	text-align:center;
42	font-size:75%;
43	position:absolute;
44	left:0;
45}
46</style>
47</head>
48<body>
49<ol>
50    <li>メラ</li>
51    <li>メラミ</li>
52    <li>メラゾーマ</li>
53    <li>メラガイアー</li>
54    <li>イオ</li>
55    <li>イオラ</li>
56    <li>イオナズン</li>
57    <li>イオグランデ</li>
58    <li>ヒャド</li>
59    <li>ヒャダルコ</li>
60    <li>マヒャド</li>
61    <li>マヒャデドス</li>
62    <li>返事がない、ただの屍のようだ。</li>
63</ol>
64</body>
65</html>

投稿2015/05/11 08:37

編集2015/05/11 09:29

webnohito

総合スコア88

退会済みユーザー

2015/05/11 12:00

このサイトすごいですね・・。今制作しているサイトに導入してみます。

行動規範の内容に同意します

丸数字は単純には実現できません。
以下を参考にするとどうでしょうか?
[CSS] olの数字をCSSでいい感じに装飾する方法

投稿2015/05/11 06:41

orange0190

総合スコア1698

list-style-type で出来ますが、丸数字はなさそうですね。

list-style-type - CSS | MDN

投稿2015/05/11 06:25

編集2015/05/11 09:57

ngyuki

総合スコア4514

sounisi5011

2015/05/11 09:44

リンク先のURLがおかしいのでアクセスできませんね。 (恐らく、Markdown記法でリンクにタイトルをつけようとした結果、teratailが非対応だったためにおかしくなったのでしょう) 正しいURLは以下になります: https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type