DLを使い分けるときのポイントと、CSSで装飾するときのコツについてまとめました。WordPressでリスト出力をDL対応するときはフィルタで変換します。twitterfacebookhatebugooglepluspocketline最近では論理的にきちっと宣言されたソースのほうがサーチエンジンの好評価を受けるようですね。うちもセマンテックなソースを目指してサイトのHTMLを全面的に見直してる所なんですが、リスト要素の処理でちょっとはまったのでメモしておきます。違い箇条書きなど、論理構造的に似た重みで連なる情報はリストタグを使います。3種類、用途がそれぞれ少しずつ違いますね。リストを作れるタグは以下の3種です。List)定義リスト...リストにタイトルがつけられる使用例は以下の通りです。いきもの<ol><li>カピバラ</li><li>ヤブイヌ</li><li>アルマジロ</li><li>ワラビー</li></ol>【DL】行頭記号はつかず要素がインデントされる<dl><dt>ネコ科の動物</dt><dd>オセロット</dd><dd>ウンピョウ</dd><dd>ライガー</dd><dd>イエネコ</dd></dl>...みたいな感じでDLは一連の文脈でタイトルがつけられるので積極的に使いたいところです。ついてしまいますよね。置換するのはちょっと面倒臭いです。要素の含まれるリストにタイトルをつけることを考えると次のような感じになるでしょうか。比べると、やはりちょっと汚いですね。一連の流れだと宣言するためにDIVで囲ってます。要素を詰め込む【定義リストに普通リストを組み込む】<dl><dt>定義リストに普通リストを組み込む</dt><dd><ul><li>項目1</li><li>項目2</li><li>項目3</li><li>項目4</li></ul></dd></dl>かなーり強引ですが、文法的には間違ってないはずです。これらをノーマライズした状態で表示させると以下のようになるでしょう。UL普通リストにHタグで見出しをつける項目1項目2項目3項目4定義リストに普通リストを組み込む項目1項目2項目3項目4同じように見えて結構違いますね。それぞれ余白の初期値が違うようです。コンソールで余白のずれを確認するHTMLの各要素は、CSS側でリセットしない限りマージンやパディングの初期値を持ちます。それらを考慮しないままに値を入れると思わぬ表示崩れを起こすことがあるので注意します。余白のイメージを確認しておきましょう。行頭のリストスタイル記号が違うだけで余白構造は同じです。CSSで成形するときは上記の違いを念頭に入れて組むと間違いが減りそうですね。表示部まわりの変更をするためでした。タグの処理についても書いておきます。テンプレートのstyle属性で切るカテゴリ一覧の出力時にlistをつけないようにするには、スタイルのパラメータを変更します。