Help us understand the problem. What is going on with this article?

入れ子を想定としてOL要素のリスト番号にローマ数字や括弧などを用いる

More than 1 year has passed since last update.

リスト番号にローマ数字や括弧を

数学的な文書をHTMLやEPUB3に取り込む際に,順序リストのCSS設定をどうすべきかをいつも考えてしまいます.例えば,次のような順序リストの入れ子を考えます.

<p>次はいずれも同値である.</p>

<ol class="propositions">
  <li>空でない集合で構成された任意の集合族に対して,そららの直積集合は空ではない.</li>
  <li>帰納的な順序集合には極大元が存在する.ここで,順序集合Aが帰納的とは,その任意の空でない全順序部分集合の上限がAに存在するときにいう.</li>
  <li>任意の集合は整列集合にできる.ここで,整列集合とは
    <ol class="axiom-well-ordered-set">
      <li>全順序集合である</li>
      <li>任意の空でない部分集合は最小元をもつ</li>
    </ol>
    を満たす順序集合のことである.
  </li>
</ol>

このHTMLで次のようなレンダリングを実現したいとします.

スクリーンショット 2017-07-16 23.12.09.png

ポイントは

  • リスト番号にローマ数字(など)を用いたい
  • リスト番号に括弧などの装飾をしたい
  • その際,i),ii)などを右に寄せたい
  • li要素の内容が改行されても,リスト番号の下に文章がこないようにする.
  • 順序リストの入れ子を想定

このために次のようなcssを組みました.

/*ol要素の共通設定*/  
ol.propositions, ol.propositions ol{
  padding-left: 1em; /*入れ子が起こるたびにインデント.0でもよいと思う*/
}

ol.propositions li{
  list-style-type:none; /*標準の番号を消す*/
  margin-left: 3em;     /*下のmargin-leftの符号違いを設定*/
}

ol.propositions li:before{
  display: inline-block; 
  text-align: right; /*i), ii)などを右寄せさせるため*/
  width: 2em;        /*リスト番号の幅*/
  margin-right: 1em; /*リスト番号と文章の間隔*/
  margin-left: -3em; /*上の2つと足して0になるように設定*/
}

/*カウンターの設定(olの階層ごとに設定)*/
ol.propositions>li{
  counter-increment: level1; /*もう少しセマンティックなネーミングはないか……*/
}

ol.propositions>li:before{
  content: counter(level1, upper-roman)"."; /*大文字のローマ数字*/
  font-weight: bold;
}

ol.propositions>li>ol>li{
  counter-increment: level2; /*同上*/
}

ol.propositions>li>ol>li:before{
  content: counter(level2, lower-roman)")"; /*小文字のローマ数字*/
}

意外と知られていない(?)のが,counter関数の第2引数に,ローマ数字にするかなどのlist-style-typeが指定できるということです.ここを省略するとアラビア数字になります.list-style-typeにどういうものがあるかは,list-style-type -CSS | MDNなどをご覧ください.

各要素がどのような配置になっているかは,次のスクリーンショットでなんとなくイメージしてください.

スクリーンショット 2017-07-16 23.12.17.png

ここで個別にリストの番号を変更したい場合は,class属性を付加して設定します.例えば,ol.axiom-well-ordered-setに次のような設定をします.

/*特定のリスト番号を変えたい時*/
ol.axiom-well-ordered-set>li{
  margin-left:5em;   /*下のmargin-leftの符号違いを設定*/
}
ol.axiom-well-ordered-set>li:before{
  content: "WO"counter(level2)"."!important; /*ここだけ!importantが必要?*/
  font-weight: bold;
  width: 4em;         /*リスト番号の幅を変更する場合*/
  margin-right: 1em;  /*リスト番号と文章の間隔*/
  margin-left: -5em;  /*上の2つと足して0になるように設定*/
}

すると次のようなレンダリングになります.

スクリーンショット 2017-07-16 22.59.08.png

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away