アプリ版：「スタンプのみでお礼する」機能のリリースについて

cssを用いる表の作り方

解決済

  • 質問者：ninnikutips
  • 質問日時：
  • 回答数：4件

いつもいつもお世話になっております。

cssを用いた表の作り方で迷っています。

dl,dt,ddを使う方法、divのみを使う方法を試しましたが、納得のいく見栄えになりません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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">
</style>
</head>
<body>
<dl id="sample3">
<dt>施設名</dt>
<dd>あああああああああああああああ</dd>
<dt>所在地</dt>
<dd>いいいいいいいいいいいいいいいいいいいいいいい</dd>
<dt>職員体制</dt>
<dd>うううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう</dd>
<dt>アクセス</dt>
<dd>
<ul>
<li>・えええええええええええええええええええええええええ</li>
<li>・おおおおおおおおおおおおおおおおおおおおおおおおお</li>
<li>・かかかかかかかかかかかかかかかかかかかかかかかかか</li>
</ul>
</dd>
<dt>総居室数</dt>
<dd>３室</dd>
<dt>居室面積</dt>
<dd>２０平米</dd>
<dt>電話番号</dt>
<dd>12-3456-7890</dd>
<dt>FAX番号</dt>
<dd>12-3456-7890</dd>
</dl>
</body>
</html>


dl#sample3 {
width: 600px;
}
dl#sample3 dt{
border-top: 1px solid #fff;
float: left;
width: 6em;
padding: 10px;
background-color: orange;
}

dl#sample3 dd{
border-left: 1px solid #fff;
border-top: 1px solid #fff;
margin-left: 115px;
padding: 10px;
background-color: silver;
}
ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
}


各セルに色をつけたいのですが、説明が２行以上に渡ると項目名が対応されないのと、
"電話番号""FAX番号"のような説明が短いセルは幅を短くして、横に並べることが出来ないところで悩んでいます。

もちろん、それらのセルを別classにすれば対応可能ではありますが、テンプレートとして使用する必要があるため、汎用性の高い構成にする必要があるのです。

ご存知の方、どうぞどうぞご教示お願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.1ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

なぜtableじゃまずいの？？


れっきとしたtableデータとして意味があるのでtableで構いません。
『ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』がまずいのであって、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-html4 … )
<!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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

いつもお世話になります。

もうtableの使用は控えるべきだ、メンテナンスもしづらいし、cssならコードも減らせる・・・みたいなことをよく目にしたもので、cssのみで柔軟に作れないものかと思ったのでした。
幅や高さが違うセルはそれぞれclassを作ってあげるのも正しいやり方なんですね。

どうもありがとうございました。

通報する
お礼日時：2014/03/18 08:25

No.2

  • 回答者： ORUKA1951
  • 回答日時：

アドバイス


　スタイルシートを使う最大の目的は、「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」です。『文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる』
　HTMLは、ひたすら文書構造のマークアップだけに専念すると楽です。先の「floatの挙動について - Webデザイン・CSS - 教えて！goo( http://oshiete.goo.ne.jp/qa/8513309.html )」の際にも・・
　floatを使用すると、文書構造自体が大きな制約を受けてしまいます。floatさせる要素を先に書かなければならないという大きな制約のため、視覚障害者がスクリーンリーダーを使用したり、検索エンジンが内容をみても延々と目次を読まされたり・・
　floatは、本来のテキスト中に挿絵等を添えるときなどに使うほうが良いです。そうしないと本文中で本当に挿絵を入れてclearしたいときなどが不可能になります。
　ちゃんとしたサイトはfloatは使用していないはずです。

面白いサンプル
　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
　chrome以外の代替スタイルシートを利用できるブラウザで、[表示]メニューから[スタイル(シート)]に進み、様々なスタイルを選択してみてください。印刷プレビューでも見てみる。
　デザインは、必ず心変わりします。

　また、リンクターゲットやjavascriptのターゲットにする以外は、idではなくclass名--それもHTML5の新しい要素名と使い道を参考にすると良いです。いずれHTML5の時代が来ます。HTML5ではDIVは原則として使わなくなります。

　今まで作られたものは兎も角・・・今後は、HTML4.01strictでclass名はHTML5の要素名を使用するようにすると、文書構造がマークアップしやすくなります。

★HTMLさえきちんとマークアップされていれば、それに反しない限りデザインは自由になります。文書構造に反したプレゼンテーションはプレゼンテーションのていをなしませんから。

　今回はtableをお勧めします。
<tr abbr="施設名">施設名</th>
　でよいです。
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： DrFell
  • 回答日時：

「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を使う必要があるなら、その理由を教えていただけると、他のアドバイスができるかもしれません。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。
No.1の方のお礼にも書きましたが、これからは表を作るのもcssじゃないといけないのか・・・と思った次第でした。表はtableで作成するべき、との回答を頂いたのでスッキリしました。
レイアウトに使うのがよくない、ということなんですね。

通報する
お礼日時：2014/03/18 08:28

No.4

  • 回答者： nanden1548
  • 回答日時：

選択するセレクターに間違いがある。

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を使ってもできるし？・・・
    • good
    • 0
    • 件
通報する
この回答へのお礼

どうもありがとうございます。
表はtableで作成するものと身に染みて分かりました。
今後の参考とさせて頂きます。

通報する
お礼日時：2014/03/18 08:34

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報