＞dlを使っての見た目「表組」の作り方
表は表なので、テーブルタグを使っても全然かまわない訳ですが
dlを使うことで、スタイルシートでのデザインがやりやすくなることもあるし
ソースがシンプルになるので、プログラムを組み込むときに、
どこからどこまでループさせる・・簡単に組めるようになるかと思います。
dlというのは、本来定義リストのタグで、たとえば辞書のように
【ほ乳類】タヌキ／キツネ／クマ／ネズミなど
【鳥類】フクロウ／ワシ／タカ／カモ／ヤマセミ／カワセミなど
【昆虫】トンボ／ハチ／チョウ／カブトムシなど
こんなふうに見出しと説明との繰り返しになる文章に使われます。
同じく、項目名と中身との繰り返しになる表組みや、
役柄とセリフとの繰り返しになるシナリオのような形式にも使えますよね。
ということで、動画で紹介したページのソースを紹介します。
――――――――――――――――――――――――――――――――――
（スタイル）
*{
margin:0;
padding:0;
}
body {
color:#333333;
margin-top: 40px;
margin-left: 40px;
font-size: 13px;
line-height: 24px;
}
dl{
background:#E3E1D5 url(img/green.gif) repeat-y 0 0;
width:480px;
border-top: 1px solid #666666;
}
dt {
text-indent:20px;
width:120px;
}
dd {
border-bottom:1px solid #666666;
margin:-24px 0px 0px 0px;
padding-left:140px;
width:340px;
}
――――――――――――――――――――――――――――――――――
（HTML）
<dl id="recruit">
<dt>
仕事内容
</dt>
<dd>
（１）翻訳業務（２）通訳業務（３）外国語教育
</dd>
<dt>
勤務時間
</dt>
<dd>
業務内容による
</dd>
</dl>
――――――――――――――――――――――――――――――――――
動画の中でも紹介しましたが、いくつかポイントがあるので紹介します
●デフォルトのスタイルをリセットする
dlやdt、ddにはそれぞれデフォルトのマージンが入ってしまってるのでスタイルの最初でリセットしています
*{margin:0;padding:0;}
●ネガティブマージンを使用
ddの方のマージントップを-24pxにして（行間と同じサイズ）１行分上にあげてます。
マージンをマイナスするのをネガティブマージンと言うらしいですね。
●dtもdlも幅指定
dlやdt、ddは、ブロック要素なので幅を指定できます。
というか、幅指定ちゃんとしないときれいな表にならなかったので入れてあります。
今回の見本サイトはこちら
京橋タウンガイド
このサイトはxoopsで構築しました。
地図やおすすめメニューなどのついたショップガイド、各お店からの新着ニュースや、クチコミ投稿、求人情報や、イベント・タウンガイドなどの機能が盛りだくさん。
URLの静的生成と正しいマークアップでseo対策済み。携帯にも対応しています。
xoopsを使ったポータルサイトの制作も受けていますのでお気軽にご相談ください。
デザイン：webの森
協力／xoopsシステム構築：A-XYZ
0 件のコメント:
コメントを投稿