- ベストアンサー
レイアウトはテーブルよりＣＳＳですか？
今まで、Webサイトのレイアウトは、テーブルを何重にも入れ子にして、行ってきました。 最近、「レイアウトにテーブルを使うのはよくない」「テーブルで全体を囲っているレイアウトはダサい」などの意見を聞くようになってきました。 奮起して、テーブルでつくったページをＣＳＳに書き換えようと思いましたが、なかなか困難です。 位置を左上基点に、それぞれの<div>をabsoluteで設定すれば、比較的容易にレイアウトを組めるのですが、やはり全体を画面の中心に持っていきたい、そうなると、全体をテーブルで囲って、align="center"が簡単です。 そこで、質問です。 ・ＣＳＳでレイアウトを組むとき、左上を基点にされていますか？全体を中央に配置するようにされていますか？ ・ＣＳＳで、全体を中央に配置するとき、全体を<div>で囲って、その中に<div>を入れ子にして、配置していくと思いますが、なかなか思い通りの配置になりません。このやり方であっていますか？簡単なやり方がありますか？ ・やはり、レイアウトにはテーブルよりも、ＣＳＳを使ったほうがいいですか？ ご意見・ご回答いただきたく、どうぞよろしくお願いします。
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
この問題は多分人によって全然意見が違うと思います。テーブルを嫌っている人と同時にCSSを嫌っている人も存在しますし、拘らない人もいます。 また、サイトの見た目をサイズ固定のきめ打ちで作るのはいけない、と思う人もいれば固定しないと上手く出来ないじゃないか、と思う人もいます。 私はどちらかといえばCSSで流動デザインを推奨しているので参考にはならないかもしれませんが…。 ・ＣＳＳでレイアウトを組むとき、左上を基点にされていますか？全体を中央に配置するようにされていますか？ margin:autoで中央に寄せています。でもデザインそのものがウィンドウにあわせての%指定なので左基準でも余り変わりません。 ・ＣＳＳで、全体を中央に配置するとき、全体を<div>で囲って、その中に<div>を入れ子にして、配置していくと思いますが、なかなか思い通りの配置になりません。このやり方であっていますか？簡単なやり方がありますか？ 私も<div>の入れ子はします。もっと簡単な方法もあるのでしょうが…。配置についてはfloatで割と対応できませんかね…？absoluteよりは融通が利く感じじゃないかと思うのですが。（あくまで私見） ・やはり、レイアウトにはテーブルよりも、CSSを使ったほうがいいですか？ 個人的にはそう思います。テーブルは何重もの入れ子にしているとアナログ回線で弱いパソコンだった場合やブラウザなどの相性が良くない場合に（マックとネスケの組み合わせだと危険らしいです）OSを道連れにしてコケる事があるそうです。 あと単純にサイトの模様替えが楽になりますし。外部CSSファイルを弄るだけでサイト内の全てのページを変更出来るというのは利点の一つじゃないでしょうか。 勿論、ブラウザによっては正しくレンダリングされないなどの問題があるようですが、其れはブラウザのバグであってCSSの責任でない以上責められないんじゃないかと。（例えばあるブラウザは1バイトの文字列が一定以上続くとテーブルやborderのwidth属性など無視してどんどん横スクロールのばしてくれるんですが、だから１バイト文字が悪いとは誰も言いません） 取りあえず個人的にはこんな感じです。ある意味哲学の問題（笑）ですね。誰にも迷惑をかけなければテーブルでレイアウトでも構わないのでは。
その他の回答 (5)
- randman
- ベストアンサー率51% (17/33)
ご自分のお作りになるウェブページに最も見合った作り方を、ご自分の判断でお探しになるのがベストかと思います。 というのも、この手の分野では、自分の考えに固執するあまり、判断の偏ってしまった意見が、あらゆるメディアで氾濫しているからです。それこそマガジンからリファレンスまで。 KKatohさんのご回答を読む限り、学習の方向性が最終的な目的から逸れてしまっているような気がしてしまうのですが…。余計な心配でした(￣-￣;) ※個人的には、一番シンプルな方法が一番だと思います。
４番です。 「じゃあ、divを使わずどうやるの？」という 質問が予想されますが、それに対する回答はこうなります。 【回答】何のためにＣＳＳをやろうとしているのですか？ 「まずデザインありき」ならＣＳＳにする意味はありませんので テーブルレイアウトのままでいいのではないでしょうか？
補足
皆様、ご回答ありがとうございます。 本来なら１件、１件に対してお礼を書かねばならないところを、補足欄により、皆様にご連絡することを、深くお詫び申し上げます。 皆様の回答を読みながら、あわせて、ＣＳＳに関する書籍で、色々と勉強いたしました。おぼろげながら、ＣＳＳについて理解できてきたような気がします。 読んだ書籍に中には、ＸＨＴＭＬとＣＳＳおよびホームページの構造に関する書籍もありました。そのため、４番の方のおっしゃっていることも、なんとなく、ほんとになんとなくですが、わかるような気がします。（参考URLも必ず読破いたします） これから、皆様に教えていただいたこと、書籍から得た知識をいかしながら、Ｗｅｂサイトのつくりなおしに着手いたします。 今後も、皆様の教えを請うことがあると存じます。その際は、是非よろしくお願いいたします。 本当にありがとうございました。
ひとつアドバイスさせてください。 > 全体を<div>で囲って、その中に<div>を入れ子にして、配置していくと思いますが それをやるならテーブルレイアウトと同じことで めちゃくちゃダサいです。 ＣＳＳを使う意味はまったくありません。 なぜＣＳＳが推奨されているのかという 本質・目的の部分をもっと勉強してみてください。 ＨＴＭＬとデザインを切り離し、ＨＴＭＬの 文章構造の論理性・汎用性を確保するためです。 <div>を多用しては、文章構造が何にも論理的になりません。 <div>を使うなとは言いませんし、私も使っていますが <div>を入れ子状に多用しているページは 「ＣＳＳを何も分かっていない人間がつくったページ」と 心ある人からは笑われます。 まともなＣＳＳ使いは<div>を使うこと自体を恥と考え できうるなら<div>をまったく使わずに作ろうとします。 「div病」という言葉もあります。 http://www.fromdfj.net/html/divsyndrome.html 「div病」で検索すれば、ほかにも情報が得られると思います。 なお、ここは読むに値するページです。 http://kanzaki.com/docs/htminfo.html ひととおり読むことをお勧めします。
- cuz
- ベストアンサー率43% (7/16)
・ＣＳＳでレイアウトを組むとき、左上を基点にされていますか？全体を中央に配置するようにされていますか？ これは、好みの問題だと思います。個人・企業のサイトを見ても左寄せだったり中央だったり色々ですよね。 ・ＣＳＳで、全体を中央に配置するとき、全体を<div>で囲って、その中に<div>を入れ子にして、配置していくと思いますが、なかなか思い通りの配置になりません。このやり方であっていますか？簡単なやり方がありますか？ 私もそのような方法をとっています。#2の方と同じです。例えば全体を中央に配置して、更に2段組のレイアウトを作る場合、 <body style="text-align:center"> <div style="margin-right:auto;margin-left:auto;text-align:left;width:500px"> <div style="float:left;width:200px">左側</div> <div style="float:left;width:300px">右側</div> </div> このような感じで。下のURLも参考にしてみてください。 ・やはり、レイアウトにはテーブルよりも、ＣＳＳを使ったほうがいいですか？ 議論があるようです。価値観の問題だと思います。古いバージョンのブラウザを考慮するならば、テーブルだと思います。できるだけどの環境でも見えるように配慮する場合など…。逆に流行りのblogなどはCSSでのレイアウトが主になると思います。テンプレートの差し替えが容易ですからね。 ただ、全体を<table>で囲ってalign=centerとする場合、何が問題かというと重くなってしまうからなんです。<table>内の情報をすべて読み込んで初めて表示…となるので、テキスト量の少ないページなら問題ないと思いますが。画像が多いと考えものですね。スマートじゃないな…という感じも確かにあります。プロのデザイナーがテーブルでレイアウトを組むにしても、いくつものブロックを組み合わせてできるだけ軽い表示になるように、気を遣っていると思います。
> ・ＣＳＳでレイアウトを組むとき、左上を基点にされていますか？全体を中央に配置するようにされていますか？ どちらも使いますが、中央にすることが多いです。 > ・ＣＳＳで、全体を中央に配置するとき、全体を<div>で囲って、その中に<div>を入れ子にして、配置していくと思いますが、なかなか思い通りの配置になりません。このやり方であっていますか？簡単なやり方がありますか？ 私も中央にする場合は、まずDIVで全体を囲いますが、position="absolute"は使いません。 （IEで文字が選択できなくなる不具合があるみたいなので・・・。） 私の場合は、DIVのwidthを決めて、左右のmarginをautoにしてます。（margin: 0 auto;みたいな） あとは念のため、bodyのtext-alignをcenterに。 ・やはり、レイアウトにはテーブルよりも、ＣＳＳを使ったほうがいいですか？ その方が後々のメンテナンスがしやすいですし、閲覧者のいろいろな環境にあわせやすいと思います。 が、その辺りは考え方次第で、テーブルでのレイアウトが一概に悪いというわけではないと私は思います。
お礼
ご回答ありがとうございました。 お礼が大変遅くなり申し訳ございません。 かなりＣＳＳについて勉強しまして、ＣＳＳの良さがわかってきたところです。 最終的な方向からそれてしまったようですが、学んでよかったと思っています。 これからは基本的にＣＳＳでデザインしていくつもりです。