term-table設定

基本設定

DL要素に"term-table"クラス属性を指定してください。

<dl class="term-table">
  <dt>項目1</dt>
    <dd>詳細文章1</dd>
  <dt>項目2</dt>
    <dd>詳細文章2</dd>
</dl>
項目1
詳細文章1。
項目2
詳細文章2。

DTが長い場合の設定(1)

DT要素に"lead"クラス属性を指定することで、リーダーを表示します。

<dl class="term-table">
  <dt>項目名が長い場合の表示1</dt>
    <dd>項目名が長いと、詳細文章の一部まで重なる。</dd>
  <dt class="lead">項目名が長い場合の表示2</dt>
    <dd>DT要素に"lead"クラス属性を付ける事で、リーダーを表示する。</dd>
</dl>
項目名1
項目名が短いと、初期設定位置にリーダーを表示する。
項目名が長い場合の表示1
項目名が長いと、詳細文章の一部まで重なる。
項目名が長い場合の表示2
DT要素に"lead"クラス属性を付ける事で、リーダーを表示する。

DTが長い場合の設定(2)

DT要素に"shift"クラス属性を指定することで、DD要素を一段を下げて表示します。

<dl class="term-table">
  <dt>項目名が長い場合の表示1</dt>
    <dd>項目名が長いと、詳細文章の一部まで重なる。</dd>
  <dt class="shift">項目名が長い場合の表示2</dt>
    <dd>DT要素に"shift"クラス属性を付ける事で、一段下げて表示する。</dd>
</dl>
項目名が長い場合の表示1
項目名が長いと、詳細文章の一部まで重なる。
項目名が長い場合の表示2
DT要素に"shift"クラス属性を付ける事で、一段下げて表示する。

DT、DDが連続する場合の設定

DT要素が連続する場合は、字下げしたいDT要素に"shift"クラス属性を指定することで、DD要素を下にずらします。

DT要素にshiftクラス属性を付けない場合は、対応するDD要素の最後の要素にshiftクラス属性を付ける事で次のDT要素が表状に並びます。

<dl class="term-table">
  <dt class="shift">項目1−1</dt>
  <dt>項目1−2</dt>
    <dd>詳細文章1。</dd>
  <dt class="shift">項目2−1</dt>
  <dt>項目2−2</dt>
    <dd>詳細文章2−1。</dd>
    <dd>詳細文章2−2。</dd>
    <dd>詳細文章2−3。</dd>
  <dt class="shift">項目3-1</dt>
  <dt class="shift">項目3-2</dt>
  <dt class="shift">項目3-3</dt>
  <dt>項目3-4</dt>
    <dd>詳細文章3−1。</dd>
    <dd>詳細文章3−2。</dd>
    <dd>詳細文章3−3。</dd>
  <dt class="shift">項目4-1</dt>
  <dt class="shift">項目4-2</dt>
  <dt class="shift">項目4-3</dt>
  <dt>項目4-4</dt>
    <dd>DT数がDD数より多い場合。</dd>
    <dd class="shift">DTではなく、DDにshiftクラスを付けた場合の表示例。</dd>
  <dt>項目5</dt>
    <dd>詳細文章5。</dd>
</dl>
項目1−1
項目1−2
詳細文章1。
項目2−1
項目2−2
詳細文章2−1。
詳細文章2−2。
詳細文章2−3。
項目3−1
項目3−2
項目3−3
項目3-4
詳細文章3−1。
詳細文章3−2。
詳細文章3−3。
項目4−1
項目4−2
項目4−3
項目4-4
DT数がDD数より多い場合。
DTではなく、DDにshiftクラスを付けた場合の表示例。
項目5
詳細文章5。

class-table

基本設定

DL要素に"class-table"クラス属性を指定してください。

<dl class="class-table">
  <dt>項目1</dt>
    <dd>項目1の説明文など。</dd>
  <dt>項目2</dt>
    <dd>項目2の説明など。文章が長く折り返しが発生しても自動的に行を広げる。</dd>
  <dt>項目3</dt>
    <dd>項目3の説明文など。</dd>
    <dd>項目数が少なく、説明文の数が多い場合にも対応。</dd>
</dl>
項目1
項目1の説明文など。
項目2
項目2の説明など。文章が長く折り返しが発生しても自動的に行を広げる。
項目3
項目3の説明文など。
項目数が少なく、説明文の数が多い場合にも対応。

DT数に対しDD数が少ない場合

DD要素の最後に"shift"クラス属性を指定してください。(DT数がDD数より多い場合、この指定は必須となります。)

<dl class="class-table">
<dt>項目1−1</dt>
<dt>項目1−2</dt>
<dt>項目1−3</dt>
<dt>項目1−4</dt>
<dt>項目1−5</dt>
<dd>項目数が増え、説明文が少ない場合。</dd>
<dd class="shift">項目数が多く、説明文が少ない場合は、DD要素に"<b>shift</b>"クラス属性を付ける事で、説明文を下部まで広げる。</dd>
<dt>項目2</dt>
<dd>項目2の説明文。</dd>
</dl>
項目1−1
項目1−2
項目1−3
項目1−4
項目1−5
項目数が増え、説明文が少ない場合。
項目数が多く、説明文が少ない場合は、DD要素に"shift"クラス属性を付ける事で、説明文を下部まで広げる。
項目2
項目2の説明文。

ダウンロード

ver. 20130118
term-table.css.zip
term-table.css

更新履歴

2013年1月17日
初版公開
2013年1月18日
ver.20130118 公開