dl要素で表組み

脚本の台詞とか脚注とか、後は…あんまり使い途ないかもorz

Firefoxが28からflex-flow: row wrap;に対応してくれたのでdl要素で表組みができるようになった。 テストケース


dl {
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
    display: flex;
    flex-flow: row wrap;
}
/* Firefox 24 ESR 用の暫定指定 */
@supports not (flex-flow: row wrap) {
dl {
    display: block;
}
}
dt {
    margin: 1rem 0;
    padding: 0;
    width: 5rem;
    font-weight: bold;
}
dd {
    margin: 1rem 0 1rem 1rem;
    padding: 0;
    width: calc(100% - 6rem);   /* dtの幅やddのmargin-leftなどを引く */
}

dt要素の幅を決め打ちしなければいけないのが難点といえば難点。

Firefox、Chrome、IE11で確認。 flexに対応していないブラウザ(IE10以下や古いSafariなど)や、calc()に対応していないブラウザ(Android4.3以下の標準ブラウザなど)は、通常のdlのレイアウトになる(dd要素にmargin-left: 1rem;を設定しているのでブラウザの初期表示とは異なるが)。

ちなみに、dl要素は会話のマークアップとしては不適切と指摘されているorz

"dl要素で表組み"へのTwitter上でのコメントやRT

4件のツイートがあります。

ツイート 1

ツイート 2

ツイート 3

ツイート 4