説明付きリスト

このページの記事目次 (タグ: 説明付きリスト の検索結果)

執筆ガイドライン6、テーブルタグを止めてdl、dt、ddタグを使う

これまで、下記のような見た目のページを作る時、エクセルのテーブルをぺたっと貼っていました。コードが読みにくくて仕方がないので、何か簡潔化する方法がないかと探していたところ、定義リストもしくは説明付きリストと呼ばれるタグの存在を発見いたしました。
dl-dt-ddサンプル


我ながら大変無知でお恥ずかしいのですが、この1年半エクセルテーブルのコピペで、人間が理解できればよし!と思っておりました。定義リスト(説明付きリスト)にするとGooglebot(以下、ロボ子)にとっても意味があるリストになるそうです。


<dt></dt>で囲まれた言葉を、後続の<dd>で説明するそうです。1つの<dl>に対して複数の説明<dd>を持つこともできるそうです。ふむふむ。



当ブログでの定義リスト


class付きのHTML、CSSはどれもうまく行かなかった…


今だにCSSの書き方がよくわかっていない為か、class付きの.yokonarabi dl {などのクラス付きのCSSとHTMLはどれも全く上手くいきませんでした。class付きの記述がうまく行けば、映画用、ゲーム用などと、定義リストの見た目を内容ごとに変えることができて楽しいかなと思ったのですが断念いたしました。


横並びにしたかったので、それが達成できたのが今回の収穫です。



HTMLは普通に書く


<dl>
<dt>言葉1</dt>
 <dd>説明1</dd>
<dt>言葉2</dt>
 <dd>説明2</dd>
<dt>言葉3</dt>
   <dd>説明3</dd>
</dl>


普通です。



CSSにはheightを追記したらちゃんと並んだ


.entry_m dt {
padding-top : 0.2em;
padding-bottom : 0.2em;
padding-left : 0.2em;
width : 10em;
height:1;
float : left;
clear : left;
}
.entry_m dd {
padding-top : 0.2em;
padding-left : 0.2em;
padding-right : 0.2em;
padding-bottom : 0.2em;
width : 40em;
height:1;
margin-left : 1em;
}


本当に理解に苦しむのですが、Bloggerにはサクッと入るコードが、FC2では言葉(=dt)説明(=dd)の高さが少しずつずれる、もしくはCSSが認知されないなどの怪奇現象が起きました。ようやく有効に見えるコードが下記の通りで、他のコードとの違いはよく分かりません。敢えて言うならheightを追加したことかな??なんて勘ぐっているのですが、結果オーライで検証終了しました。


他のことをしている時にふと理解できるようになったりするといいな~。なんて、運を天に任せております。



当ブログでの執筆ガイドライン


項目名と説明文のような形式をとる場合には、dl、dt、ddタグを使い、ロボ子にも構成情報を共有する。

スポンサーサイト
申し訳ありません。 お探しの記事は現在、この ユーザータグ (Keyword) を設定していない可能性があります。 右の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。