- ベストアンサー
CSSで表のデザインをするには
ホームページの作成を今めざしています。 それで、デザインをしやすいようにCSSを使って作ろうと思っているのですが、よくわからないことがいくつかありまして・・・。 文字のデザインは他のサイトやブログなどを参考にして何とかなったのですが、表を使ってレイアウトしようとするとうまくいきません。 そこで質問なのですが、 １．ウインドウの幅を縮めてもレイアウトが崩れないようにするにはどうすればよいのでしょうか？ ２．表のセルごとに異なる配色や幅を指定するにはどうすればよいのでしょうか？ これがどうにも分かりません・・・ この方法が分かる方、ご指導いただけると幸いです・・・
- oNiOnEg39
- お礼率82% (32/39)
- その他（インターネット・Webサービス）
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
■１．ウインドウの幅を縮めてもレイアウトが崩れないようにするには？ <TABLE>の幅を固定してしまえばいいです。 今、<TABLE WIDTH="90%">のように『％』で指定しているなら、それをやめて <TABLE WIDTH="800">のように、数字で固定してしまえば中身は崩れません。 そのかわり、ウインドウ幅を狭くして見ると、下にスクロールバーが出ます。 ■２．表のセルごとに異なる配色や幅を指定するには？ htmlファイルの<head>～</head>にCSSを書き込むのではなくて 別の.cssファイルを作って、それを読み込ませるんですよね？ その場合は、こう↓です。 ------------------------------ （例1）.white { background-color:#FFFFFF; color:#000000; } これがclass指定です。 最初に『.○○』というように、classの名前をつけます。 その後「 { } 」で囲んで、その中に各スタイルを入れていきます。 で、tableにこのclassを指定したい時は、こんな感じ↓です。 <table> <tr> <td class="white">あいうえお</td> <td class="white">あいうえお</td> </tr> </table> これで、「あいうえお」と書いてあるセルの背景は白、文字の色は黒です。 「class」の場合は、いくつも使うことができるので「パターン」として使います。 （例えば、背景が白で文字が黒のセルをいくつも作る時などに使用） ------------------------------ （例2）#sub_title { background-color:#000000; color:#FF0000; } これがid指定です。 最初に『#○○』というように、idの名前をつけます。 その後「 { } 」で囲んで、その中に各スタイルを入れていきます。 で、tableにこのidを指定したい時は、こんな感じ↓です。 <table> <tr> <td id="sub_title">タイトル</td> </tr> </table> これで、「タイトル」と書いてあるセルの背景は黒、文字の色は赤です。 「id」の場合は、限られた１ヶ所に使います。 （例えば、タイトル部分や、背景に個別の画像を使う時などに使用） ------------------------------ 上の２つの（例）をまとめると、このような使い方になります。 <table> <tr> <td id="sub_title" colspan="2">タイトル</td> </tr> <tr> <td class="white">あいうえお</td> <td class="white">あいうえお</td> </tr> <tr> <td class="white">あいうえお</td> <td class="white">あいうえお</td> </tr> </table> ------------------------------ ■テーブルの場合の、セルの幅指定 これは直接<td width="xxx">というように書くしかないと思います。 スタイルシートで幅も指定するなら<DIV>タグを使えばいいのですが スタイルシートがあまり分かってない場合は、<DIV>でレイアウトをすると 崩れる確率がかなり高いので、徐々に勉強しつつ <table>レイアウトから<DIV>レイアウトに変えていけるといいですね！ がんばってください（＾＾）
その他の回答 (1)
- pbforce
- ベストアンサー率22% (379/1719)
CSSよりTableタグの方が向いているのではないでしょうか？
お礼
ありがとうございます。 はい、最初はそう思っていたのですが、複数のページを同じデザインで作ってまとめて変更できたら便利だなあ、とか思ったもので・・・
お礼
ありがとうございます！ おっしゃる通りにしたらうまくいきました。 作り始めた矢先にさっそく行き詰まっていたのでやる気を無くしかけていたのですが、またやる気が出てきました。 たぶんどこかでまた分からないことが出てくると思うので、その時にはまたよろしくお願いします(笑)