ppBlog Warning: LINE 1117 of utils.php: preg_match(): The /e modifier is no longer supported, use preg_replace_callback instead

OLリスト要素の番号を制御したい

OLリスト要素の番号を制御したい

category-icon

 久しぶりのエントリーです。自分のもので恐縮ですが、ウェブログの方のエントリーLink で著作物の引用をしようとした際に、オリジナルがそうであったのでリスト番号付きで文章を引用しようと思いました。引用したい文章は、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のValidatorLink にかけると誤った使用とのエラー表示になる)。なので、どういう指定方法があるのか調べてみました。

XHTML1.0 strict での対応

 大きく2通りのやり方があると思います。ひとつはCSSのみでの制御。もうひとつはJavaScriptを用いての制御です。具体的なサンプルを見てみましょう。このサンプルでは2通りでのやり方を載せています。

      →http://p2b.jp/demo/any-numbering-ordered-list1.htmlLink

 CSS2.1のみで任意のリスト番号を指定することができますが、counter-resetや擬似要素の:beforeなどを使う必要があり、IE7以下では対応していません。まだまだIE6/7を無視できない現状、気軽に使えませんし、何より使い方が分かりづらい

shot1
CSSのみで制御。リスト番号が文字に埋もれて見にくい。

 また、CSSのみでの制御では、上のスクリーンショットにあるように、リスト内容が長く折り返しが生じる場合、li:beforeによって挿入されたリスト番号が文章に埋もれてしまい、視認性に欠けます。

 2つ目は、JavaScriptで制御する方法です。比較的簡単に実装でき、どのブラウザも対応しています。また、下のショットのように、CSSのみでやる場合と違って、リスト番号はOL要素本来のリスト表示を使うので、リストの数字が文章に埋もれることはないです。

shot2
JavaScriptで指定。リスト番号は文章と独立していて視認性に優れる。
 スクリプトが無効な環境でも、リスト番号自体は表示されるのでCSSのみでの方法より良いのではと考えます(もっとも番号は1から振られますが)。
function numberingStart(){
 document.getElementById("js-way").start = 143; // LI要素のstart属性を指定
}

HTML5での対応

 さて、HTML5では、どうやらOL要素のstart属性は復活しそうな感じLink です。なので、HTML5にしてしまえば、とても簡単に実装できます。このエントリーの最初に書いたように記述すればOKです。HTML5化ですが、乱暴にいえば、冒頭のDOCTYPE宣言を以下のようにすれば良いです。

<!DOCTYPE html>  /* HTML5のDOCTYPE宣言はすごくシンプル */

 簡単ですね。そのうちppBlogもHTML5化予定ではあります。HTML5でのサンプルを挙げておきます。ValidなHTML5です。

      →http://p2b.jp/demo/any-numbering-ordered-list2.htmlLink

 ちなみに、CSSのみでのやり方では、counter-reset, li:beforeなどを用いてますが、これらのプロパティーは、OL要素に限らずH2要素など、いろんな要素に使用可能です。

      →参考 http://www.w3.org/TR/CSS2/generate.html#countersLink

 最後にですが、最初に挙げたウェブログでのエントリーでは、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属性が問題なく使えるようだし、現状のブラウザでも問題ない。

— posted by martin at 03:42 am   commentComment [0]  pingTrackBack [0]

この記事に対する TrackBack URL:

設定によりTB元のページに、こちらの記事への言及(この記事へのリンク)がなければ、TB受付不可となりますのであらかじめご了承下さい。

コメントをどうぞ。 名前(ペンネーム)と画像認証のひらがな4文字は必須で、ウェブサイトURLはオプションです。

ウェブサイト (U):

タグは使えません。http://・・・ は自動的にリンク表示となります

:) :D 8-) ;-) :P :E :o :( (TT) ):T (--) (++!) ?;w) (-o-) (**!) ;v) f(--; :B l_P~

     
T: Y: ALL: Online:
Created in 0.0057 sec.
prev
2024.12
next
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31