- ベストアンサー
CSSを用いる表の作り方
- CSSを用いた表の作り方について悩んでいます。dl, dt, ddを使う方法とdivのみを使う方法を試しましたが、見栄えが納得できません。
- 特に、セルに色を付ける際に、説明が2行以上になると項目名が対応できない問題や、短い説明のセルを短くして横に並べることができない問題があります。
- 汎用性の高い構成として使える方法をお教えいただけませんか？
- ninnikutips
- お礼率50% (56/110)
- CSS
- 回答数4
- ありがとう数14
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
なぜtableじゃまずいの？？ れっきとしたtableデータとして意味があるのでtableで構いません。 『ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』がまずいのであって、tableのほうが良いデータは遠慮なくtableにしましょう。 もちろんDIVだろうがリストだろうが、 文書構造がきちんとマークアップされていれば、期待通りにデザインできるはずです。 ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ ＞dl,dt,ddを使う方法、divのみを使う方法を試しましたが、納得のいく見栄えになりません。 ＞説明が２行以上に渡ると項目名が対応されない これは、文書構造とデザインが合わないからです。 具体的には、dt要素はdd要素に含まれているものではないので、ddの高さに合わせる事は不可能です。 ひとつずつ <div class="sample"> <dl> <dt>施設名</dt> <dd>あああああああああああああああ</dd> </dl> <dl> <dt>所在地</dt> <dd>いいいいいいいいいいいいいいいいいいいいいいい</dd> </dl> とすれば、簡単にできるはずです。 div.sample dl{display:block;position:relative;} div.sample dl dt{position:absolute;top:0;left:0;width:10em;text-align:center;} div.sample dl dd{margin-left:11em;} [サンプル] ★さすがにtransitinalじゃ古いのでstrictです。 HTML文書を作る場合には、strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>てすと</title> <meta http-equiv="content-type" content="text/html; charset=shift-jis"> <meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css" media="screen"> <!-- #sample,#sample2{width:700px;margin:0 auto;position:relative;background-color:silver;} #sample div.section{width:100%;position:relative;min-height:40px;border:solid 1px silver;padding:5px 0;} #sample div.section h3{position:absolute;top:0;left:0;width:8em;height:100%;text-align:center;margin:0;font-weight:normal;} #sample div.section p, #sample div.section ul{margin:0 0 0 10em;} #sample div.section.details h3{display:none;} #sample div.section.details dl, #sample div.section.details dt, #sample div.section.details dd{list-style:none;padding:0;margin:0;white-space:nowrap;} #sample div.section.details dt, #sample div.section.details dd{padding:0 0.5em;display:inline-block;} #sample div.section h3, #sample div.section.details dl dt{background-color:orange;line-height:40px;} #sample2{list-style:none;padding:0;} #sample2 li{width:100%;position:relative;min-height:40px;border:solid 1px silver;padding:5px 0;} #sample2 p{position:absolute;top:0;left:0;width:8em;height:100%;text-align:center;margin:0;font-weight:normal;} #sample2 p+p{position:static;width:auto;height:auto;text-align:left;margin:0 0 0 10em;} #sample2 li ul{margin:0 0 0 10em;} #sample2 li.details h3{display:none;} #sample2 li.details dl, #sample2 li.details dt, #sample2 li.details dd{list-style:none;padding:0;margin:0;white-space:nowrap;} #sample2 li.details dt, #sample2 li dd{padding:0 0.5em;display:inline-block;} #sample2 li p, #sample2 li.details dl dt{background-color:orange;line-height:40px;} #sample2 li p+p{background-color:transparent;line-height:1.4em;} </style> </head> <body> <div class="section" id="sample"> ＿<div class="section"> ＿＿<h3>施設名</h3> ＿＿<p>あああああああああああああああ</p> ＿</div> ＿<div class="section"> ＿＿<h3>所在地</h3> ＿＿<p>いいいいいいいいいいいいいいいいいいいいいいい</p> ＿</div> ＿<div class="section"> ＿＿<h3>職員体制</h3> ＿＿<p>うううううううううううう</p> ＿＿<p>うううううううううううう</p> ＿</div> ＿<div class="section"> ＿＿<h3>アクセス</h3> ＿＿<ul> ＿＿＿<li>えええええええええええ</li> ＿＿＿<li>おおおおおおおおおおおおおおおお</li> ＿＿＿<li>かかかかかかかかかかかかかかか</li> ＿＿</ul> ＿</div> ＿<div class="section details"> ＿＿<h3>詳細</h3> ＿＿<dl> ＿＿＿<dt>総居室数</dt><dd>３室</dd> ＿＿＿<dt>居室面積</dt><dd>２０平米</dd> ＿＿＿<dt>電話番号</dt><dd>12-3456-7890</dd> ＿＿＿<dt>FAX番号</dt><dd>12-3456-7890</dd> ＿＿</dl> ＿</div> </div> <ol class="section" id="sample2"> ＿<li><p>施設名</p> ＿＿<p>あああああああああああああああ</p> ＿</li> ＿<li><p>所在地</p> ＿＿<p>いいいいいいいいいいいいいいいいいいい</p> ＿</li> ＿<li><p>職員体制</p> ＿＿<p>ううううううううううううううう</p> ＿＿<p>ううううううううううううううう</p> ＿</li> ＿<li><p>アクセス</p> ＿＿<ul> ＿＿＿<li>ええええええええ</li> ＿＿＿<li>おおおおおおおおおおおおおおおおおおお</li> ＿＿＿<li>かかかかかかかかかかかか</li> ＿＿</ul> ＿</li> ＿<li class="details"> ＿＿<h3>詳細</h3> ＿＿<dl> ＿＿＿<dt>総居室数</dt><dd>３室</dd> ＿＿＿<dt>居室面積</dt><dd>２０平米</dd> ＿＿＿<dt>電話番号</dt><dd>12-3456-7890</dd> ＿＿＿<dt>FAX番号</dt><dd>12-3456-7890</dd> ＿＿</dl> ＿</li> </ol> </body> </html>
その他の回答 (3)
選択するセレクターに間違いがある。dl要素は、整形型のリストを書くためのもの、横に並べて色を付けたいのであれば、 <table summary=""></table>要素を選ぶべきでしょう！ 各要素（セレクタ）の意味を理解して利用しなければだめなのでは？・・・ 私もtable要素は、嫌いなので、使いませんが、他の方法で同じことをするなら、グリッドレイアウトで行うことになるでしょう。 セルをならべる？・・・ ならば、<ul>か、<ol>要素を使い、<li>にdisplay:inline;にすればいいだけでは？・・・ <ul><li>menu1</li><li>menu2</li><li>menu3</li></ul> CSS li{display:inline;padding-right:10px;} この程度の記述で十分では？・・・ ほかにもfloatを使ってもできるし？・・・
お礼
どうもありがとうございます。 表はtableで作成するものと身に染みて分かりました。 今後の参考とさせて頂きます。
- DrFell
- ベストアンサー率55% (305/551)
「cssを用いる表の作り方」なら、以下のようなものをイメージします。 ｃｓｓ－－－－－－－－－－－－ table,th,td{border-collapse:collapse;} table{width: 600px;} th{font-weight:normal;background-color: orange;width: 6em;padding: 10px;border-bottom:solid #ffffff 1px;padding:10px} td{background-color: silver;border-bottom:solid #ffffff 1px;padding:10px} td ul{margin:0;padding:0 0.4em;} td li{list-style-position:inside;} ｈｔｍｌ－－－－－－－－－－－ <table> <tr> <th>施設名</th> <td>あああああああああああああああ</td> </tr> <tr> <th>所在地</th> <td>いいいいいいいいいいいいいいいいいいいいいいい</td> </tr> <tr> <th>職員体制</th> <td>うううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう</td> </tr> <tr> <th>アクセス</th> <td><ul> <li>えええええええええええええええええええええええええ</li> <li>おおおおおおおおおおおおおおおおおおおおおおおおお</li> <li>かかかかかかかかかかかかかかかかかかかかかかかかか</li> </ul></td> </tr> <tr> <th>総居室数</th> <td>３室</td> </tr> <tr> <th>居室面積</th> <td>２０平米</td> </tr> <tr> <th>電話番号</th> <td>12-3456-7890</td> </tr> <tr> <th>FAX番号</th> <td>12-3456-7890</td> </tr> </table> 定義リストを表に見せかける、divを使う必要があるなら、その理由を教えていただけると、他のアドバイスができるかもしれません。
お礼
ありがとうございました。 No.1の方のお礼にも書きましたが、これからは表を作るのもcssじゃないといけないのか・・・と思った次第でした。表はtableで作成するべき、との回答を頂いたのでスッキリしました。 レイアウトに使うのがよくない、ということなんですね。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
アドバイス スタイルシートを使う最大の目的は、「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」です。『文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる』 HTMLは、ひたすら文書構造のマークアップだけに専念すると楽です。先の「floatの挙動について - Webデザイン・CSS - 教えて！goo( http://okwave.jp/qa/q8513309.html )」の際にも・・ floatを使用すると、文書構造自体が大きな制約を受けてしまいます。floatさせる要素を先に書かなければならないという大きな制約のため、視覚障害者がスクリーンリーダーを使用したり、検索エンジンが内容をみても延々と目次を読まされたり・・ floatは、本来のテキスト中に挿絵等を添えるときなどに使うほうが良いです。そうしないと本文中で本当に挿絵を入れてclearしたいときなどが不可能になります。 ちゃんとしたサイトはfloatは使用していないはずです。 面白いサンプル ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) chrome以外の代替スタイルシートを利用できるブラウザで、[表示]メニューから[スタイル(シート)]に進み、様々なスタイルを選択してみてください。印刷プレビューでも見てみる。 デザインは、必ず心変わりします。 また、リンクターゲットやjavascriptのターゲットにする以外は、idではなくclass名--それもHTML5の新しい要素名と使い道を参考にすると良いです。いずれHTML5の時代が来ます。HTML5ではDIVは原則として使わなくなります。 今まで作られたものは兎も角・・・今後は、HTML4.01strictでclass名はHTML5の要素名を使用するようにすると、文書構造がマークアップしやすくなります。 ★HTMLさえきちんとマークアップされていれば、それに反しない限りデザインは自由になります。文書構造に反したプレゼンテーションはプレゼンテーションのていをなしませんから。 今回はtableをお勧めします。 <tr abbr="施設名">施設名</th> でよいです。
お礼
いつもお世話になります。 もうtableの使用は控えるべきだ、メンテナンスもしづらいし、cssならコードも減らせる・・・みたいなことをよく目にしたもので、cssのみで柔軟に作れないものかと思ったのでした。 幅や高さが違うセルはそれぞれclassを作ってあげるのも正しいやり方なんですね。 どうもありがとうございました。