2007年04月25日
定義リストを使ってテーブルっぽい表示を。
テーブルレイアウトを使えば簡単なことでも、その用途を考えるとリストタグで設定した方が適切、ってことはよくあります。デザインの時点でCSSレイアウトを考慮できれば作業もスムーズにいくのですが、コーディングのみの依頼となるとそうもいきません。もっともコーディングのためにデザイン性を規制してしまうのも如何なものかと思いますが。
そこで今回はdlタグ（定義リスト）を使ってテーブルっぽい表示になる方法を紹介します。
CSSレイアウトは、テキストを横に並べるのがあまり得意とは言えません。できないことはないのですが、場合によってはテーブルレイアウトを使用したほうが手っ取り早く、より簡潔に記述できることもあります。それでもCSSレイアウトを使いたい方にはうってつけの方法です。
次のサンプルをご覧ください。
HTMLサンプル =========================================
<dl>
<dt>見出し</dt>
<dd>内容テキスト</dd>
<dt>見出し</dt>
<dd>内容テキスト</dd>
</dl>
CSSサンプル =========================================
* {
margin:0;
padding:0;
}
dt{
width:4em;
float:left;
}
dd{
margin-left:4em;
}
このサンプルをブラウザで見てみると、テーブルレイアウトのようにテキストが2列に揃って表示されます。仕組みは見ての通り、dtタグに対してfloat指定をして、回り込んだddタグの余白を合わせて設定しているだけです。ホームページ制作の現場において、こういったテキストのレイアウトは頻繁に出てきます。特に「会社概要」なんかのページではお決まりのレイアウトなので、覚えておくと重宝するかもしれません。
ただし、問題もあります。1行で収まるものであれば問題ないのですが、ddタグの内容が改行されて複数行になってしまうとIE6では列が微妙にずれてしまいます。そのため、ハックを使って合わせなければならないので注意が必要です。
私の場合はハックを極力使いたくないので、あっさりとテーブルを使いますけどね。
CSSレイアウトは、テキストを横に並べるのがあまり得意とは言えません。できないことはないのですが、場合によってはテーブルレイアウトを使用したほうが手っ取り早く、より簡潔に記述できることもあります。それでもCSSレイアウトを使いたい方にはうってつけの方法です。
次のサンプルをご覧ください。
HTMLサンプル =========================================
<dl>
<dt>見出し</dt>
<dd>内容テキスト</dd>
<dt>見出し</dt>
<dd>内容テキスト</dd>
</dl>
CSSサンプル =========================================
* {
margin:0;
padding:0;
}
dt{
width:4em;
float:left;
}
dd{
margin-left:4em;
}
このサンプルをブラウザで見てみると、テーブルレイアウトのようにテキストが2列に揃って表示されます。仕組みは見ての通り、dtタグに対してfloat指定をして、回り込んだddタグの余白を合わせて設定しているだけです。ホームページ制作の現場において、こういったテキストのレイアウトは頻繁に出てきます。特に「会社概要」なんかのページではお決まりのレイアウトなので、覚えておくと重宝するかもしれません。
ただし、問題もあります。1行で収まるものであれば問題ないのですが、ddタグの内容が改行されて複数行になってしまうとIE6では列が微妙にずれてしまいます。そのため、ハックを使って合わせなければならないので注意が必要です。
私の場合はハックを極力使いたくないので、あっさりとテーブルを使いますけどね。
