久しぶりのエントリーです。自分のもので恐縮ですが、ウェブログの方のエントリー
で著作物の引用をしようとした際に、オリジナルがそうであったのでリスト番号付きで文章を引用しようと思いました。引用したい文章は、143節から150節までなので、OL要素を用いてリスト番号を付けようかなと。しかし、任意の番号からリスト番号を割り当てる方法を知らなかったので(普通は、1,2,3,...と割り振られる)、調べたついでにエントリーとして残しておきます。
HTML4.01 strictより古い(あるいはTransitional)仕様では、(非推奨ながら)OL要素にstart属性があるので、下の例のように任意の番号から始めることができます。
<ol start="143"> <li>パリ</li> <li>ストラスブール</li> <li>ブリュッセル</li> <li>ロンドン</li> </ol>
しかしながら、HTML4.01 strict ～ XHTML1.0 strictでは、このstart属性が(なぜか)廃止されています。CSSで指定可能だからなのか、その辺りの背景は知りませんが、とにかく廃止されています。ppBlogでは、基本的にXHTML1.0 strict相当でHTMLソースを生成しているので、あまり気楽にはstart属性を使えません(例えば、W3CのValidator にかけると誤った使用とのエラー表示になる)。なので、どういう指定方法があるのか調べてみました。
XHTML1.0 strict での対応
大きく2通りのやり方があると思います。ひとつはCSSのみでの制御。もうひとつはJavaScriptを用いての制御です。具体的なサンプルを見てみましょう。このサンプルでは2通りでのやり方を載せています。
→http://p2b.jp/demo/any-numbering-ordered-list1.html
CSS2.1のみで任意のリスト番号を指定することができますが、counter-resetや擬似要素の:beforeなどを使う必要があり、IE7以下では対応していません。まだまだIE6/7を無視できない現状、気軽に使えませんし、何より使い方が分かりづらい。
また、CSSのみでの制御では、上のスクリーンショットにあるように、リスト内容が長く折り返しが生じる場合、li:beforeによって挿入されたリスト番号が文章に埋もれてしまい、視認性に欠けます。
2つ目は、JavaScriptで制御する方法です。比較的簡単に実装でき、どのブラウザも対応しています。また、下のショットのように、CSSのみでやる場合と違って、リスト番号はOL要素本来のリスト表示を使うので、リストの数字が文章に埋もれることはないです。
function numberingStart(){
document.getElementById("js-way").start = 143; // LI要素のstart属性を指定
}
HTML5での対応
さて、HTML5では、どうやらOL要素のstart属性は復活しそうな感じ です。なので、HTML5にしてしまえば、とても簡単に実装できます。このエントリーの最初に書いたように記述すればOKです。HTML5化ですが、乱暴にいえば、冒頭のDOCTYPE宣言を以下のようにすれば良いです。
<!DOCTYPE html> /* HTML5のDOCTYPE宣言はすごくシンプル */
簡単ですね。そのうちppBlogもHTML5化予定ではあります。HTML5でのサンプルを挙げておきます。ValidなHTML5です。
→http://p2b.jp/demo/any-numbering-ordered-list2.html
ちなみに、CSSのみでのやり方では、counter-reset, li:beforeなどを用いてますが、これらのプロパティーは、OL要素に限らずH2要素など、いろんな要素に使用可能です。
→参考 http://www.w3.org/TR/CSS2/generate.html#counters
最後にですが、最初に挙げたウェブログでのエントリーでは、JavaScriptで指定してます。記事のテキストエリアで以下のように記述しています。
[script]
oParts.start(function(){ o('#Buddha').$.start = "143"; });
[/script]
まとめ
XHTMLなページが多い現状、廃止されたOL要素のstart属性は使うのに抵抗がある。代用としてCSS2.1のcounter-resetなどで実現できるが、その指定はややこしく、またstart属性の完全な代用ではないし、何よりIE6/7が未対応。JavaScriptでstart属性を指定するやり方は、ややトリッキーではあるが、すべてのブラウザで意図通りに指定可能である。
次世代のHTML5なページにすれば、OL要素のstart属性が問題なく使えるようだし、現状のブラウザでも問題ない。
Y:
ALL:
Comments