何かと便利な定義リスト。
用語集や、Q&Aなど使いどころは沢山あるけれど、同じ行にしたいと思うことがしばしば有るかと思います。
しかし、中々思うように横並びが出来ないのが定義リスト。
今回はそんな厄介な定義リストのサンプルを作ってみました。
---- こっから続き
まずはスタイルシート。
dl {
border:1px solid #999;
width:390px;
}
dt {
float:left;
width:100px;
padding:5px 0 5px 10px;
clear:both;
font-weight:bold;
}
dd {
width:260px;
margin-left:100px;
padding:5px 5px 5px 10px;
border-left:1px solid #999;
}
こんな感じです。
そして、実際の画面では↓こんな感じで表示されると思います。
もっとテーブルっぽく見せたり色々出来ますが、dl dt dd はホント厄介で言う事をきいてくれません。
今回のサンプルでは、dtの方がテキスト量が多くなった場合、ボーダーが途切れたりします。
ホントはcompact属性が使えればいいんですが、非推奨となっておりますのであまりオススメできる方法ではありません。
気合いでコンパクトに見せるしかないですね。
追々横並びの他のサンプルも作っていきたいと思います。
- 各種SBMに追加
-
Track Back [1]
CSS で dl の dt dd を横並びにするときの注意メモ
CSS HappyLieさんの「dlのdt dd を横並びに」サイトを参考にさせ...
by おそえの日誌｜2008年11月04日（火）
comment [16]
1 - 匿名 さん
定義リストの横並びに困っていたので助かりました。
2007年4月16日 14:23
2 - No Name さん
good job!
2008年5月25日 03:23
3 - 通りすがり さん
非常に気になったのですが、用語例やFAQなどはなぜtableでマークアップしないのですか？
<table>
<tr>
<th>用語</th>
<th>意味</tg>
</tr>
<tr>
<td>SEM</td>
<td>Search Engine Marketingの略</td>
</tr>
<tr>
<td>SEO</td>
<td>Search Engine Optimizationの略。</td>
</tr>
<tr>
<td>SMO</td>
<td>Social Media Optimizationの略。</td>
</tr>
</table>
このようにせずに、定期リストを使うべき理由を教えていただきたいです。よろしくお願いします。
2008年10月14日 14:48
4 - hirasawa さん
>3 - 通りすがり さん
このエントリーがテーブル要素でマークアップしてしまうと意味を成さないのですが、定義リストでもテーブルでも、間違っているワケでは無いのでどっちでも良いと思います。
ただ、ご提示いただいたマークアップの、
<td>SEM</td>
この部分は、
<th>SEM</th>
の方がいいかな、と思います。
2008年10月16日 16:38
5 - 通りすがり さん
回答ありがとうございました。
th(=tableheader)は縦・横一列のデータの見出しを表すものなので、SEMやSEOはthではなくtd(=tabledata)でマークアップし、SEMやSEOなどのデータの見出しとしてthで「用語」とマークアップするほうが適していると思います。また「SearchEngineMarketingの略」というデータの見出しとしてはやはり用語の「意味」という見出しが適していて「SEM」は見出しとして不適だと思うのですが、なぜSEMやSEOなどをtdではなくthを使ったほうがいいのでしょうか。
2008年10月16日 22:47
6 - hirasawa さん
>5 - 通りすがり さん
考え方はそれぞれなので、ご自身で明確に答えが出ているのなら、それで良いと思います。
ボクの場合、用語、意味はtheadとして入ってくる部分で、SEMなどとその説明部分がtbodyに入るので、そこのグループとして考えた場合に、SEMが見出しに該当するから「th」、その説明は「td」という解釈です。
あとは、用語、意味の部分が無かった場合、SEMが見出しになってないと不自然だと思います。
URL｜2008年10月17日 15:35
7 - 通りすがり さん
>考え方はそれぞれなので、ご自身で明確に答えが出ているのなら、それで良いと思います。
私は少し知識があるだけの素人なので、自己完結ほど恐ろしいものはありません（笑）
>ただ、ご提示いただいたマークアップの、
>用語、意味はtheadとして入ってくる部分で、SEMなどとその説明部分がtbodyに入る
thead/tbody要素を記述した場合についておっしゃっているのでしたら、私が提示したマークアップにはthead要素もtbody要素も入れてませんのでよく見直してください。
thead/tbody要素を記述していない場合についておっしゃているのでしたら、「theadとして入ってくる部分/tbodyに入る」と頭で解釈していても、実際のマークアップにthead/tbodyが使われていなければ、コンピュータは「用語はtheadとしてのthであって、SEMはtbodyとしてのthである」と解釈することはできないと思います。なので「theadとして入ってくる部分/tbodyに入る」といったことを頭の中で考え、実際にはthead要素/tbody要素を記述せずに、SEMやSEOなどをtbodyに含まれる要素としてthでマークアップするのは不自然だと思います。thead/tbodyが省略可能であるとしてもです。
すみません、眠いので意味不明な文章になってるかもしれません。
2008年10月17日 19:28
8 - hirasawa さん
>7 - 通りすがり さん
例えが悪かったですね。すみません。
tbody要素とか抜きで、もっかいボクの考えを伝えておきますね。
用語、意味の部分は重要度があまり高くなく、SEMとかの部分が意味としては重要であり、この例で言うと、縦軸の関係性より横軸の関係性の方がより重要だとボクは考えます。
仮に、～の略。部分の見出しを機械的に拾ったとして、
その拾った結果が、全て意味としか返ってこなく、肝心のSEMなどの用語は拾えないとも思えます。
また、例とはずれますが、用語・意味に使用例とかの項目が増えた場合に、使用例は何に対しての使用例が書いてあるのかが横軸から判断できません。
解釈としては、この内容は使用例という事は分かるが、何に対しての使用例かは分からないという感じです。
ボクの考えを色々書いてますが、通りすがりさんの考えが「縦軸が重要であり横はさして重要ではない」という考えでしたら、これ以上は意味を成さないやりとりかなぁって思いますのでこの辺で。
2008年10月19日 15:24
9 - 通りすがり さん
えー…うーん…なんていうか、コメント機能の限界を感じますねー。
まず私の考えを書いておくと、「重要度は縦軸＞横軸（あるいは横軸＞縦軸）」というものではなく、「重要度は縦軸＝横軸」のような感じです。というか、「重要な『横の対応関係』を示すのにはやはり『縦の対応関係』を示すのが重要である」のような考えです。
>～の略。部分の見出しを機械的に拾ったとして、
>その拾った結果が、全て意味としか返ってこなく、
>肝心のSEMなどの用語は拾えないとも思えます。
表（table）はそもそも行と列の対応関係を表すものなので、用語・意味をthにし、それ以外をすべてtdにしても、thとtdの対応関係しか読み取られないということはなく、td同士の対応関係も読み取られるはずだと思います。
<table>
<tr>
<th>用語</th><th>意味</th><th>使用例</th>
</tr>
<tr>
<td>SEM</td><td>～の略。</td><td>ｘｘｘ</td>
</tr>
<tr>
<td>SEO</td><td>…の略。</td><td>ｙｙｙ</td>
</tr>
</table>
仮に、こうしたとしても、『「ｘｘｘ」と「ｙｙｙ」は「使用例」に対するデータである』という対応関係が読み取られると同時に、『「SEM」と「～の略。」と「ｘｘｘ」は同じグループのデータである。』という対応関係も読み取られると思います。前者の対応関係のほうが後者より重要視されるということもないと思います。なので
>解釈としては、この内容は使用例という事は分かるが、
>何に対しての使用例かは分からない
ということはありえないと思います。
以上より、tbody,theadなどを考えなかった場合は特にですが、thに用語・意味をいれ、その他をtdに入れるほうが適していると考えています。どう思いますか？
2008年10月19日 16:39
10 - hirasawa さん
ご丁寧にありがとうございます。
ボクは、特にこれに関してどうこうってあまりないので、
最初にお伝えしたように、ご自身の考えに則ってやっているのならソレでいいと思います。
2008年10月19日 18:29
11 - 通りすがり さん
なるほど。
私は将来、ウェブ製作関係の職につきたいと思っているのですが、以前、ブログで「客を納得させられるだけの説明をできないやつがウェブ製作なんてしようとするな」と言われてしまいました。
そこでこうして実際にウェブ製作をしている比較的優秀な方のブログにコメントさせていただいたのですが…まぁ、ここは所詮「ブログのコメント欄」であって私も結局は読者。客と読者とじゃ月とすっぽんってこともあるかもしれませんが…なんとなく、安心しました。
コメントに付き合ってくださりどうもありがとうございました。
2008年10月21日 02:59
12 - hirasawa さん
>通りすがりさん
なるほど、そうだったんですね。Web制作関係の人かと思ってました。
どんなに論理的で、データが揃っていたとしても、納得しない人ってのも居ますし、その辺り一概には言えないと思いますが、サイトとして明らかにマイナス要因を含むことをやりたいって言われた場合などに、納得してもらえれば後は双方折り合いつければいいってボクは思います。
今回は、マークアップでの意見の違いですので、お客さんからどうこうってのはまず発生しないと思います。起こるとすれば社内だと思います。なので、そこで議論してより最適だと思えるマークアップをしていけばいいかな、と。
URL｜2008年10月21日 11:07
13 - 通りすがり さん
返信ありがとうございました。
>双方折り合いつければいいってボクは思います。
なるほどです。とても参考になりました。
>マークアップでの意見の違いですので、
>お客さんからどうこうってのはまず発生しないと思います。
そうですよね。（笑）
私は今高校生で、高校の文化祭のサイトの制作を頼まれ、制作したのですが、その際に「背景真っ黒、文字色真っ白でもっとインパクトを大きくしろ」「文字をもっと小さくしろ」と言われました。
そこでコントラストが強すぎたり文字サイズが小さかったりすると目が疲れる、読みにくいとか、今回もっとも重視すべきなのは「情報発信」であるから全体としてのデザインより読みやすさを重視すべきなんじゃないかとか、ありきたりな質問にありきたりな説明をしたのですが、相手は一歩も譲らず、「もうめんどくせえよ」みたいなことをブログに書いたら「客を納得させられない(ry」とコメントをいただきました。
>起こるとすれば社内だと思います。
>なので、そこで議論して
>より最適だと思えるマークアップをしていけばいいかな、と。
デジパさんでも、マークアップについて議論することってあるんですか？
2008年10月21日 16:04
14 - hirasawa さん
>通りすがりさん
文化祭のサイト、差し支えなければ見てみたいですね。
お客さんにしろ、同じ学生同士にしろ、意見の食い違いはありますし、まぁやって行くうちに色々分かるかと。
実際に業界に入って、プロとしてやり出すと色んなことが見えるかと思います。
>デジパさんでも、マークアップについて議論することってあるんですか？
もちろん、ありますよ。どっちがいいとか、あーだこーだって。
食い違う事も多々ありますし。
URL｜2008年10月21日 18:58
15 - 通りすがり さん
すみません、コメント遅れてしまって。
学校のサーバーを使わせていただいてるのですが、アップロード等するためにはセキュリティ云々の関係で学校のパソコンからログインしなければいけなく、…昨晩Operaで型崩れを発見しまして…。
ということで現在、だいたいの環境でだいたい正常に表示されていると思います、多分。正直に言うと、あまり見やすくない上に、HTMLもいろいろと微妙なのですが…お手柔らかに評価をお願いします。
http://tinyurl.com/5uq8qe
>もちろん、ありますよ。どっちがいいとか、あーだこーだって。
そうなんですか?!
デジパさんの場合、どんな流れでウェブサイトを制作していくのでしょうか。１つのページのHTMLを複数人でコーディングすることってあるんですか？
2008年10月23日 01:18
16 - hirasawa さん
>15 - 通りすがり さん
金曜日から出かけていたので、返信が遅れてしまいました。
URLありがとうございます。
ざっくりとですが、見させてもらいました。
高校生とは思えないレベルの高さですね。
今から勉強を続けていれば、就職する頃にはかなりのレベルに慣れるんじゃないでしょうか。
ウチは、基本的には複数人で組む事はありませんが、
大規模案件などは、やる事も有りますね。
あと、テーブルの件、色々話を聞いたりしてみましたが、
それぞれの考え方でやってるので、tdの人も居ればthの人も居るっていう感じでした。
以下の記事を読んだことが無かったら今後のコーディングの参考になると思います。
http://www.kanzaki.com/docs/html/tbl-access.html
2008年10月27日 13:13