• ベストアンサー

CSSでのレイアウト

私の今作っているHPはテーブルでレイアウトしているのですが、 あるところで『テーブルでレイアウトするのはお勧めできない。』と書いてありました。 よく読むと『テーブルでレイアウトするよりCSSでレイアウトする方がよい』ということでした。 具体的にCSSでテーブルのようにレイアウトするとはどうすればいいのでしょうか。 また、テーブルでのレイアウトの利点、CSSでのレイアウトの利点はどんなところでしょうか。 教えてください。お願いします。

  • GOOKY
  • お礼率70% (169/239)
  • HTML
  • 回答数3
  • ありがとう数5

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

  • ベストアンサー
  • shy00
  • ベストアンサー率34% (2081/5977)
回答No.2

http://www.fromdfj.net/html/column.html などお読みになれば理解できるかと・・・

参考URL:
http://www.fromdfj.net/html/column.html
GOOKY
質問者

お礼

返信有難う御座います。 参考にさせていただきます。

その他の回答 (2)

  • sion_fs
  • ベストアンサー率36% (152/416)
回答No.3

本来、HTMLは「文字に意味をつける為」の言語です。 この為、「色」とか「形」とか「配置」を指定する為には、CSSを使う事が推奨されています。 (FONTタグ等も同様にCSSを利用する事が推奨される) 但し、現時点でCSSへのブラウザの対応はまちまちで、未対応のブラウザや、対応していてもブラウザによって表示方法が異なったりする場合が多く、結果的に現時点ではそれらのタグを使用する事は禁止されていません。但し、将来のXHTMLでは徐々に排除される物となるでしょう。 具体的な実現方法としては、ちょうど同じ質問が別に上がっており、そちらで回答しましたのでURLを貼ります。 http://okweb.jp/kotaeru.php3?q=1224959 ※Firefox1.0 並びにIE6.0では、これらは実現出来ましたが、NNやその他のブラウザでは確認しておりません。 テーブルでの利点は、携帯ブラウザや旧ブラウザなど、殆どのブラウザで対応している事です。 逆にCSSでの利点は、ブラウザ(画面)サイズが小さい時に、画面に表示しきれない部分を自動的に回りこみをしてくれたり、サイズを固定する事が容易であったりする事です。但しこれは、想定した配置と異なったり、デザインが崩れたりなどと欠点となる場合もあります。 結果的に現時点で「現実的な対応としては」、テーブルタグを利用した上で、それに対してCSSを利用して2重に指定するか、テーブルサイズを全て固定して、CSSでがちがちに固めてしまう=CSS未対応ブラウザは切り捨てることになるかと思います。

GOOKY
質問者

お礼

返信有難う御座います。 そのURLのところに行こうとしたんですが、そのようなURLは無いと出ました…… 出来るだけ、スタイルシートとHTMLの特色を上手く生かしていきたいと思います。

回答No.1

Wizard_Zeroと申します。 なにも「テーブル使っちゃダメ」といっているわけではありませんから、必要なところはテーブルで作りましょう。CSSはブラウザによっては対応していないものもありますし、全てが同じように表示されるとは限りませんから。 『テーブルでレイアウトするのはお勧めできない。』 と、あるのは、例えば左にスペースを空けて文章を書く時に <TABLE BORDER="0"> <TR> <TD WIDTH="50">&nbsp;</TD> <TD ALIGN="LEFT">xxxxxxxxxxxxxxx</TD> </TR> </TABLE> とするよりは、 <DIV STYLE="margin-left : 50px">xxxxxxxxxxxx</DIV> とした方がいい、という話ではないでしょうか。 あとはユーザビリティの絡みとか、音声読み上げブラウザとの兼ね合いもあります。

GOOKY
質問者

お礼

返信有難う御座います。 テーブルでもいい事は分かっているんですが、 スタイルシートの方が簡単ならスタイルシートの方がいいかな、と。

関連するQ&A

  • 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デザイナーとして、恥ずかしい質問ですが、 ご教授どうぞ宜しくお願い致します。

  • レイアウトはテーブルよりCSSですか?

    今まで、Webサイトのレイアウトは、テーブルを何重にも入れ子にして、行ってきました。 最近、「レイアウトにテーブルを使うのはよくない」「テーブルで全体を囲っているレイアウトはダサい」などの意見を聞くようになってきました。 奮起して、テーブルでつくったページをCSSに書き換えようと思いましたが、なかなか困難です。 位置を左上基点に、それぞれの<div>をabsoluteで設定すれば、比較的容易にレイアウトを組めるのですが、やはり全体を画面の中心に持っていきたい、そうなると、全体をテーブルで囲って、align="center"が簡単です。 そこで、質問です。 ・CSSでレイアウトを組むとき、左上を基点にされていますか?全体を中央に配置するようにされていますか? ・CSSで、全体を中央に配置するとき、全体を<div>で囲って、その中に<div>を入れ子にして、配置していくと思いますが、なかなか思い通りの配置になりません。このやり方であっていますか?簡単なやり方がありますか? ・やはり、レイアウトにはテーブルよりも、CSSを使ったほうがいいですか? ご意見・ご回答いただきたく、どうぞよろしくお願いします。

    • ベストアンサー
    • CSS
  • CSSでのレイアウトについて

    私は現在サイトを開設しているのですが、一から独学でHTMLを学んで分からない事があれば調べて作成してきました。 使用しているのはHTML、CSS、JavaSceript、SSIです。 見た目は自信あります。ただある程度知識がある方がソースを見たら”全然分かってないだろうな”というのがすぐにバレるぐらい酷いです。 調べて分かった事は積極的に取り入れてきました。 以前はHTMLのみで作成していたんですが、外部ファイルを使いJavaScriptやCSSをまとめています。以前に比べだいぶ簡潔なソースになり、汎用性も上がったと自負しています。 ただレイアウトは依然tableレイアウトです。 その為レイアウトをいじろうと思うと全てのファイルを修正しなければなりません。ファイル数は100を超えてます。 そこで詳しい方にお聞きしたいのですが、 ・tableレイアウトからCSSでのレイアウトに移行するのは難しい事ですか? レイアウトって聞くだけで避けてきたので、いざ移行してみて今まで作成してきたデザインが崩れるのではないかと不安になってきます。 ・下記のサイトのようなレイアウトを最近結構見かけます。 http://www.yamaga-fc.com/ 私もいづれこのようなレイアウトにしたいのですが、これは何というレイアウトでしょうか? 検索してもこのようなレイアウトの作り方が掲載されてるサイトが見つからなくて困ってます。 ヘッダーとフッターが100%。真ん中が80%ぐらいのレイアウト。 ご存知の方いらっしゃいましたらご教示ください。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • cssレイアウトについて

    こんにちは。cssでデザインを作っているのですが、思うようにレイアウトができなくて困っています。 このような ┌─────┐ │  1  │ ├──┬──┤ │ 2│ 3│ └──┴──┘ レイアウトを作ろうとしています。 1の部分には画像、2の部分にはテキスト、3の部分にはtableが入ります。 しかし、3の<table>上の部分が2の<p>分下に下がって表示されてしまいます。 これを2と3の上の部分が揃うようにレイアウトするには、どうすればいいでしょうか? 分かる方、教えてくださいませ。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • Fireworksなどのスライスで、CSSレイアウトで書き出せるの?

    テーブルレイアウトで慣れてるためか、CSSレイアウトがどうしても馴染めません。 Dreamweaverで作ってますが、数倍も難しく感じます。 もしかして、やり方を間違ってるのかも知れません。 私は、Dreamweaverで一つずつ組んでいくため、Fireworksなどの「スライス」機能を使わないのですが、 ●質問1 もしかして、Fireworksでレイアウトしたら、 Fireworksのスライスで、CSSレイアウトで簡単に書き出せるのでしょうか? 多分、テーブルレイアウトでの書き出しだけだと思ったのですが・・・。 私の知識は古いので。 ●質問2 また、HP作成は、Dreamweaverで作るとして、 レイアウト作成や画像作成は、現在の主流は、 Fireworksでしょうか?Photoshopでしょうか? プロは普通どっちを使ってますか? 私はPhotoshopしか使った事ありません。 Fireworksに乗り換えるべきか、考えてます。 よろしくお願いします。

  • ホームページビルダーでcssレイアウトは可能ですか?

    Web制作初心者です。 Htmlのtableでトップページ全体をレイアウトすると、読み込みが遅くなるそうですが、ホームページビルダー9を使っているため、レイアウトを作るのは簡単にすみ、いままでtableで作成してきました。 今度、新たにサイトを作るのですが、cssでレイアウトを作りたいと思います。そこで、ホームページビルダー9はcssでtableのようなレイアウトを作ることは可能なのでしょうか? tableの場合は、「表の挿入」を選んで、「行の追加」や「列の追加」、「選択セルの結合」とかでどんどん表を作っていって、セルに画像追加や文字を書いていました。 こういうのはcssでは(ホームページビルダー上では)どのようにするのでしょうか? あと、tableを作って、その下にもtableを追加していくと、ページをプレビューした場合、下のほうに行くにつれてそれぞれの表がズレていきます。cssではズレないようにできるのでしょうか?

  • dreamweaverでCSSのレイアウトが勝手に崩れる・・・

    はじめまして。 実はdreamweaverでCSSスタイルでHPを作成しています。 なんとかレイアウトを整い、画像をはめ込んでいったのですが、ふとした瞬間にレイアウトが一気に崩れてしまいました。 もちろんCSSはいじっていません。それを証拠にindexとほかのページをテーブルにしてわけているんですが、インデックスだけ崩れています。 心当たりといえば、作業のウインドウのサイズをさわってしまったぐらいです・・・ 元に戻してもレイアウトは崩れたままです・・・ どうすれば元に戻るのでしょうか? ちなみにIEでチェックしてもレイアウトに問題はなかったのですが、どうも作業がやりづらいです。

  • tableレイアウトとCSSデザイン、ハイブッド、どういう違いがありますか?

    無料のテンプレートを使ってHPを作ろうと思っています。(HTMLとCSSの知識は多少あります。) テンプレートには、 tableレイアウト、CSSデザイン、およびハイブッドがありますが、これらは目的によって使い分けられているのでしょうか?「こういう場合はCSSが良い」とかあるんでしょうか? 分かる方がいたら、教えてください。よろしくお願いします。

    • ベストアンサー
    • HTML
  • テーブルレイアウトしてしまっている後でCSSの背景を適用したいです。

    私HPをつくっているのですが、 テーブルレイアウトをしているのですが、 最近CSSを勉強しだしまして、 テーブルレイアウトのうしろの背景色を設定しようと思っております。テーブルはすべて中央揃えにしておりまして、 そのテーブル以外の部分に背景色を設定したいと思っております。 どのようにしたいかというと 参考HPをあげておきます。 http://www.neutrals.jp/works.html http://www.kekkon-navi.org/ http://www.plusmoney.jp/ この用な感じにメニューや本文の部分は白くて、 それ以外のところの背景が色をついている状態にしたいです。 外部CSSで全ページに適用していこうと思っているのですが、 CSSにはどのように記述したらよろしいでしょうか? お詳しい方よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSで高さ100%のレイアウト

    テーブルを使用せずCSSでのレイアウトなのですが フッター位置をブラウザの一番下にマージン無しで指定したいのですが出来ません。 テーブルでは <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top">内容</td> </tr> <tr> <td valign="bottom">フッター</td> </tr> </table> というように指定していたのですが CSSでのレイアウトはHTMLを <div id="container"> <div class="content">内容</div> <div id="footer">フッター</div> </div> .CSS では #container { height: 100%; } は無効なのでしょうか? 他のやり方でもフッターをブラウザの一番下にマージン無しでレイアウトできる方法があったら教えて下さい。

    • ベストアンサー
    • CSS