テーブルとCSSの相性

このQ&Aのポイント
  • ビルダーを使ってHPを作ろうと試みましたが、基本を自分でわかっていたいタイプな上、細部にこだわりたいため、残念ながら肌に合いませんでした。
  • ここで紹介されているサイトをいろいろと見て回っているのですが、スタイルシートを外部に作る際、tableは使わないほうがよいのでしょうか。
  • 初心者のためテーブルを使っていいのかいけないのかわからなくなってしまいました。
回答を見る
  • ベストアンサー

テーブルとCSSの相性

ビルダーを使ってHPを作ろうと試みましたが、基本を自分でわかっていたいタイプな上、細部にこだわりたいため、残念ながら肌に合いませんでした。 現在は、メモ帳(→EmEditor)で骨子を作っています。 もう少し慣れてきたら、逆にビルダーを使いこなせるようになるのでは、と思っています。  ところで、ここで紹介されているサイトをいろいろと見て回っているのですが、スタイルシートを外部に作る際、tableは使わないほうがよいのでしょうか。  http://www.shoshinsha.com/hp/index.html ←ここではテーブルを使用しているようですが、 http://www.2step-css.com/basics/index.htm ←こちらは推奨していません。 http://ja.wikipedia.org/wiki/Cascading_Style_Sheets ←「Web業界もCSSデザインが主流となりつつあるが、上記の欠点をまるで存在しないかのように振る舞うCSS推進派と、上記の欠点に常に悩まされ続けているテーブルレイアウト保守派の間にはあきらかな温度差があり、現場のWebデザイン関係者との会話が成立しない場合が多々ある。」 とのことなのですが、初心者のためテーブルを使っていいのかいけないのかわからなくなってしまいました。  アドバイスをいただけませんか?

質問者が選んだベストアンサー

  • ベストアンサー
  • dezimac
  • ベストアンサー率56% (2365/4208)
回答No.1

別にレイアウト目的でテーブル使ってもいいですよ。 現にこのページもテーブルレイアウトです。配色等はCSSで行っていますが。 CCSで悩んでいるより、テーブルでレイアウトしてその分内容に時間をかけた方がいいでしょう。 将来的に、正しいHTMLをかけるようになってからCSSでレイアウトし直してもいいです。 CSS使っても正しいHTML書いていないと意味ないですから。 テーブル使う際は、複雑にし過ぎると表示に時間がかかりますので注意を。 http://www2.plala.or.jp/Cool/okite/red07.html CSSを正しく使えればメリットは多いですが、 CSSはブラウザによって解釈が異なるので、それを調整するのに苦労しますよ。 Windows版IE6以前が特に厄介な存在です。解釈が独特な上に、ユーザー数が多いですから。 http://rinrin.saiin.net/~aor/akr_m/brwsr/ http://rinrin.saiin.net/~aor/

vampire-
質問者

お礼

新・テーブル九重 危険! ←コレ、丁度さっきクリックしてしまい、たいへんなことになりました。 なんだか安心しました。 わけのわからないまま前に進めず・・・。 アドバイスにしたがって、テーブルを使って先に進めます。 ありがとうございました。

関連するQ&A

  • cssでテーブルで細い線 その2

    こんにちはー。 「cssでテーブルで細い線」について http://okwave.jp/qa/q8073990.html で、教えて頂いたのですが どうしても出来ません。 例えば、こんな感じでやってみました。 ―――― <html> <head> <style type="text/css"> table[summary="WebDesign"]{ border-collapse: collapse; width: 400px; } table[summary="WebDesign"],table[summary="WebDesign"] td{ boder:solid 1px #1C79C6; } </style> </head> <body> <table summary="WebDesign"><!-- summaryは必須 TBODY+ -->  <tbody><!-- tbodyはひとつ以上必須 -->   <tr>    <td>Webデザイン</td>    <td>Webデザイン</td>   </tr>   <tr>    <td>Webデザイン</td>    <td>Webデザイン</td>   </tr>  </tbody> </table> </body> </html> アップ先 http://yasaidemo.web.fc2.com/index2.html ―――― アップ先をご覧頂ければおわかりになると思いますが 中の線が出てきません。 私のスキル不足で大変に申し訳ございませんが ご指導ご鞭撻のほどお願いします。

    • ベストアンサー
    • CSS
  • CSSかテーブルか?

    はじめまして。 WEBサイトのソースを見て、CSSスタイルシートかテーブルで作られたかを判断できるのでしょうか? できるのであれば判断方法を教えてください。 本当に初心者で、とんだ勘違い質問かもしれませんがどうかよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • HP作成 table?css?

    こんにちは。 HTMLの勉強がてらHP作成をしているところです。 デザインの事なのですが、 3色の色でストライプ模様を作りたいと思ってます。 現在、テーブルで色指定をしたりしてるのですが、デザインの事はCSSを使った方がよいらしい・・という事を小耳に挟みました。 CSSを使えばどういうメリットがあるのでしょうか?? テーブル使うメリット・デメリットは? HP作成に着手したばかりであまりわかりません。よろしくお願い致します。

  • cssでテーブルで細い線

    スタイルシートを使って 1ピクセルの細い線にしようと、 サンプルのように以下のようにしてみましたが 中の線(td?)が二重になってしまいます 一線にするのにどのようにすればイイですか? ―――――――― .table2 { width: 400px; /* テーブルの横幅 */ border-collapse: collapse; /* 枠線の表示方法 */ border: 1px #1C79C6 solid; /* テーブル全体の枠線(太さ・色・スタイル) */ background-color: #FFFFFF; /* 背景色 */ } .table2 TD { border: 1px #1C79C6 collapse; /* セルの枠線(太さ・色・スタイル) */ } ―――――――――――――― <TABLE CLASS="table2"> <TR> <TD>WebデザインA</TD> <TD>WebデザインB</TD> </TR> <TR> <TD>WebデザインC</TD> <TD>WebデザインD</TD> </TR> </TABLE>

    • ベストアンサー
    • CSS
  • スタイルシートcssで、テーブルの colspanに該当するもの?

    スタイルシートcssで、テーブルの colspanに該当する ものはあるのでしょうか? とほほhttp://tohoho.wakusei.ne.jp/css/index.htm を見ているのですが、スタイルシートの構文が異様に少ないと感じますが、これがすべてでしょうか? あと、現在のHTMLの最新系は何でしょうか? XHTMLなど聞いたことがありますが、私はまだ スタイルシートで悩んでいます。

    • ベストアンサー
    • HTML
  • CSSの覚え方

    ブログをやりたいのですが、スタイルシート CSS という概念がよく分かりません。HPビルダーを使っているのですが、どうすれば取っつきやすく理解できますか? まず、具体的にどうやって覚えていけばいいか教えてください。

    • ベストアンサー
    • HTML
  • テーブルレイアウトの外側

    こんにちは。 現在テーブルレイアウトでホームページを作成しています。 http://www.shoshinsha.com/hp/ のようにテーブルレイアウト内側を白にして、何もないことがわかる様にテーブルレイアウトの外側を黒とか色を変えたいのです。 何かアドバイスをお願いします。

    • ベストアンサー
    • HTML
  • CSSレイアウトってなぜこんなに難しいのか?

    個人事業で、WEBデザインの仕事をしています。 恥ずかしいですが、ずーっと、テーブルレイアウトでのみHP作成してきました。 文字を整えたり、種類をまとめたりだけ、CSSを使ってました。 先日初めて、クライアントから「そろそろテーブルレイアウトはやめてくれ」と、 ダメだしを食らいました。 独学でDreamweaver MX 2004を一から学んで、仕事やって来ましたが、 ちょっと恥ずかしい質問ですが、 CSSレイアウトってなぜ、こんなに難しいのでしょうか?? みなさん、テーブルレイアウトと比べて異常に難しく感じませんか? 今の調子ではHP作成の仕事が請けられなくなっています。(涙) 例えば、テーブルレイアウトって、自由にドキュメントで確認しながらデザインできますよね。 でも、CSSレイアウトって、コードで全部書き出しますので、 ちょっとサイズや項目や要素を変更するだけでも、どのdiv?、どのクラス?のタグにそれを指定したかとか、 複雑になり解らなくなってしまい、ちょっと変更するだけでも凄い時間がかかってしまいます。 ■もしかして私、CSSレイアウトの学び方、作り方を間違ってるのでしょうか? ■今まで2~3冊位、Dreamweaverの本で、CSSレイアウトを勉強してますが、  いっこうに進歩しません。(ここに本の題名書き出すとマズイですよね?) ★CSSレイアウトが解り易く学べる、勉強本を教えて頂けますでしょうか。 ■もしかして、DreamweaverでCSSレイアウトをするから難しいのでしょうか?  HPビルダーとかなら、もっと簡単に出来るのでしょうか? ■今、私ができるCSSレイアウトの限界は、一番大まかな囲いの、 #header #side #main #footerを、#contentの中に入れて、 その中の各々の要素は、今までとおり、テーブルでレイアウトする。 (メニューや、商品スペック、写真並べなども、テーブルで。) それが精一杯ですが、これで通用するのでしょうか? HPデザイナーとして、恥ずかしい質問ですが、 ご教授どうぞ宜しくお願い致します。

  • テーブルの角を丸くして、立体的に

    先日、IEでも閲覧可能で、 テーブルの線を細くするスタイルシートを このように教えて頂きました。 このスタイルシートから、 テーブルの角を丸くして、 立体的にする書き方を教えて頂けると とっても助かります。 ------------ <!DOCTYPE html> <html lang="ja"> <head> <style type="text/css"><!-- table.WebDesign{ border-collapse: collapse; width: 400px;} table.WebDesign,table.WebDesign td{border:solid 1px #1C79C6;} --></style> </head> <body><div> <table class="WebDesign"> <tr><td>Webデザイン</td><td>Webデザイン</td></tr> <tr><td>Webデザイン</td><td>Webデザイン</td></tr> </table> </div></body></html>

    • ベストアンサー
    • CSS
  • テーブルではなく出来るだけCSSでサイトを作りたい・・・

    変な質問で申し訳ありません。 テーブルで組むのではなく 出来るだけCSSでサイトを作りたいと思うのですが テーブルの場合はDreamWeaver上で制作の際 実際のHPと同じような見た目で作っていけますが CSSで組むと、DreamWeaverで制作途中、実際の完成版と 違って変なすきまが空いたり、抜けていたり・・・でも プレビューすると一応出来ているというような現象に かなり違和感というか戸惑いがあります。 テーブルで慣れてしまっているだけに。 これはどう克服したらいいのでしょうか。 WEB技術者の方どうかご指導宜しくお願いします。