リストマーカーの考察
リストマーカー（CSSのlist-style-typeプロパティ）で迷ったことがありまして
あるHTMLコーディングの仕事において、リストマーカー（CSSのlist-style-typeプロパティ）について迷うことがありました。それはホームページの利用規約や個人情報保護方針のような、条文タイプのテキストをHTMLコーディングするときに発生しました。通常、条文タイプのテキストでは番号リスト（HTMLタグ : ol）でマークアップします。条文には番号（順番）があり、これが重要なためです。
序列のあるリストは、OL要素で生成される。レシピのように、順番が重要である情報を含むべきである。（HTML 4仕様書邦訳計画補完委員会より）
こういうテキストのお話
番号リストでマークアップされたテキストは、ブラウザによって各条文の先頭に「1.」「2.」のように連番が振られて表示されます。ここで問題が発生しました。原稿には「(1)」「(2)」のように括弧付きの連番がふられています。また条文のなかには「2.(1)(2)を除いて〜」のように条文番号を括弧付きの連番で参照するものが含まれています。
現状で広く使われているCSS2.1のlist-style-typeプロパティで表現できるのは、数字順（「1.」「2.」）やアルファベット順（「a.」「b.」）など限られた表記です。「(1)」「(2)」を上手く表現することができません（CSS3では可能になりますが、対応しているブラウザが限られます）。
テキスト表記を修正しつつ標準の「1.」「2.」でいくのか、デザインに忠実に「(1)」「(2)」を何とか実装するのか、悩ましいところです。
「(1)」「(2)」を実現するには…
「1.」と「(1)」のどちらがベターかを考える前に、「(1)」を実装する方法を考えます。方法としては下記のパターンがあります。いずれもlist-style-type:noneでリストマーカー（「1.」）をオフにしておきます。
- 「(1)」をテキストで先頭に入力し、paddingとpositionやtext-indentなどで「(1)」を突き出す
- 「(1)」を画像で作成。背景画像として配置（通常のリストマーカーを画像化する方法）
Yahoo! Japanでも採用されるように前者はベタですが確実。難点はCSSをオフにした場合にデフォルトの「1.」と後付の「(1)」が両方表示され、「1.(1)〜」と表示されることです。後者はHTMLがクリーンでスマートな実装のようですが、工数がかかります。条文の数だけ画像もCSS設定も用意する必要があるからです。また、この場合はCSSをオフにすると「1.」と表示されます。
HTMLコーディングのときに考えていること
HTML 4.01 vs HTML 5 illustrated
HTMLだけを考えたとき、デザインで「(1)」となっているものを「1.」に置き換えられればそれがベストです。しかし個人情報保護方針などはホームページだけでなく、企業内で広く共有される文書です。法務に関わるようなこれらの文書を、ホームページの表現上の都合で書き換えることが可能でしょうか。多くの場合、クライアントの内部調整に労力がかかり、全体の進行にも影響がでます。労力の割に誰も得しないわけで、そこまでするほどのところかは明らかですよね。
結論を言えば、今回の仕事では「(1)」をliタグ内のテキスト方式で実装しました。「1.」は文書の変更を伴うのでNG。「(1)」をテキストにするか背景画像にするかについては、まずは背景画像で実装しました。その後クライアントから「テキストで」との要望が出たので、最終的にはテキストでの実装となりました。
HTMLコーディングに携わるものとしては、マークアップの品質にはこだわりたいところです。現場の技術者としては、CSSやJavaScriptがオフの場合も含めて情報が正しく伝わるように、HTMLやCSSをクリーンでバリッド（ルールに適合している状態）に保つように制作します。これは制作者の使命ですね。とは言え、ときには優先すべきものはそれではないことも考えておく必要があります。
「誰が読むのかなぁ」と思うような規約のページでも、現場の制作者はこれだけいろいろと考えていることをご理解いただければ幸いです。
