再度質問させていただきます。
まずはこれを見てください↓
http://styleb.genin.jp/
スタイルシートでの指定方法と
他に”テーブルよりもこっちの方がいいよ”みたいのが有ればあわせて教えていただけると嬉しいです。
（リンク集はご遠慮ください）
私でも判るように詳細にお願いします
No.2
379
52
20pt
tableを使うことを前提として回答します。下記のような感じではいかがでしょうか？
ここから
<html>
<head>
<title>タイトル</title>
<style type="text/css">
<!--
body {
background-image : url("");
background-attachment: fixed;
background-position: 0% 0%;
background-repeat: repeat-y;
background-color:#ffffff;
}
/* グルーピングしたmenuクラスのスタイル */
div.menu {
text-align: center; /* tableを中央に寄せる(IEのバグ対策) */
}
/* menuクラス内のtable要素のスタイル
ここにテーブルのスタイルを記述する */
div.menu table {
margin: 0 auto; /* テーブルを中央に寄せる */
border: none; /* 枠線を表示しない */
text-align: left; /* セル内のテキストを左に寄せる(IEのバグ対策) */
}
/* menuクラス内のtitleクラスのスタイル
ここに左セルのスタイルを指定する */
div.menu td.title {
width: 300px; /* 左セルの横幅 */
font-size: 15px; /* フォントサイズ */
border-bottom: solid 1px black; /* 線(下)を表示 */
}
/* menuクラス内のdescクラスのスタイル
ここに右セルのスタイルを指定する */
div.menu td.desc {
width: 500px; /* 右セルの横幅 */
font-size: 15px; /* フォントサイズ */
border-bottom: solid 1px black; /* 線(下)を表示 */
}
-->
</style>
<link rel="stylesheet" type="text/css" href="http://img.shinobi.jp/tadaima/tdftad.css">
</head>
<body>
<div class="menu"> <!-- menuクラスを指定したdiv要素でtable要素その他をグルーピング -->
<table>
<tr>
<td class="title">題名など</td> <!-- 左のセルにtitleクラスを指定 -->
<td class="desc">ここに説明</td> <!-- 右のセルにdescクラスを指定 -->
</tr>
<tr>
<td class="title">題名。</td>
<td class="desc">ここに説明。</td>
</tr>
<tr>
<td class="title">ここの大きさは300pxがいい</td>
<td class="desc">ここは500がいい。</td>
</tr>
</table>
</div>
</body>
</html>
ここまで
<div class="menu">
<table>
<td class="title">左セル</td>
<td class="desc">右セル</td>
</table>
<div>
上記の「左セルの行」と「右セルの行」を一組として、これを好きな回数だけ繰り返してください。
例：
<div class="menu">
<table>
<td class="title">左セル1</td>
<td class="desc">右セル1</td>
<td class="title">左セル2</td>
<td class="desc">右セル2</td>
<td class="title">左セル3</td>
<td class="desc">右セル3</td>
</table>
<div>
装飾はスタイルシートで指定しています。左セル(のtd)には「class="title"」を、右セル(のtd)には「class="desc"」を追加してください。
後は、対応する部分のスタイル(先頭の<style>～</style>の部分)を書き換えるだけで全ての左セル・右セルに同様のスタイルが適用されます(書き換える場所はコメントを参考にしてください)。
ちなみに、私ならば下記のようにdl(定義リスト)要素としてマークアップした後、それらをスタイルシートで装飾します。こちらは詳細に説明すると小冊子が書けてしまうので、すみませんがここでは割愛させていただきます。
<dl>
<dt>料理名</dt>
<dd>説明</dd>
<dt>料理名</dt>
<dd>説明</dd>
<dt>料理名</dt>
<dd>説明</dd>
</dl>
No.1
39132
30pt
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title></title><style type="text/css"><!--.td1{font-size: 15px;height: 20px;width: 300px;border-bottom: solid #000000 1px;}.td2{font-size: 15px;height: 20px;width: 500px;border-bottom: solid #000000 1px;}--></style></head>
<body>
＜table＞
＜tr＞
＜td class="td1"＞題名１＜/td＞
＜td class="td2"＞説明１＜/td＞
＜/tr＞
＜tr＞
＜td class="td1"＞題名２＜/td＞
＜td class="td2"＞説明２＜/td＞
＜/tr＞
＜/table＞
</body></html>
回答の都合上、tableの括弧は全角になっていますのでご注意ください。
同様に、stylesheetの空白などは抜いてあります。
文字は12pxで指定してあるので、必要ならば変更して下さい。
font-sizeをいじればOKです。
stylesheetは基本そのままコピペで使えます。
ご理解されていると思いますが、htmlタグの前の一文を忘れずに・・↓
＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd＞
http://www.yahoo.co.jp(dummy)
おお！随分スッキリです！！有難うございます！！
あの・・・これって外部スタイルシートで指定してるんですよね？（表現方法違うかも）
私の質問の仕方が悪いのでしょうか。
http://www.tagindex.com/stylesheet/table/width_height.html
の例ように
（サイト内より抜粋。）
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE TYPE="text/css"> </p> <p> <!-- </p> <p> </p> <p> TABLE { </p> <p> border: ○px solid; </p> <p> width: ○px; </p> <p> height: ○px; </p> <p> } </p> <p> TD, TH{ border: ○px solid; } </p> <p> </p> <p> --> </p> <p> </STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
みたいな記述方法はでは出来ないんでしょうか・・・。（簡単にしたいので。）
（THは使いません。）
無知ですいません。
No.2
37952
ここでベストアンサー
20pt
tableを使うことを前提として回答します。下記のような感じではいかがでしょうか？
ここから
<html>
<head>
<title>タイトル</title>
<style type="text/css">
<!--
body {
background-image : url("");
background-attachment: fixed;
background-position: 0% 0%;
background-repeat: repeat-y;
background-color:#ffffff;
}
/* グルーピングしたmenuクラスのスタイル */
div.menu {
text-align: center; /* tableを中央に寄せる(IEのバグ対策) */
}
/* menuクラス内のtable要素のスタイル
ここにテーブルのスタイルを記述する */
div.menu table {
margin: 0 auto; /* テーブルを中央に寄せる */
border: none; /* 枠線を表示しない */
text-align: left; /* セル内のテキストを左に寄せる(IEのバグ対策) */
}
/* menuクラス内のtitleクラスのスタイル
ここに左セルのスタイルを指定する */
div.menu td.title {
width: 300px; /* 左セルの横幅 */
font-size: 15px; /* フォントサイズ */
border-bottom: solid 1px black; /* 線(下)を表示 */
}
/* menuクラス内のdescクラスのスタイル
ここに右セルのスタイルを指定する */
div.menu td.desc {
width: 500px; /* 右セルの横幅 */
font-size: 15px; /* フォントサイズ */
border-bottom: solid 1px black; /* 線(下)を表示 */
}
-->
</style>
<link rel="stylesheet" type="text/css" href="http://img.shinobi.jp/tadaima/tdftad.css">
</head>
<body>
<div class="menu"> <!-- menuクラスを指定したdiv要素でtable要素その他をグルーピング -->
<table>
<tr>
<td class="title">題名など</td> <!-- 左のセルにtitleクラスを指定 -->
<td class="desc">ここに説明</td> <!-- 右のセルにdescクラスを指定 -->
</tr>
<tr>
<td class="title">題名。</td>
<td class="desc">ここに説明。</td>
</tr>
<tr>
<td class="title">ここの大きさは300pxがいい</td>
<td class="desc">ここは500がいい。</td>
</tr>
</table>
</div>
</body>
</html>
ここまで
<div class="menu">
<table>
<td class="title">左セル</td>
<td class="desc">右セル</td>
</table>
<div>
上記の「左セルの行」と「右セルの行」を一組として、これを好きな回数だけ繰り返してください。
例：
<div class="menu">
<table>
<td class="title">左セル1</td>
<td class="desc">右セル1</td>
<td class="title">左セル2</td>
<td class="desc">右セル2</td>
<td class="title">左セル3</td>
<td class="desc">右セル3</td>
</table>
<div>
装飾はスタイルシートで指定しています。左セル(のtd)には「class="title"」を、右セル(のtd)には「class="desc"」を追加してください。
後は、対応する部分のスタイル(先頭の<style>～</style>の部分)を書き換えるだけで全ての左セル・右セルに同様のスタイルが適用されます(書き換える場所はコメントを参考にしてください)。
ちなみに、私ならば下記のようにdl(定義リスト)要素としてマークアップした後、それらをスタイルシートで装飾します。こちらは詳細に説明すると小冊子が書けてしまうので、すみませんがここでは割愛させていただきます。
<dl>
<dt>料理名</dt>
<dd>説明</dd>
<dt>料理名</dt>
<dd>説明</dd>
<dt>料理名</dt>
<dd>説明</dd>
</dl>
細かく説明していただき有難うございます
hiro7days様にもお返事させていただいたように
http://www.tagindex.com/stylesheet/table/width_height.htmlの例の様なカンジ（ＴＨは使わないのですが）で
出来ないのでしょうか・・・。
それとも外部呼出しじゃないと
指定できないのでしょうか・・・。無知ですいません
No.3
37952
20pt
>hiro7days様にもお返事させていただいたように
>http://www.tagindex.com/stylesheet/table/width_height.htmlの例の様なカンジ（ＴＨは使わないのですが）で
>出来ないのでしょうか・・・。
今回のご質問のような件は、まさにtableデザインのやっかいな部分とも言えますが、回答させていただいた点だけでも以前よりは楽になるのではないかと思います。
このHTMLからすると、td要素を区別するためのclass属性を付けて区別してやるのが適切だし、そうする必要があると思います。
td要素が二つ並んでいるだけでは、それがどういった意味を持つものなのかはコンピュータに伝えることは不可能ですので…。
スタイルシートを使用されたいとのことですが、実はできなくもありません。
「td.title」と「td.desc」の部分を下記のように書き換えれば、td要素に「class="title"」や「class="desc"」を付けなくても上手くいきます。
ただ、現在シェアのもっとも大きいIEだけが対応していませんので、現実的ではありませんし、「IEで上手く表示されなくなってしまう」(IE7では対応)ので、やはりHTMLそのものを全体的に書き換えるか、class属性をくっつけてやるのが適切だと思います。
/* td要素のスタイルを指定する */
td {
width: 300px; /* セルの横幅 */
font-size: 15px; /* フォントサイズ */
border-bottom: solid 1px black; /* 線(下)を表示 */
}
/* td要素と隣接するtd要素(=２つ目以降のtd要素)のスタイルを指定する */
td + td {
width: 500px; /* 右セルの横幅 */
}
------------------------------------------------------------
/* td要素のスタイルを指定する */
td {
width: 500px; /* セルの横幅 */
font-size: 15px; /* フォントサイズ */
border-bottom: solid 1px black; /* 線(下)を表示 */
}
/* tr要素内の最初のtd要素のスタイルを指定する */
tr > td:first-child {
width: 300px; /* 右セルの横幅 */
}
------------------------------------------------------------
他にもいくつか方法はありますが、やはりほぼIEだけが対応していないために使えません。
一応、今後のご参考までに…。
ありがとうございました
追伸＿＿＿＿
今やってみました（17：30）
そしたら出来たんですが
<link rel="stylesheet" type="text/css" href="">
を消してもちゃんと表示されるんですが
（http://img.shinobi.jp/tadaima/tdftad.cssのＣＳＳを自分のＨＰにＵＰして変わった（表現下手でごめんなさい）
ＣＳＳのアドレスがあってるかどうか試したく一度消した。）
何故でしょうか？
<link rel="stylesheet" type="text/css" href="ＨＰにＵＰしたＣＳＳのアド">
を書き加えても全く同じように自分の
思っていた通りに表示されてます
なくて表示されるんなら無いに越した事は無いんですが
なぜ<link rel="stylesheet" type="text/css" href="">
が無くても表示されるのかなあと思いまして
ちなみに私のパソコンはＷＩＮＸＰ ＩＥです。
このＣＳＳはいらないのでしょうか？
回答者制限を変えたのですいませんが教えて下さい。
あとtext-align: center; /* tableを中央に寄せる(IEのバグ対策) */と書かれてあったのですが
これはleftやrightなりに変更しても構いませんか？
あわせて教えて下さい
No.4
37952
20pt
なくて表示されるんなら無いに越した事は無いんですが
なぜ<link rel="stylesheet" type="text/css" href="外部CSSファイル">
が無くても表示されるのかなあと思いまして
回答させていただいた例では、HTML中の
<style type="text/css">
<!--
から
-->
</style>
の間に、スタイルを埋め込んでいますので、この部分で指定しているものに関しては、外部のスタイルシートを読み込む必要はありません。
削除しても変わらないということは、外部スタイルシートのスタイルは適用されていないということだと思うので削除してしまってもよいと思います。
あとtext-align: center; /* tableを中央に寄せる(IEのバグ対策) */と書かれてあったのですが
これはleftやrightなりに変更しても構いませんか？
あわせて教えて下さい
変えても構わないのですが、これが適用されるのはIEだけになります(そして、これで表(table)が中央や左右に表示されるのはIEのバグです)。
もし、表(table)全体を左寄せにしたいのであれば、
/* グルーピングしたmenuクラスのスタイル */
div.menu {
/* ここにあったtext-align～の行を削除 */
}
/* menuクラス内のtable要素のスタイル
ここにテーブルのスタイルを記述する */
div.menu table {
/* ここにあったmargin～の行を削除 */
border: none;
text-align: left;
}
というような感じで、２行ほど削除してもらえれば上手くいくと思います。
右寄せにしたい場合には、
/* グルーピングしたmenuクラスのスタイル */
div.menu {
text-align: right; /* IE対策 */
}
/* menuクラス内のtable要素のスタイル
ここにテーブルのスタイルを記述する */
div.menu table {
margin: 0 0 0 auto; /* 右マージンを0、左マージンを自動にする */
border: none;
text-align: left;
}
という感じでおそらく上手くいくのではないかと思います。
CSSを使用してのデザインは、(X)HTMLの書き方や他の部分との絡みで、影響を受けますので全てがこれで上手くいくというわけではありませんが、今回の例ではこの通りでおそらく上手くいくのではないでしょうか。
今後も改変の予定があるのであれば、一度、しっかりと(X)HTMLとCSSについて勉強されると、今回よりも格段にメンテナンスが楽になると思いますよ。
始めは少し難解かもしれませんが、下記の書籍等おすすめです。
わかりましたありがとうございました！！
| 回答者 | 回答 | 受取 | ベストアンサー | 回答時間 | |
|---|---|---|---|---|---|
| 1 |  fragarach |
43回 | 37回 | 7回 | 2006-07-25 07:13:45 |
| 2 |  naleringar |
110回 | 105回 | 5回 | 2006-07-25 07:44:49 |
28
22
2
1
1
細かく説明していただき有難うございます
hiro7days様にもお返事させていただいたように
http://www.tagindex.com/stylesheet/table/width_height.htmlの例の様なカンジ（ＴＨは使わないのですが）で
出来ないのでしょうか・・・。
それとも外部呼出しじゃないと
指定できないのでしょうか・・・。無知ですいません