質問: CSSでのレイアウトの都合上、 上の並びのものを下の並びに変える必要があるのですが、 が2連続して、が2連続した場合、 1つ目のdtが1つ目のddに対応し、2つ目のdtが2つ目のddに対応したものとして、 マークアップ的に解釈されるのでしょうか? ``` 名前 山田太郎 性別 男性 ``` ``` 名前 性別 山田太郎 男性 ```
回答: The W3C Markup Validation Serviceでチェックするとわかりますが、**HTML5**としては間違っています。 ``` 名前と性別 名前 性別 山田太郎 男性 ``` Validationの結果 > > Error: Element div is missing a required instance of child element dd. > > From line 12, column 3; to line 12, column 8 > > 性別↩ ↩ > Content model for element div: > > If the element is a child of a dl element: one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements. > > If the element is not a child of a dl element: Flow content. > > > Error: Element dd not allowed as child of element dl in this context. (Suppressing further errors from this subtree.) > > From line 13, column 3; to line 13, column 6 > > ↩ 山田太郎 > > Contexts in which element dd may be used: > > After dt or dd elements inside dl elements. > > Content model for element dl: > > Either:Zero or more groups each consisting of one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements. > > Or: One or more div elements, optionally intermixed with script-supporting elements. > > > Error: Element dd not allowed as child of element dl in this context. (Suppressing further errors from this subtree.) > > From line 14, column 3; to line 14, column 6 > > 太郎↩ 男性 > Contexts in which element dd may be used: > > After dt or dd elements inside dl elements. > > Content model for element dl: > > Either:Zero or more groups each consisting of one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements. > > Or: One or more div elements, optionally intermixed with script-supporting elements. > > > `dt`要素は * `dl`要素の内部で`dd`または`dt`要素の前。 * `dl`要素の子である`div`要素内の`dd`または`dt`要素の前。 にしか置けず、`dd`要素は * `dl`要素の内側で`dt`または`dd`の後。 * `dl`要素の子である`div`要素内の`dd`または`dt`要素の後。 としか置けません。(それぞれリンク先のHTML仕様書を参考にしてください。) そのため、正しい解釈をするにはHTML5で構文エラーが含まれる場合の処理に関する仕様(かなり複雑)を確認する必要があり、回答するにはちょっと難しいです。 正しいHTML5にするのであれば、 ``` 名前 性別 山田太郎 男性 ``` のように、`dt`と`dd`を一緒に`div`で囲む必要があります。 さて、上のように修正した場合どう解釈されるかですが、 * **名前**が「名前」かつ「性別」 * **値**が「山田太郎」かつ「男性」 となります。つまり**「『名前』は『山田太郎』です」かつ「『性別』は『山田太郎』です」かつ「『名前』は『男性』です」かつ「『性別』は『男性』です」と言っている**ことになります。(`dl`要素の三番目の例も参考にしてください。) たぶん、やりたいことは、普通に定義リストを使っても下記のようなレイアウトにしたいと言うことでことでしょうか? | 名前 | 性別 | | --- | --- | | 山田太郎 | 男性 | もし、そうであれば、`div`で囲ってfloatすれば可能です。 ``` 名前 山田太郎 性別 男性 ``` ``` dl { overflow: hidden; } dl div { float: left; border: 2px solid #ddd; margin-right: -2px; border-collapse: collapse; } dl div dt { border-bottom: 1px solid #ddd; padding: .5em; background: #f5f5f5; font-weight: bold; } dl div dd { padding: .5em; margin-left: 0; } ``` CodePenでの実行例 ※ Chromeで確認しています。CSSはブラウザ毎に微調整が必要かも知れません。 【注意】上記はHTML5についてのみ述べています。それより前のバージョンのHTMLを使用している場合は、解釈が異なる可能性がありますので、参考にしないでください。