Wicker Wings | 素材

term-table設定

基本設定

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

<dl class="term-table">
  <dt>項目１</dt>
    <dd>詳細文章１</dd>
  <dt>項目２</dt>
    <dd>詳細文章２</dd>
</dl>

項目１: 詳細文章１。
項目2: 詳細文章２。

DTが長い場合の設定（１）

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

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

項目名１: 項目名が短いと、初期設定位置にリーダーを表示する。
項目名が長い場合の表示１: 項目名が長いと、詳細文章の一部まで重なる。
項目名が長い場合の表示２: DT要素に"lead"クラス属性を付ける事で、リーダーを表示する。

DTが長い場合の設定（２）

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

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

項目名が長い場合の表示１: 項目名が長いと、詳細文章の一部まで重なる。
項目名が長い場合の表示２: DT要素に"shift"クラス属性を付ける事で、一段下げて表示する。

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

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

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

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

項目１−１
項目１−２: 詳細文章１。
項目２−１
項目２−２: 詳細文章２−１。; 詳細文章２−２。; 詳細文章２−３。
項目３−１
項目３−２
項目３−３
項目３-４: 詳細文章３−１。; 詳細文章３−２。; 詳細文章３−３。
項目４−１
項目４−２
項目４−３
項目４-４: DT数がDD数より多い場合。; DTではなく、DDにshiftクラスを付けた場合の表示例。
項目５: 詳細文章５。

class-table

基本設定

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

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

項目１: 項目１の説明文など。
項目２: 項目２の説明など。文章が長く折り返しが発生しても自動的に行を広げる。
項目３: 項目３の説明文など。; 項目数が少なく、説明文の数が多い場合にも対応。

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

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

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

項目１−１
項目１−２
項目１−３
項目１−４
項目１−５: 項目数が増え、説明文が少ない場合。; 項目数が多く、説明文が少ない場合は、DD要素に"shift"クラス属性を付ける事で、説明文を下部まで広げる。
項目２: 項目２の説明文。