制作者の活動(PR)。

堀北真希ちゃんはうさぎの耳が似合うと思って創造した女子大生キャラクタ
主な作品

制作者に依るイラストと動画作品のサンプル

<dl>要素を表みたいに表示するには。

CSSの小技として、<dl>要素(定義リスト)を表のように見せる書き方を解説します。

当サイトでも更新案内など、デフォルトのスタイルシートでそのような表示になるようにした定義リストが幾つもあります。

<dl>要素を表みたいに表示するには・目次。

はじめに。

定義リスト(<dl>要素)をわざわざ表形式で表示させなければならない必然性は確かに無いかも知れません。

先ず、定義リストを表(テーブル)と較べた場合の利点を見てみましょう。

定義リストは記述が容易である

表(テーブル・<table>要素)の場合には

  1. <table>要素
  2. <thead>要素, <tfoot>要素または<tbody>要素(必須ではない)
  3. <tr>要素
  4. <th>要素または<td>要素

と言うように、要素を三重ないし四重にしなければなりません。

一方、定義リストは、

  1. <dl>要素
  2. <dt>要素または<dd>要素

と言うように二重にすれば良いので簡単です。

定義リストは表(テーブル)に較べて遙かにアクセシブルである

表(テーブル・<table>要素)はグラフィカルな環境で、しかもディスプレイの幅が充分に無いと読み易い表示には出来ません。

つまり、表は環境に著しく依存した要素と言えます。

一方、定義リストは上から順番に並べていけば良いだけですのでどんな環境でも分かり易く表示させる事が可能です。

このため、なるべくなら定義リストにした方が書き易く使い易いウェブ文書になると言えます。

一方、グラフィカルで横幅が充分にある環境では、表形式の方が直感的である事は否定出来ません。

このため、

と言うのが望ましいケースがあると思うのです。

今回はそれをCSSでやってみましょう。

おことわり。

仮定するマークアップ。

ここでは、仮定するマークアップとして、以下のようになっているものとします。

この仮定が満たされない定義リストの場合、巧く表示出来ない場合もあり得ます。

二つの方法をご紹介します。

CSSの仕様書に従うだけで良いのであれば、単純な記述で効果を挙げる事も出来るのですが、生憎インターネットエクスプローラ(とサファリ)の実装に問題があるため、背景を指定する場合はこれらの環境では巧く表示出来ない場合があります。

このため、ちょっと複雑な方法も合わせて紹介します。

単純な方法…マージン調整を活用する。

単純な方法とは、<dd>要素のマージンを操作して、直前の<dt>要素の右隣に並べてしまうと言うものです。

全てのCSS対応ブラウザが仕様書に従った実装なら、この方法がベストなのですが、インターネットエクスプローラやサファリで背景色を指定するとおかしな表示になるため、背景色を一切指定しない場合のみ使うべきでしょう。

実際の記述例は以下のようになります。

ここでは、<dt>要素の幅は九文字以内と仮定しております。

dl {
    margin: 0;
    padding: 0;
    border: #ccc solid 1px;
    border-width: 0 1px 1px;
    }

dt {
    margin: 0;
    padding: 0.2em;
    border-top: #ccc solid 1px;
    font-size: 100%;
    line-height: 1.6em;
    }

dd {
    margin: -2.0em 0 0 9em;
    padding: 0.2em;
    border-left: #ccc solid 1px;
    line-height: 1.6em;
    }

ここで大事なのは、<dd>要素の上マージンの値です。

<dt>要素は、文字サイズ(font-sizeプロパティ)が100%、すなわち通常の文字一文字分に対して、

ありますので、<dt>要素の実質的な高さは、

と言う事になります。

従って、後続の<dd>要素は上の余白(marginプロパティ)を-2.0emとしないと<dt>要素に並ばなくなると言う事になります。

また、枠線(borderプロパティ)についてですが、これは<dt>要素で上ボーダを指定し、<dd>要素では直前との<dt>要素との区切りとなる左ボーダを指定する事としております。

そして、下ボーダと右ボーダは<dl>要素での指定となります。

以上のスタイルを実際に表示させると以下のようになるでしょう。

複雑な方法…<dt>要素をフロートさせる。

単純な方法でもCSSの標準に従った実装であれば問題は無いのですが、単純な方法の場合表に背景を指定した際に問題が出る事があります。

単純な方法での問題点。

その問題点とは、表に背景を指定した場合にインターネットエクスプローラとサファリで問題が生じると言うものです。

<dt>要素の背景色を甲色、<dd>要素の背景色を乙色とする場合、<dt>要素は一行と決められているので(そうしないと<dd>要素が一行しか無い場合におかしくなる)、<dt>要素にて背景色を指定すると<dd>要素が一行より高い場合に<dt>要素の二行目以降部分に色が付かなくなるため、<dl>要素に<dt>要素の背景(つまり甲色)を指定し、<dd>要素には直接乙色を指定すると言う事になります。

この場合、

と言う不具合が見出されました。

また、<dt>要素が折返しで二行以上になってしまうと、単純な方法では確実に行のずれが発生します。

問題点を解決するには。

この対策として、別の方法を用いる必要が出てくるのです。

具体的には、<dt>要素にfloatプロパティを当てて、同要素を左にフローティングさせる事です。

しかし、その場合、後続の<dd>要素は単純に廻り込みになってしまうため、<dd>要素が複数行ある場合には<dt>要素の下に内容が廻り込んでしまいます。

これを回避するため、<dd>要素には<dt>要素の幅以上の左余白(marginプロパティ)を設ける事とします。

こうする事で、<dt>要素の下は左余白となるため、後続の<dd>要素のテキストは入り込めなくなります。

実際の記述例は以下のようになります。

ここでは、<dt>要素の幅は九文字以内と仮定しております。

この方法は<dt>要素が折返しで複数行になっても、<dt>要素の行数が<dd>要素の行数を超えなければ問題なく表示出来るメリットがあります。

但し、<dd>要素の幅は<dt>要素の幅を差し引いたものであり、想定している幅を遙かに超えた画面や想定しているフォントサイズををはるかに下廻る場合などに、崩れの原因となる<dd>要素の行数不足(すなわち<dt>要素の行数超過)も起こり得る事は忘れないでください。

dl {
    background: #efe;       /* 実際には<dt>要素の背景色 */
    margin: 0;
    padding: 0;
    border: #ccc solid 1px;
    border-width: 0 1px 1px;
    }

dt {
    clear: left;
    float: left;
    width: 9em;
    margin: 0;
    padding: 0.2em;
    border-top: #ccc solid 1px;
    font-size: 100%;
    line-height: 1.6em;
    }

dd {
    background: #fff;
    margin: 0 0 0 9em;
    padding: 0.2em;
    border-top: #ccc solid 1px;
    border-left: #ccc solid 1px;
    line-height: 1.6em;
    }

以上のスタイルを実際に表示させると以下のようになるでしょう。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com