HIRASE CONNECTION WK

programming collection

目次

Blog 利用状況

ニュース

あわせて読みたいブログパーツ

書庫

日記カテゴリ

Link Collection

[HTML/CSS] もっとシンプルに定義リストdt ddを横並び

HTMLとCSSだけで、定義リスト(dt/dd)を横並びに表示するのは、結構面倒です。

定義(dd)の方が固定長である必要があったりします。

そんなこんなで、CSS2から追加された「display: table」を使ったシンプルな横並びの方法を実現してみました。

下記のコードを参照される際は、必ずコメント欄もご参照ください。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
    <title>Simple Definition List</title>
    <style type="text/css">
	dl        { display: table; }
	dl dt.row { display: table-row; }
	dl dt     { display: table-cell; padding-right: 0.4em; }
	dl dd     { display: table-cell; }
	</style>
</head>
<body>
    <dl>
        <dt class="row" />
        <dt>要勤務日数</dt><dd>20日</dd>
        <dt class="row" />
        <dt>勤務時間</dt><dd>480時間</dd>
    </dl>
</body>
</html>

対応ブラウザは、IE8、Firefox3、Saferi3 です。たぶん、Opera も行けます。

投稿日時 : 2008年7月19日 0:28

コメントを追加

# re: [HTML/CSS] もっとシンプルに定義リストdt ddを横並び 2008/07/22 14:28 シャノン

dl 直下に div はどうかと思います。

# re: [HTML/CSS] もっとシンプルに定義リストdt ddを横並び 2008/07/22 15:32 T.Hirase

あぁ、その通りで。。ぜんぜん、Strictでなかったです。
以下に修正しておきます。
[Before]
<div class="row"><dt>要勤務日数</dt><dd>20日</dd></div>
<div class="row"><dt>勤務時間</dt><dd>480時間</dd></div>

[After]
<dt class="row" /><dt>要勤務日数</dt><dd>20日</dd>
<dt class="row" /><dt>勤務時間</dt><dd>480時間</dd>

# re: [HTML/CSS] もっとシンプルに定義リストdt ddを横並び 2008/07/22 18:59 シャノン

うーん…
その空 dt はどうなのでしょう。
DTD 的には OK なのですが、テーブルっぽく見せるためだけの要素ですよね。
敢えて table ではなく dl を使おうという時にやることではないと思います。

# re: [HTML/CSS] もっとシンプルに定義リストdt ddを横並び 2008/07/22 21:54 T.Hirase

いえ、空 dt は、DTD 的にはアウトのようです(W3C Validatorは通りますけど)。

「相互運用性のためには,空要素タグは,EMPTYとして宣言された要素には
 必ず使用しなければならず,またこれ以外の要素には使用しない。」
(from "拡張可能なマーク付け言語 (XML) 1.0"
   - "3.1 開始タグ,終了タグ及び空要素タグ" より)

でも、「相互運用性のため」は「拘束力はもたない推奨事項」を意味しているそうで、
やはり、DTD 的には OK かもしれませんが。。


で、空の dt 要素を見栄えのためだけに挿入するのはどうかという点については、
自分も肯定的ではありません(自分でやっておいて、アレですが)。
(<P></p>で改行していくようなものですものね。)

じゃぁ、後はどうすればいいのかっていうと、、
やはり、XHTML + CSS だけでは難しそうです。
table 化すると、定義リストであるという意志が薄れてしまいますし。
じゃあ、JavaScript でレイアウトを動的に書けばいいのかっていうと、
それも違うような気がしますし。。。

とか色々改めて考えてはみたのですが、
やっぱり何も考えずにHTML自体が拡張されるまでは、
ちょっと、不適格なHTMLで書いていきます。

# re: [HTML/CSS] もっとシンプルに定義リストdt ddを横並び 2008/07/23 0:27 シャノン

定義リストにこだわる必要もないんじゃないかと思います。
ぶっちゃけ、定義リストは一次元の情報しか書けない貧弱なデータ構造です(たとえば、過去3カ月分の勤務時間の一覧なんてのは定義リストでは書けません)。
table をレイアウトのために使うのは NG ですが、あらゆる table を撲滅すべきではありません。
table にも少なからず定義リスト的な性質はあり、それを意識して使う分には table でまったく問題ないと思います。

タイトル  
名前  
URL
コメント