前に同じ様な質問をしたのですが、うまく出来ず

再度質問させていただきます。

まずはこれを見てください↓
http://styleb.genin.jp/

スタイルシートでの指定方法と
他に”テーブルよりもこっちの方がいいよ”みたいのが有ればあわせて教えていただけると嬉しいです。
(リンク集はご遠慮ください)
私でも判るように詳細にお願いします

回答の条件
  • URL必須
  • 1人5回まで
  • 登録:2006/07/25 04:07:52
  • 終了:2006/07/26 02:31:42

ベストアンサー

id:wizemperor No.2

wizemperor回答回数379ベストアンサー獲得回数522006/07/25 05:37:56

ポイント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>

id:ookawa-man

細かく説明していただき有難うございます

hiro7days様にもお返事させていただいたように

http://www.tagindex.com/stylesheet/table/width_height.htmlの例の様なカンジ(THは使わないのですが)で

出来ないのでしょうか・・・。

それとも外部呼出しじゃないと

指定できないのでしょうか・・・。無知ですいません

2006/07/25 07:52:04

その他の回答(5件)

id:hiro7days No.1

hiro7days回答回数391ベストアンサー獲得回数322006/07/25 07:23:39

ポイント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">題名1</td>

<td class="td2">説明1</td>

</tr>

<tr>

<td class="td1">題名2</td>

<td class="td2">説明2</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)

id:ookawa-man

おお!随分スッキリです!!有難うございます!!

あの・・・これって外部スタイルシートで指定してるんですよね?(表現方法違うかも)

私の質問の仕方が悪いのでしょうか。

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は使いません。)

無知ですいません。

2006/07/25 08:07:24
id:wizemperor No.2

wizemperor回答回数379ベストアンサー獲得回数522006/07/25 05:37:56ここでベストアンサー

ポイント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>

id:ookawa-man

細かく説明していただき有難うございます

hiro7days様にもお返事させていただいたように

http://www.tagindex.com/stylesheet/table/width_height.htmlの例の様なカンジ(THは使わないのですが)で

出来ないのでしょうか・・・。

それとも外部呼出しじゃないと

指定できないのでしょうか・・・。無知ですいません

2006/07/25 07:52:04
id:wizemperor No.3

wizemperor回答回数379ベストアンサー獲得回数522006/07/25 08:56:12

ポイント20pt

>hiro7days様にもお返事させていただいたように

>http://www.tagindex.com/stylesheet/table/width_height.htmlの例の様なカンジ(THは使わないのですが)で

>出来ないのでしょうか・・・。

今回のご質問のような件は、まさにtableデザインのやっかいな部分とも言えますが、回答させていただいた点だけでも以前よりは楽になるのではないかと思います。

このHTMLからすると、td要素を区別するためのclass属性を付けて区別してやるのが適切だし、そうする必要があると思います。

td要素が二つ並んでいるだけでは、それがどういった意味を持つものなのかはコンピュータに伝えることは不可能ですので…。


スタイルシートを使用されたいとのことですが、実はできなくもありません。

「td.title」と「td.desc」の部分を下記のように書き換えれば、td要素に「class="title"」や「class="desc"」を付けなくても上手くいきます。

ただ、現在シェアのもっとも大きいIEだけが対応していませんので、現実的ではありませんし、「IEで上手く表示されなくなってしまう」(IE7では対応)ので、やはりHTMLそのものを全体的に書き換えるか、class属性をくっつけてやるのが適切だと思います。


  • 方法その1 ---------------------------------

/* td要素のスタイルを指定する */

td {

width: 300px; /* セルの横幅 */

font-size: 15px; /* フォントサイズ */

border-bottom: solid 1px black; /* 線(下)を表示 */

}

/* td要素と隣接するtd要素(=2つ目以降のtd要素)のスタイルを指定する */

td + td {

width: 500px; /* 右セルの横幅 */

}

------------------------------------------------------------


  • 方法その2 --------------------------------

/* td要素のスタイルを指定する */

td {

width: 500px; /* セルの横幅 */

font-size: 15px; /* フォントサイズ */

border-bottom: solid 1px black; /* 線(下)を表示 */

}

/* tr要素内の最初のtd要素のスタイルを指定する */

tr > td:first-child {

width: 300px; /* 右セルの横幅 */

}

------------------------------------------------------------


他にもいくつか方法はありますが、やはりほぼIEだけが対応していないために使えません。

一応、今後のご参考までに…。

id:ookawa-man

ありがとうございました

追伸____

今やってみました(17:30)

そしたら出来たんですが

<link rel="stylesheet" type="text/css" href="">

を消してもちゃんと表示されるんですが

http://img.shinobi.jp/tadaima/tdftad.cssのCSSを自分のHPにUPして変わった(表現下手でごめんなさい)

CSSのアドレスがあってるかどうか試したく一度消した。)

何故でしょうか?

<link rel="stylesheet" type="text/css" href="HPにUPしたCSSのアド">

を書き加えても全く同じように自分の

思っていた通りに表示されてます

なくて表示されるんなら無いに越した事は無いんですが

なぜ<link rel="stylesheet" type="text/css" href="">

が無くても表示されるのかなあと思いまして

ちなみに私のパソコンはWINXP IEです。

このCSSはいらないのでしょうか?

回答者制限を変えたのですいませんが教えて下さい。

あとtext-align: center; /* tableを中央に寄せる(IEのバグ対策) */と書かれてあったのですが

これはleftやrightなりに変更しても構いませんか?

あわせて教えて下さい

2006/07/25 18:15:03
id:wizemperor No.4

wizemperor回答回数379ベストアンサー獲得回数522006/07/26 02:03:57

ポイント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;

}


というような感じで、2行ほど削除してもらえれば上手くいくと思います。

右寄せにしたい場合には、


/* グルーピングした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について勉強されると、今回よりも格段にメンテナンスが楽になると思いますよ。

始めは少し難解かもしれませんが、下記の書籍等おすすめです。

http://www.amazon.co.jp/gp/product/4798010928/

id:ookawa-man

わかりましたありがとうございました!!

2006/07/26 02:30:25

質問者が未読の回答一覧

 回答者回答受取ベストアンサー回答時間
1 fragarach 41 37 7 2006-07-25 07:13:45
2 naleringar 110 105 5 2006-07-25 07:44:49

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません