掲示板/スタイルシート質問板/過去ログ/一覧/ テーブルの作成

0 名前： 勉強中 ： 2006/05/18（木） 22:42 ID:FMapAYD0: 基本的な質問で大変お恥ずかしいのですが、今スタイルシートの勉強を始めたばかりの者です。

「テーブルをスタイルシートで作成する」ということに
参考書を片手にやってみたのですが、うまくいきません。

下記ＵＲＬをご覧ください。
http://aozora.vis.ne.jp/tesuto/

スタイルシートの記述は以下のとおりです。

div#box1 {
border-style: solid;
border-with: 1px;
boder-color: #4B0082;
border-collape: collape;
background-color: #FFFFE0;
with: 200px ;
height: 600px;
}

div#box2 {
border-style: solid;
border-with: 1px;
boder-color: #DB7093;
border-collape: collape;
background-color: #FFFFFF;
with: 500px;
height: 600px;
}

枠の色も黒くて太くなっていますし、
テーブルの大きさも反映されていません。
基本的な間違いがあるのだと思います。

初心者のため、専門的な用語はあまりわかりません。
よろしくお願いいたします。

1 名前： カヅサツ ◆ThCi95HEzw ： 2006/05/18（木） 22:42 ［URL］ ID:O5hEMlpW: > 「テーブルをスタイルシートで作成する」ということに
> 参考書を片手にやってみたのですが、うまくいきません。

テーブルは「表」であり、テキストが表であるならば table でマークアップすれば良いと思いますが。

また、別の要素に表の特殊な表示規則（border-collapse の扱いなど）を持たせたい、という目的のために display: table などが公式ルールに存在するのですが、Windows IE が無視しやがるので、残念ながら実用的ではありません。

それはそれとして。

ご質問が
「div要素に指定した枠線の太さと色が反映されないのだが何故か」
ということでしたら、単なるスペルミスです。

border-with → border-width
boder-color → border-color

2 名前：勉強： 2006/05/18（木） 22:42 ID:FMapAYD0: >単なるスペルミスです。

ハイ、おっしゃるとおりでした。
ちゃんと表示されました。
スミマセン。（恥）

>テーブルは「表」であり、テキストが表であるならば table でマークアップすれば良いと思いますが。

①<table></table>のことですよね？
<div>でテーブルを作成するのは間違いですか？
テーブルタグを多用していると検索エンジンがテキストを拾うのが遅くなるので<div>を使いましょう！みたいなサイトがあったもので。

②もう一度見ていただけますか？
http://aozora.vis.ne.jp/tesuto/

今度は段組をしてみました。
ところがブラウザを小さくすると、段組が崩れます。
崩れないようにする方法はありますか？

スタイルシートです。

div#box1 {
border-style: solid;
border-width: 1px;
border-color: #4B0082;
border-collape: collape;
background-color: #FFFFE0;
width: 200px ;
height: 600px;
float: left;
width: 200px;
}

div#box2 {
border-style: solid;
border-width: 1px;
border-color: #DB7093;
border-collape: collape;
background-color: #FFFFFF;
width: 500px ;
height: 600px;
float: left;
width: 500px;
}

何度も申し訳ありません。
よろしくお願いいたします。

3 名前：匿名： 2006/05/18（木） 22:42 ID:Iz2k4TNT: 以前私が答えた質問に似たものがありますので、これでどうですか？

http://www.tagindex.com/cgi-lib/q3bbs/patio.cgi?mode=view&no=247

4 名前： 勉強中 ： 2006/05/18（木） 22:42 ID:FMapAYD0: 匿名さん、参考にしましたが、記述の仕方がわかりません。
一応下記のようにしてみましたが、間違ってますよね？

div style{
width:700px;
}

div#box1 {
border-style: solid;
border-width: 1px;
border-color: #4B0082;
border-collape: collape;
background-color: #FFFFE0;
width: 200px ;
height: 600px;
float: left;
width: 200px;
}

div#box2 {
border-style: solid;
border-width: 1px;
border-color: #DB7093;
border-collape: collape;
background-color: #FFFFFF;
width: 500px ;
height: 600px;
float: left;
width: 500px;
}

5 名前：匿名： 2006/05/18（木） 22:42 ID:Iz2k4TNT

うーん、cssだけ直すのではないのです。
<body></body>の中も直しましたか？
box1とbox2を囲んでみてください。

あと、box1とbox2にwidthが２回記述されていますよ。

<div style="width:700px;">
<div id="box1"><TABLE border="0">
  <TBODY>
    <TR>
      <TD></TD>
    </TR>
  </TBODY>
</TABLE></div>
<div id="box2"><TABLE border="0">
  <TBODY>
    <TR>
      <TD></TD>
    </TR>
  </TBODY>
</TABLE></div>
</div>

6 名前：匿名： 2006/05/18（木） 22:42 ID:zqn32COP: >>2
> <div>でテーブルを作成するのは間違いですか？
div は「グループ」なので、「表」の table とは根本的に役割が違います。

> テーブルタグを多用していると検索エンジンがテキストを拾うのが遅くなるので<div>を使いましょう！みたいなサイトがあったもので。
世迷言です。耳を貸さないようにしましょう。

7 名前： ３と５の匿名 ： 2006/05/18（木） 22:42 ID:Iz2k4TNT

見直してて気付いたので付け足し。

div style{
width:700px;
}

↑この部分、ＩＤなら＃いるのでは？

8 名前： カヅサツ ◆ThCi95HEzw ： 2006/05/18（木） 22:42 ［URL］ ID:O5hEMlpW

>>2

まずテキストを書き、構造によってマークアップし、最後に見栄えを整えるのが、良い Webページを作る基本的な流れです。

品目　　スーパーA　スーパーB
りんご　　120円　　　100円
みかん　　 90円　　　110円

例えばこのようなテキストがある場合、これは「価格表」というべきものなので、tableを使います。

<table summary="価格表">
	<thead>
		<tr>
			<th>品目</th><th>スーパーA</th><th>スーパーB</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>りんご</th><td>120円</td><td>100円</td>
		</tr>
		<tr>
			<th>みかん</th><td>90円</td><td>110円</td>
		</tr>
	</tbody>
</table>

> <div>でテーブルを作成するのは間違いですか？

元になるテキストが「表」であれば間違いです。「表」でなければ別の要素です。それは div かもしれませんし、pかもしれませんし、dlかもしれません。

div#box1 {
> 	(略)
> 	border-collape: collape;
> 	(略)
}

table以外の要素に border-collapse プロパティを指定しても無視されます。

> テーブルタグを多用していると検索エンジンがテキストを拾うのが遅くなるので<div>を使いましょう！みたいなサイトがあったもので。

どんなサイトですか？

9 名前： 勉強中 ： 2006/05/18（木） 22:42 ID:FMapAYD0: 匿名さん、いろいろ教えてくださって参考になりました。

>世迷言です。耳を貸さないようにしましょう。

そうですね。
いろんなサイトがあって、それぞれ違うことを言っているので
惑わされてしまいます。

ご指摘いただいた箇所は訂正しました。

>div style{width:700px;}
>↑この部分、ＩＤなら＃いるのでは？

一応下記のようにしてみましたが、ダメでした。

div#style{
width: 700px;
}

ご存知の方、よろしくお願いします。
あとできたらセンタリングしたいのですが・・・

10 名前： F ◆31IwthomhZ ： 2006/05/18（木） 22:42: >>いろんなサイトがあって、それぞれ違うことを言っているので惑わされてしまいます。
　下記資料などを基に、よい資料か悪い資料かを見分ける力も養った方があとあと便利です。

参考）
http://bakera.jp/html/book/
http://web.xii.jp/iec/battle/
http://members.jcom.home.ne.jp/pctips/Tondemo/

＃というか、仕様書が読めたほうが一番誤解が少ないかも。

11 名前： 勉強中 ： 2006/05/18（木） 22:42 ID:FMapAYD0: >カヅサツさん

わかりやすい説明、ご親切にありがとうございました。

>どんなサイトですか？

はぁ、ここです。
http://www.2step-css.com/

>Ｆさん

参考資料、ありがとうございます。
おっしゃるとおりですね。
いろんなサイトや本に目をとおしてますので
だんだんわかるようになるかもです。

http://desperadoes.biz/style/dan/index.php
上のサイトも参考にしたんですが、うまくいかないんです。

現在スタイルシートは

div#my_body{
margin:0 auto;
width : 700px;
}

div#box1
{
border-style: solid;
border-width: 1px;
border-color: #4B0082;
border-collape: collape;
background-color: #FFFFE0;
height: 600px;
float: left; width: 200px;
}

div#box2 {
border-style: solid;
border-width: 1px;
border-color: #DB7093;
border-collape: collape;
background-color: #FFFFFF;
height: 600px;
float: left; width: 500px;
}

になってます。

12 名前： F ◆31IwthomhZ ： 2006/05/18（木） 22:42: 　まあ、これ以上は泥沼化するので省略しますが、孫の孫の曾孫の曾々孫・・・と誤解の連鎖だったりするので、とりあえずDIV要素「だけ」が段組の手段とは限らないです（DIV要素がよく使われますが）。

　で、>>11を良く見るとfloatプロパティが妙な気がしました。
　box1を左側、box2を右側にしたいのですよね？

>>float: left; width: 200px;

>>float: left; width: 500px;

　どっちも「左」（left）を指定してませんか？

参考）
http://www.scollabo.com/banban/ref/refcss_05.html

　それと、合計幅の計算には注意が必要ですね。同じブラウザでもレンダリングモードの違いで差が出たりしますから。

参考）
http://www.geocities.jp/multi_column/float/02.html

13 名前： F ◆31IwthomhZ ： 2006/05/18（木） 22:42: 　追記。
　左側にしたいほうだけ指定すれば足りるような気がしました（>>12で紹介した資料からさらにリンクを辿ったところにありました）。
＃よく考えたら二つしかなくて片方が左ならもう片方は”指定しなくても”右にいくことが期待されるのよねOTL

14 名前： カヅサツ ◆ThCi95HEzw ： 2006/05/18（木） 22:42 ［URL］ ID:fv0v30Vt: >>> テーブルタグを多用していると検索エンジンがテキストを拾うのが遅くなるので<div>を使いましょう！みたいなサイトがあったもので。

>> どんなサイトですか？

> はぁ、ここです。
> http://www.2step-css.com/

一通り目を通してみましたが、そのような既述は見当たらないみたいです。
一応 google でも確認しました。
http://www.google.co.jp/search?q=%22%E6%A4%9C%E7%B4%A2%22+site%3Ahttp%3A%2F%2Fwww.2step-css.com%2F

15 名前： 勉強中 ： 2006/05/18（木） 22:42 ID:FMapAYD0: >Ｆさん

一応　float: left; width: 500px;の
float: left;を外してみました。
下記のようになりました。

http://aozora.vis.ne.jp/tesuto/

>どっちも「左」（left）を指定してませんか？

私の使用している参考書「できるホームページスタイルシート入門」にも
例文としてそのように記載されています。
それから参考にしたサイト
http://desperadoes.biz/style/dan/index.php
の中でもそのような例文があります。
気を悪くされたらごめんなさい。

実はＨＰを作成中で、このボックスの中に文章が入る予定になっております。
ホームページビルダーを使用しておりますので「どこでもモード」を使えば悩む必要はないのですが、考えがあってＨＴＭＬおよびスタイルシートを覚えようとしています。

結構いろんなサイトを見ましたが、div以外の段組の方法とはまだ出会っておりません。（笑）
訳あって急いでいるので質問させていただきました。

div以外の方法で段組が（崩れない）できるようでしたら教えていただけませんか？
必ずしもdivでなければいけないという訳ではなく
divしか知らないだけですから。（爆）

もしdivを使った崩れない段組の方法をご存知の方がいらっしゃいましたら
そちらも教えていただければ幸いです。

長くなって申し訳ありません。
よろしくお願いいたします。

16 名前： Pid ◆byEkK9OALr ： 2006/05/18（木） 22:42: >>2
> ところがブラウザを小さくすると、段組が崩れます。

>>3 のリンク先とよーく見比べてみるか，あるいは各ボックスの横幅を固定値（px）ではなく % 指定にして下さい。

また，>>12 のリンク先の解説は信頼できますので，ぜひ目を通して下さい。そこにズバリの答もあります。

>>15
> div以外の方法で段組が（崩れない）できるようでしたら教えていただけませんか

まず HTML マークアップがあり，それに合わせてスタイルを規定するのが原則です。「まずレイアウトありき」の発想だと，CSS はかなり厄介な代物になってしまいますので，まずマークアップをしっかり行って下さい。

簡単な HTML マークアップだけでも，実はかなり複雑なレイアウトが可能です（方法は，マークアップの仕方によってさまざまなので，いろんなページのソースを見て下さい）。div 要素を多用する意味はありません。

>>13
http://www.kanzaki.com/book/css/3-2.html に，浮動化（float）に関する詳細な解説があります（float の仕組みは誤解されていることが多い気がします）。

17 名前： F ◆31IwthomhZ ： 2006/05/18（木） 22:42: >>ホームページビルダーを使用しておりますので
　あー、それを最初におっしゃっていただければ真っ先にお奨めした資料がありましたのに。

ホームページ・ビルダーV9ではじめてのWebページ）
http://hpbuilder.net/

「どこでも配置モード」は>>16でPidさんがおっしゃる”「まずレイアウトありき」の発想”ともいえるモードなので、「環境を問わないページ作り」を目指されるのであれば使わないほうがよいです。

余談：DIV要素関連ネタ）
http://www.fromdfj.net/html/divsyndrome.html

18 名前： 勉強中 ： 2006/05/18（木） 22:42 ID:FMapAYD0: >Pid さん

ありがとうございます。
ただ、専門用語がわからないのであとで調べますね。

>Ｆさん

いろいろなご意見ありがとうございました。

その他のご協力いただいた方々、ありがとうございました。

みなさん、いろんな資料をご存知なんですね。
感心してしまいました。
それだけ勉強されて覚えたということでしょうね。
頑張ってみます！

長々とお付き合いいただき、ありがとうございました。