引き続きWordPress化について取り組んでいますが、やっていた課題の中で表(リスト)を表示させる部分がありました。方法としていろいろとありますが、使い分けがよくわかっていないのと、特にdl(定義リスト)についてはいまいちピンときていないので、少し調べてみました。
今回調べたこと
- dl(定義リスト)について
- tabelについて
- ul/olについて
- 使い分け
dl(定義リスト)について
dl=definition list、定義リストのことです。dlタグの中で定義する言葉(dt=definition term)とその定義の説明(dd=definition dscription)を書いていきます。具体的には・・・
<dl>
<dt>定義する言葉=説明したいこと</dt>
<dd>その定義の説明</dd>
</dl>
複数の言葉を定義する場合は、<dt>~</dt> <dd>~</dd>を複数回書けばOKです。
いろいろと見ていると、ブログのお知らせ(日付とタイトル)を定義リストで書いたりするようです。
tableについて
よくある表を作ることができます。
tableタブの中では、tr(table row)=テーブルの列、th(table header)=テーブルの見出し、td(table data)=テーブルのデータで構成されます。具体的には・・・
<table>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>1行目の見出し1のデータ</td>
<td>1行目の見出し2のデータ</td>
</tr>
<tr>
<td>2行目の見出し1のデータ</td>
<td>2行目の見出し2のデータ</td>
</tr>
</table>
ul/olについて
一番シンプルなリストを作ることができます。数字付のリストならol(ordered list)、数字なしのリストならul(unordered list)を使います。具体的には・・・
<ol>(もしくは<ul>)
<li>一つ目のリスト内容</li>
<li>二つ目のリスト内容</li>
</ol>(もしくは</ul>)
使い分けについて
調べてみると、いろいろなことが書かれていますね。
いろいろと見たうえでの勝手な意見です(笑)が・・・
・簡単なリストや表を作るときは「ul/ol」「table」
・リストが項目と説明といった組み合わせや、一つの項目に対しての説明の時は「dl」
・レスポンシブル対応が必要な場合(横並びのリストを縦並びにするなど)のときは「dl」
こんな感じです!SEO対策を考えると「dl」が有利ということもあるようです。
dlの使い方がやっぱり理解が難しいです。こらからもいろいろと作りながら学習していきたいと思います!
コメント