ブログの本文を補足するために注釈をつけることはあるが、<ol>タグ（Ordered List）や<ul>タグ（Unordered List）のtype属性には※のスタイルがないため、やむを得ず<p>タグで囲んだ段落の先頭に※文字をつけたりすることはないだろうか？
実はスタイルシートで一工夫するだけで※文字を表示することができる。当然、<ol>タグや<ul>タグで使用可能だ。
今回は注釈表示をきれいに見せるためのスタイルシートのテクニックについて触れようと思う。
スタイルシートで注釈を表現する方法
<ol>タグや<ul>タグのtype属性には※のスタイルがないことは先にも触れたが、これらのタグを使いつつ、注釈を表現するにはマーカーの指定を無しにして「before」疑似要素を使うことで解決する。例えば以下のような感じだ。
ul.asterisk {
list-style-type: none;
}
ul.asterisk li:before {
content: "※";
}
とりあえずこれだけでも要件は満たすものの、できればもう少し見た目を整えたいところだ。しかし、<ul>タグでは表現できるが、<ol>タグではむずかしいものがある。それが、注釈を折り返しで揃えることだ。実際にどのようになるか、見ていただきたい。
<ul>タグで折り返しを揃えない
- 注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈
- 注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈
&lt;ul class="asterisk1"&gt; &lt;li&gt;注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈&lt;/li&gt; &lt;li&gt;注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈&lt;/li&gt; &lt;/ul&gt;
/* ※印つきUL（折り返し揃えない） */
ul.asterisk1 {
list-style-type: none;
}
ul.asterisk1 li:before {
content: "※";
}
<ul>タグで折り返しを揃える
- 注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈
- 注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈
このサンプルでは<li>タグに text-indent: -1em; を加えることで注釈文字を外に出したような状態にしている。こうすることで文字列が折り返した場合でもきれいに揃って見えるようになる。
&lt;ul class="asterisk2"&gt; &lt;li&gt;注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈&lt;/li&gt; &lt;li&gt;注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈&lt;/li&gt; &lt;/ul&gt;
/* ※印つきUL（折り返し揃える） */
ul.asterisk2 {
list-style-type: none;
}
ul.asterisk2 li {
text-indent: -1em;
}
ul.asterisk2 li:before {
content: "※";
}
<ol>タグで折り返しを揃えない
- 注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈
- 注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈
このサンプルでは番号付き注釈を表現している。<ol>タグ内で counter-reset: number; によりカウンタ値をリセット（=0）、<ll>タグ毎に counter-increment: number; で加算された値を注釈文字とあわせて表示している。
&lt;ol class="asterisk1"&gt; &lt;li&gt;注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈&lt;/li&gt; &lt;li&gt;注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈&lt;/li&gt; &lt;/ol&gt;
/* ※印つきOL（折り返し揃えない） */
ol.asterisk1 {
counter-reset: number;
list-style: none;
}
ol.asterisk1 li:before {
counter-increment: number;
content: "※"counter(number)" ";
}
<ol>タグで折り返しを揃えた風１
- 注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈
- 注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈
<ul>タグと同じ要領で text-indent: -2em; を加えて注釈文字を外に出したような状態にしているが、全角と半角が混在しているせいか、折り返しが揃わない。text-indentの値を調整すれば揃ったような感じになるかもしれないが、閲覧環境に左右されるため100%の状態にはならないと考えた方が良いだろう。
&lt;ol class="asterisk2"&gt; &lt;li&gt;注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈&lt;/li&gt; &lt;li&gt;注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈&lt;/li&gt; &lt;/ol&gt;
/* ※印つきOL（折り返し揃えた風１） */
ol.asterisk2 {
counter-reset: number;
list-style: none;
}
ol.asterisk2 li {
text-indent: -2em;
}
ol.asterisk2 li:before {
counter-increment: number;
content: "※"counter(number)" ";
}
<ol>タグで折り返しを揃えた風２
- 注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈
- 注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈
上のサンプル「<ol>タグで折り返しを揃えた風１」とは異なる手法で番号付き注釈を表現している。list-style-type を decimal-leading-zero とすることで番号を表示し、注釈文字を番号より前の位置に表示するよう調整したものだ。
この方法だとブラウザ（使用されるフォント）によってはきれいに揃っているように見える場合があるが、揃わないこともあるため注意が必要だ。
&lt;ul class="asterisk3"&gt; &lt;li&gt;注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈&lt;/li&gt; &lt;li&gt;注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈注釈&lt;/li&gt; &lt;/ul&gt;
/* ※印つきOL（折り返し揃えた風２） */
ol.asterisk3 {
padding-left: 3em;
list-style-type: decimal-leading-zero;
}
ol.asterisk3 li {
text-indent: -3em;
}
ol.asterisk3 li:before {
content: "※ "
}
まとめ
<ol>タグで折り返しを揃えた風１と２のサンプルは、どうにかして数字付き注釈を折り返して綺麗に表示できないものかと試行錯誤したものだが、結局のところ私の知識では納得できる状態には出来なかった。
<li>タグの中身をさらにブロック要素などで囲んだうえでスタイルシートの定義で無理やり折り返さないようにすることは出来ると思うのだが、見た目を優先するために余計なタグを埋め込むのはマークアップとしては適切ではないと思われるため、私の方針としては取り組まないことにした。
見た目を優先するなら折り返しが揃った方が良い感じだが、数字付きの注釈の場合はそれが困難なため、無理に揃えなくても良いのではないだろうか、というのが私個人の意見だ。
ここにあげたサンプルが注釈表示の参考になれば幸いである。
コメント