OLに関する質問



0   名前: れい : 2006/06/13(火) 23:56  ID:IlPpCxjP
以下のような出力をしたいと思います。
1. test
1.1 項目1
1.2 項目2
2. test2
2.1 tttt
2.2 xxx

OLタグを使うと、以下のようになります。
1. test
1 項目1
2 項目2
2. test2
1 tttt
2 xxx

他にタグとかありませんか?
ちなみに書いたHTMLは以下とおりです。
<ol>
<li>test</li>
<ol>
<li>項目1</li>
<li>項目2</li>
</ol>
<li>test2</li>
<ol>
<li>tttt</li>
<li>xxx</li>
</ol>

1   名前: 匿名 : 2006/06/13(火) 23:56  ID:zqn32COP
> ちなみに書いたHTMLは以下とおりです。
> <ol>
> <li>test</li>
> <ol>
> <li>項目1</li>
> <li>項目2</li>
> </ol>
> <li>test2</li>
> <ol>
> <li>tttt</li>
> <li>xxx</li>
> </ol>
ol直下にolは置けません。
<ol>
 <li>test
  <ol>
   <li>項目1</li>
   <li>項目2</li>
  </ol>
 </li>
 <li>test2
  <ol>
   <li>tttt</li>
   <li>xxx</li>
  </ol>
 </li>
</ol>


2   名前: Pid ◆byEkK9OALr : 2006/06/13(火) 23:56
/* ol 要素ごとにカウンタを用意 */
ol { counter-reset: item; }

/* リストマーカを消しておく */
li { list-style: none; }

/* li 要素の直前に 1.2.3 のようなテキストを生成し,カウンタを増やす */
li:before {
  content: counters(item, ".");
  counter-increment: item;
}


ただし,上記は Opera くらいしか対応していません(Firefox 1.5 は未確認)。他のブラウザ,特に IE に対応させたければ,不恰好ですが HTML ソースに直接番号を振る[*]しかないと思います。


----
[*] もしも XHTML であれば,クライアント側 XSLT で番号付き ol 要素を自動作成できます(IE,Gecko,Opera,Safari で動作はしますが,まだ不具合も多いのでお勧めはしません)。<?xml-stylesheet?> 命令で以下の XSL を読み込みます。
<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:h="http://www.w3.org/1999/xhtml">

  <xsl:template match="/">
    <xsl:apply-templates/>
  </xsl:template>
  
  <!-- ノード・属性をそのままコピーする -->
  <xsl:template match="@*|node()">
    <xsl:copy>
      <xsl:apply-templates select="@*|node()"/>
    </xsl:copy>
  </xsl:template>
  
  <!-- ol 要素に関しては,li 要素に 1.2.3 のように番号を振っておく -->
  <xsl:template match="h:ol">
    <xsl:element name="h:ol">
      <xsl:apply-templates select="@*"/>
      <xsl:for-each select="h:li">
        <xsl:element name="h:li">
          <xsl:apply-templates select="@*"/>
          <xsl:number level="multiple" count="h:li"/>
          <xsl:text> </xsl:text>
          <xsl:apply-templates/>
        </xsl:element>
      </xsl:for-each>
    </xsl:element>
  </xsl:template>
  
</xsl:stylesheet>


3   名前: れい : 2006/06/13(火) 23:56  ID:IlPpCxjP
匿名さん
回答ありがとうございます。
1.1のようにはならないですが。

Pid ◆byEkK9OALr さん
回答ありがとうございます。
ずいぶん複雑なタグになりましたね
つまりHTMLでは簡単に書けないということですね

4   名前: 匿名 : 2006/06/13(火) 23:56  ID:zqn32COP
複雑なのが嫌なら、いっそこう書けばいいんじゃねーでしょうか?
<dl>
 <dt>1. test</dt>
  <dd>1.1 項目1</dd>
  <dd>1.2 項目2</dd>
 <dt>2. test2</dt>
  <dd>2.1 tttt</dd>
  <dd>2.2 xxx</dd>
</dl>

一覧へ戻る