[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
定義リスト（dl,dt,dd）を使いこなす
ozonです。
これまでサイトマップなどを作るときにリスト（ul,li）を使ってたが、
今後は定義リスト（dl,dt,dd）を使っていこうと思う。
この２つの違い、具体例で示そう。
以下のようなメニューを作るとする。
国産メーカー
・トヨタ
・ホンダ
・ニッサン
仮に通常のリストでコーディングすると、国産メーカーの行は
< h3 >などでマークアップし、トヨタ以下は< li >となる。
これはこれで問題無いのだが、構造上、< h3 >と< li >は無関係だ。
アウトプットでは見出しと項目のように見えるが、コーディングの
htmlの構造上では、見出しと項目は無関係だ。
一方で、定義リストを使った場合、全体を< dl >でくくったうえ、
国産メーカーは< dt >、トヨタ以下は< dd >でマークアップする。
メニュー全体が< dl >の傘下に置かれるので、見た目はもちろん、
htmlの構造的にも非常に良い。
つまり、コードを見ただけで、出力がイメージできるってコトだな。
定義リストは、上記のようなメニューに使えるだけでなく、
「日付と出来事」、「用語とその説明」など、日記や用語集などの
ページにも使える。
これまでサイトマップなどを作るときにリスト（ul,li）を使ってたが、
今後は定義リスト（dl,dt,dd）を使っていこうと思う。
この２つの違い、具体例で示そう。
以下のようなメニューを作るとする。
国産メーカー
・トヨタ
・ホンダ
・ニッサン
仮に通常のリストでコーディングすると、国産メーカーの行は
< h3 >などでマークアップし、トヨタ以下は< li >となる。
これはこれで問題無いのだが、構造上、< h3 >と< li >は無関係だ。
アウトプットでは見出しと項目のように見えるが、コーディングの
htmlの構造上では、見出しと項目は無関係だ。
一方で、定義リストを使った場合、全体を< dl >でくくったうえ、
国産メーカーは< dt >、トヨタ以下は< dd >でマークアップする。
メニュー全体が< dl >の傘下に置かれるので、見た目はもちろん、
htmlの構造的にも非常に良い。
つまり、コードを見ただけで、出力がイメージできるってコトだな。
定義リストは、上記のようなメニューに使えるだけでなく、
「日付と出来事」、「用語とその説明」など、日記や用語集などの
ページにも使える。
PR
アクセスランキング
成果履歴
2012/02 642,703円
2013/01 668,780円
2012/12 331,230円
2012/11 247,542円
2012/10 288,633円
2012/09 314,480円
2012/08 237,926円
2012/07 181,065円
2012/06 253,489円
2012/05 665,464円
2012/04 452,864円
2012/03 554,660円
2012/02 386,575円
2012/01 348,123円
2011/12 243,519円
2011/11 280,782円
2011/10 233,750円
2011/09以前は省略
COMMENT