- ベストアンサー
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タグの方が向いているのではないでしょうか？
お礼
ありがとうございます。 はい、最初はそう思っていたのですが、複数のページを同じデザインで作ってまとめて変更できたら便利だなあ、とか思ったもので・・・
関連するQ&A
- 表をcssでデザインする場合
css初心者です。宜しくお願いします。 テーブルの各セル幅のサイズを指定してセルの背景やセル内の文字をcssで装飾したいのですが、こういう場合、セル幅はhtmlタグで指定しておくべきなのでしょうか？ またセル内に余白を設けたい場合はhtmlタグとcssのどちらで指定すればいいのでしょうか？ cssが効かないブラウザで見た時のことを考えると幅サイズや余白をhtmlタグで指定した方がセルがくっつかず見やすいのかな～？と思ったのですが。 アホな質問でしたらすみません。 宜しくお願いします。
- ベストアンサー
- CSS
- CSSでの表の作成について
CSSでの表の作成方法を教えてください。 table要素使わずCSSのみで表の作成は可能でしょうか？ 作成したい表は 2列10行の表で、列幅は それぞれ違った幅を指定、行の高さも それぞれの行によって 高さを変えたいと思っています。 背景色の指定、ボーダーの指定もしたいです。 table要素使わずCSSのみで表を作成するには、どうしたらいいのか教えてください。 初心者なので、CSSの内容とHTMLの内容（ソース）を書いたものがあると助かります。 どうかよろしくお願いします。
- 締切済み
- その他([技術者向] コンピューター)
- CSSで、表をデザインしたいのですが…
CSS初心者です。 現在作っているサイトは、CSSの部分とHTMLは別ファイルになっています。 CSSで表をデザインしたいのですが、ページによって表のレイアウトが違い、パターンが5～6種類あります。 CSSでの表の設定はおおむねわかりますが、 ・1つの表にしか使わない記述を、それぞれの表の数だけいくつもいくつも書くのか？ ・それだったら、HTMLの中にHTMLとして記述してもいいのでは？ ・でも、CSSで書いた方がいいであろう設定をHTMLに書いて混在させるのはあまりすっきりしない… と、悩んでいます。 このようなサイトを作る場合は、普通どのようにするのでしょう？ また、いくつものパターンの表の設定をするのに、一気に設定できるような方法はあるのでしょうか？ 表は、○列○行といったようなごくシンプルなものばかりで、ただそれぞれが列と行の数が違うものです。 もしかしたらとんでもない考え方をしているのかもしれませんが、どうかご教示下さい。
- ベストアンサー
- CSS
- HPBでの表のcssについて
ＨＰＢver10でホームページを作成しています。 表の作成時ですが、table.cssが作成されますよね？ cssについて知らないのですが、 デザインを参照するファイルのようなものだと思っています。 ですが、サイト内の表のデザインはそれぞれ別にしているので、cssでなくても…と思うのですが。 みなさん、ＨＰＢ使用時の表の保存どのようにされているのでしょうか？ 画像ファイルのように、css用フォルダを作ってそこに保存したりするのでしょうか？？ いろいろ調べてはみたのですが、初心者すぎて分かりませんでした。 分かりづらいとは思いますが、どうぞよろしくお願いします！
- ベストアンサー
- ホームページ作成ソフト
- ホームページビルダーでcssレイアウトは可能ですか？
Web制作初心者です。 Htmlのtableでトップページ全体をレイアウトすると、読み込みが遅くなるそうですが、ホームページビルダー9を使っているため、レイアウトを作るのは簡単にすみ、いままでtableで作成してきました。 今度、新たにサイトを作るのですが、cssでレイアウトを作りたいと思います。そこで、ホームページビルダー9はcssでtableのようなレイアウトを作ることは可能なのでしょうか？ tableの場合は、「表の挿入」を選んで、「行の追加」や「列の追加」、「選択セルの結合」とかでどんどん表を作っていって、セルに画像追加や文字を書いていました。 こういうのはcssでは（ホームページビルダー上では）どのようにするのでしょうか？ あと、tableを作って、その下にもtableを追加していくと、ページをプレビューした場合、下のほうに行くにつれてそれぞれの表がズレていきます。cssではズレないようにできるのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- macで見たＣＳＳで作られたページについて
今までテーブルレイアウトをしてきましたが、 ＣＳＳレイアウトに移行しつつあります。 WIN XPで作成しているのですが,MACのIEで見るとレイアウトが崩れます。WINのIEではエラーはないんです。 MACの方だとスペースや余白などが失われてレイアウトが崩れているようです。 また、ココログのブログなどもずれたりしてレイアウトが崩れます。 様々なブラウザに対応するＣＳＳを使うにはどうしたらいいでしょうか。 わたしは、「”CSSレイアウ践講座” CSSレイアウトでSEOに強く、ソースも軽く、表示も速いホームページを作ろう」というページや「スタイルシートによるレイアウトデザイン見本帖」という本などを参考にしてやっています。
- 締切済み
- HTML
- ホームページビルダーの表について
質問させて戴きます。 ホームページビルダーV9を使ってHPを作成中ですが、 テーブルタグ（表）の使い勝手がわかりません。 基本構成を決めて、標準モードでレイアウトの配置を行っていますが、勝手に横幅が広がって、全くレイアウトが安定しません。セルを分割・統合して、そのセルの幅を編集画面で調整すると、勝手に全体の幅が広がったり、別のセルが短くなったり文字が改行されたりしてしまいます。 これはどうすれば解決するでしょうか？ 宜しくお願いします。 また、その辺に詳しいサイトがありましたら教えて下さい。
- 締切済み
- ホームページ作成ソフト
- ホームページビルダーでの外部CSS
ホームページ作成しています。 ど素人なりに頑張っていますが、内容が増えていくにつれ、だんだん動作が遅くなってきました。 そこで、最近「外部にスタイルシートを作る」ということを学びましたが、「div」あたりになると、さっぱり理解できず、結局「body」や「A」などのCSSを外部にするという段階にとどまっています。 もうすでに、レイアウトやデザインは決まっているので、今ある「manu」や「head」などを外部CSSに固定すれば、あとは記事を書くだけでページが作れると思うのですが…。 CSSのサイトはいろいろ拝見したのですが、レイアウトの段階になると、途中でわからなくなってしまいます。 ホームページビルダー付属のスタイルシートでは、デザインが合いません。そこで、素人にもわかりやすい、レイアウト枠としての外部CSS作成法をご指導ください。また、そのようなフリースタイルシートのソースなどがあればご紹介ください。 とにかく、外部CSSで、レイアウトを固定したいのです。 よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- 表の考えかた
ホームページビルダーを使っています。 どうも表については、いまいち理解しづらいのですが・・・ 次の考え方は合っていますか？(pixelで指定してます) [表の幅]は・・・ [罫線の幅] + [セル内の余白] + [枠の幅] + [セルの幅] ----------------------------- たとえば、2列の表の場合 [罫線の幅] =2 [セル内の余白] =3 [枠の幅] =2 [セルの幅] =100 ・・・と指定したとき、実際の幅は [罫線の幅] =2 → 2×2=4 [セル内の余白] =3 → 3×4=12 [枠の幅] =2 → 2×2=4 [セルの幅] =100→ 100×2=200 以上合計すると[表の幅]は 4 + 12 + 4 + 200 ＝ 220 ・・・ということになりますか？
- ベストアンサー
- ホームページ作成ソフト
- ＣＳＳの関与した表以外の表を作りたい
ホームページ作成初心者です。コンテンツ部分に表（テーブル）を作りました。 ＣＳＳでパディング、マージンだけ指定してます。 ほとんどの表はこれでいいのですが、これとは別に表を作りたいのです。 その場合ＣＳＳが関与してしまいますが関与しないようにするにはどうすればいいのでしょうか？ 何種類か作らないといけないので困っています。できれば横に２列（個）、下に３列（個）を 少しだけ間を空けてくっつけたいのですが作りかたが分かりません。画像添付しました。 どなたかご教授ください。
- ベストアンサー
- ホームページ作成ソフト
お礼
ありがとうございます！ おっしゃる通りにしたらうまくいきました。 作り始めた矢先にさっそく行き詰まっていたのでやる気を無くしかけていたのですが、またやる気が出てきました。 たぶんどこかでまた分からないことが出てくると思うので、その時にはまたよろしくお願いします(笑)