CSSレイアウトってなぜこんなに難しいのか？

質問

個人事業で、WEBデザインの仕事をしています。
恥ずかしいですが、ずーっと、テーブルレイアウトでのみHP作成してきました。
文字を整えたり、種類をまとめたりだけ、CSSを使ってました。

先日初めて、クライアントから「そろそろテーブルレイアウトはやめてくれ」と、
ダメだしを食らいました。

独学でDreamweaver MX 2004を一から学んで、仕事やって来ましたが、

ちょっと恥ずかしい質問ですが、
CSSレイアウトってなぜ、こんなに難しいのでしょうか？？

みなさん、テーブルレイアウトと比べて異常に難しく感じませんか？
今の調子ではＨＰ作成の仕事が請けられなくなっています。（涙）

例えば、テーブルレイアウトって、自由にドキュメントで確認しながらデザインできますよね。
でも、CSSレイアウトって、コードで全部書き出しますので、
ちょっとサイズや項目や要素を変更するだけでも、どのdiv?、どのクラス？のタグにそれを指定したかとか、
複雑になり解らなくなってしまい、ちょっと変更するだけでも凄い時間がかかってしまいます。

■もしかして私、CSSレイアウトの学び方、作り方を間違ってるのでしょうか？

■今まで2～3冊位、Dreamweaverの本で、CSSレイアウトを勉強してますが、
　いっこうに進歩しません。（ここに本の題名書き出すとマズイですよね？）

★CSSレイアウトが解り易く学べる、勉強本を教えて頂けますでしょうか。

■もしかして、DreamweaverでCSSレイアウトをするから難しいのでしょうか？
　HPビルダーとかなら、もっと簡単に出来るのでしょうか？

■今、私ができるCSSレイアウトの限界は、一番大まかな囲いの、
#header #side #main #footerを、#contentの中に入れて、
その中の各々の要素は、今までとおり、テーブルでレイアウトする。
（メニューや、商品スペック、写真並べなども、テーブルで。）
それが精一杯ですが、これで通用するのでしょうか？

HPデザイナーとして、恥ずかしい質問ですが、
ご教授どうぞ宜しくお願い致します。

回答No.6

xenotactic · ベストアンサー

やっぱり慣れは重要で、
テーブルレイアウトばかりやっていた人が
100％CSSレイアウトを行うのは難しいと思います。

■もしかして私、CSSレイアウトの学び方、作り方を間違ってるのでしょうか？

学び方に正答があるかはわかりませんが、
はじめは真似することからはじめるのがいいと思います。

CSSデザインの格付けサイト一覧
http://gigazine.net/index.php?/news/comments/20060920_css_design/

FireFox拡張のFirebugというツールで
CSSの構造を分かりやすく確認することができます。
https://addons.mozilla.org/ja/firefox/addon/1843

★CSSレイアウトが解り易く学べる、勉強本を教えて頂けますでしょうか。

本を買って勉強するよりは、ネットで解説されているものを探すほうが
実例も見ることができるのでオススメです。

スタイルシートデザインを始めたい方へ - WEB工房きくちゃん
http://www.stylish-style.com/

どうしても本で学びたいのなら
・Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。
・Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。

■もしかして、DreamweaverでCSSレイアウトをするから難しいのでしょうか？
　HPビルダーとかなら、もっと簡単に出来るのでしょうか？

どっちも難しいのでは？と思います。
普通のテキストエディタでCSS・HTMLを更新しつつ
ブラウザで確認するのが一番わかりやすいんじゃないかと。

もしかしたらいいのがあるかもしれません。
WEB製作に役立つフリーソフト
http://www.geocities.co.jp/SiliconValley-Cupertino/1623/

■今、私ができるCSSレイアウトの限界は、一番大まかな囲いの、
…それが精一杯ですが、これで通用するのでしょうか？

通用しません。
あくまで、テーブルは”表”です。

同様に、divやspanだけのサイトもアウトです。
しっかりとh1～h6、p、strong、em、li、ul、ol、dl、dt、ddなど
場合場合にあったHTMLを使いましょう。

お礼

的確なご解答をありがとうございます。
また、豊富な情報を教えて頂き感謝します。
さっそくそれぞれの参考資料を、確認して勉強させて頂きます。

> ■今、私ができるCSSレイアウトの限界は、一番大まかな囲いの、
> …それが精一杯ですが、これで通用するのでしょうか？

> 通用しません。
> あくまで、テーブルは”表”です。

なるほど。。これは、よき目覚めになりました！。ありがとうございます。

ちょっとCSSの勉強方法も変えてみます。（DWに頼りすぎて、自分で勉強方法も間違ってた様に感じました）
ありがとうございました。

回答No.9

Muller3

Mdnの「プロとして恥ずかしくない○○の大原則」シリーズの本はかなりおすすめです。
私も恥ずかしながらDreamweaverでテーブルレイアウトを長らくやっててHTMLすらまともに覚えられない人間でしたが、これらの本ですっきりすっかり足を洗えました。

基本からXHTML+CSSの設計手法、クロスブラウザ、応用、アクセシビリティまでかなり実践的に学べると思います。
何より、なぜそうするのか？がちゃんと書かれているので、考え方を矯正しやすいです。やっぱり心底納得できないことにはできませんから(^^;
今どれが出てるのかわかりませんが、
「スタイルシートの大原則」
「Webデザインの大原則」
「Webレイアウトの大原則」
あたりでしょうか…

お礼

皆様ご回答を頂きましてありがとうございました。
この場を借りて御礼申し上げます。（Muller3さんごめんなさい）

私がCSSレイアウトに馴染めなかった理由が、なんとなく解りました。

■DW MX 2004にて、市販の、DW MX 2004+CSSの勉強本（名前は伏せときます）が
非常に解りにくかった事が原因だと気付きました。

■長年、テーブルレイアウトに慣れすぎてました。
（今さらCSSに戻れない位、テーブルに執着してました）

■8やCS3へのバージョンアップの必要性を感じました。

しいて言えば、上の3点でしょうね・・・。

その後、CSS単独の本を購入して勉強したり、
xenotacticさんに教えて頂いた、サイトにて勉強したりして、
CSSの概念から勉強してみたら、すごく解りやすかったです。

根本的な勉強方法を間違えていることに気付きました。

皆様アドバイス頂きまして本当にありがとうございました。

回答No.8

ICHI-yan

しっかりしたhtml構造をまず、作成してください。その上でデザインです。っていうのがｃｓｓの基本的考え方です。
#sideとかでもかまわないですが、もしここに、indexしか置かないなら、#indexとしておいたほうが管理が楽になります。いまは、sideだけど将来はトップになんて配置転換がｃｓｓだけで大胆に出来てしまうから。見た目のidやclass名をつけるとあとで混乱しますよ。

ちょっと、サプライズしてもらおうかな
http://blog.html.it/layoutgala/index.html
下の方に薄紫色の、htmlがあります。そのhtmlはその１つ。cssをいじるだけで、40ほどの大枠のレイアウトの紹介を上でされてます。

ソースは今は、理解できないでしょうが、tableと全然違うということを理解して０から遊んでください。ｃｓｓでもtableでもプロとしてやってるんだったら、センスはあると思うんで、コツさえわかれば、デザインの幅が広がりますよ。

がんばってください。

回答No.7

tsunami02

私は、テーブルよりCSSの方が今では楽に感じられます。確かに、はじめた頃は面倒でしたが次第に楽に感じられるようになりました。今では各OS、ブラウザの癖も分かるようになり、CSSなしではコーディングが面倒に感じられます。双方の違いについてですが、テーブルでのコーティングは設計段階があいまいでも融通が利きましたが、CSSではしっかり設計しないと後で痛い目にあいます。しかし出来上がりは断然、CSSで組んだ方がピクセル単位で動かせるので、綺麗です。ちなみに私が使っていた勉強本はソシムから出してるスタイルシートサンプルブックでした、あとは一般サイトのCSSリンクファイルを見て、どのように掛けているかなどを見て参考になる部分は取り入れて、ムダな掛け方は切り捨てています。

＞もしかして、DreamweaverでCSSレイアウトをするから難しいのでしょうか？HPビルダーとかなら、もっと簡単に出来るのでしょうか？

私はDreamweaverです。理由は普及率が高いのと、テンプレート機能が楽な点です。HPビルダーにテンプレート機能があるのかは分かりませんが。

＞今、私ができるCSSレイアウトの限界は、一番大まかな囲いの、
#header #side #main #footerを、#contentの中に入れて、
その中の各々の要素は、今までとおり、テーブルでレイアウトする。

私も基本はそうですがテーブルは使わずdivをなるべく使っています、テーブルを使う部分は更新が入る部分のみで、あとはdivで組んでしまいます、テーブルだとスタイルが掛かりずらいスタイルがあるし、ソースが長くなってしまいCSSを使っている意味が薄れると考えているからです。

少しは参考になれば幸いです。

回答No.5

sikiminomo

焦る気持ちは分かりますが、一度に理解しようとするから難しいのだと思います
本職さんに言うのはおこがましいですが、CSSを始めたばかりは「呪文みたい」だと感じますが、繰り返し読めば必ず理解出来るようになる筈です

どのdiv?、どのクラス？と迷うようならDreamweaverをCS3にバージョンアップしてみて下さい
CSSレイアウトを視覚的に判断出来るビジュアルエイドという機能が付いています

またCSSを学ぶなら「Dreamweaverの本だけ」とか「兼用」では無理です
素人感覚で一から勉強するならソシムで出している　「HTML＆スタイルシート　レッスンブック」と「HTML＆スタイルシート　レッスンブック」を両方揃えるのがお勧め

それとDreamweaverを使って「テーブルレイアウト」を卒業するなら　ソーテック社の　「Dreamweaver　Web標準レイアウトブック」がとても具体的で使いやすいです

同じくソーテック社の「HTML＆スタイルシートレイアウトブック」はCSSレイアウトの構造が図解されていて、2段組・3段組等も含め理解しやすいと思います

私は下手な質問なぞして「プロ用ソフトを素人が使っている」と笑われたら恥ずかしいと思い、Dreamweaverの本だけでも10冊持っています
(全部理解は出来ていませんけど)
世間には市販マニュアルがとても充実してますし、プロなのですから良い本に当たればすぐ理解出来るようになると思います

>もしかして、DreamweaverでCSSレイアウトをするから難しいのでしょうか？
>HPビルダーとかなら、もっと簡単に出来るのでしょうか？

ビルダーから乗り替えたので断言しますが、逆に難しくなります
Dreamweaverはver8から「コードをCSSで書き出すのが標準仕様」なので大した苦労をせずCSSを使える状態になります
でもビルダーでは今の所(ver.11時点)きちんと意識してCSSを使わなければいけませんので、今更ビルダーの購入とかはお勧めしません

あと、スタイルシートを使った「無料テンプレート配布サイト様」のテンプレートをDreamweaverで開くと、とてもCSSの勉強になります
コードが綺麗だし、コメントアウトで「何処で何」を指示しているのか理解しやすいです

お礼

ご解答どうもありがとうございます。

> 本職さんに言うのはおこがましいですが、

いえいえ、とんでもないです。非常に助かります。
自分の質問内容を読み直して、非常にお恥ずかしい。
本職というか、CGや音楽やDTPなどいろんな仕事している一つなので、
HPデザイナーだけで食っているわけではございません。
WEBだけで今の状態ならもちろんお笑いですよね。（笑）

いろいろな参考資料のご紹介ありがとうございました。
さっそく調べてみます。

> Dreamweaverはver8から「コードをCSSで書き出すのが標準仕様」なので
> 大した苦労をせずCSSを使える状態になります

そうだったんですか（汗汗）　　今使ってるMX 2004とだいぶと変わってるのでしょうか？

「無料テンプレート配布サイト様」のテンプレートも探して、勉強してみます。

的確な情報をありがとうございました。

回答No.4

ICHI-yan

デザイン方向からしか見ていないから、難しいのでは？と思います。
まず、意味付けしながら、htmlでサイトを構築。
次にその、ｈｔｍｌをｃｓｓデザインする。

学び方は、その概念を勉強。これは手打ちが最高。
補助ソフトの操作を勉強。こっちは使わないほうがいい場合も。

で、質問者さんの場合、考え方がテーブルレイアウトで無理にｃｓｓに合わせようとするから難しいのではないかな？と思います。私もｃｓｓの方が簡単です。

Dreamweaverの本だと、操作やテクの本になると思うので、まず、ｃｓｓはどんなものを頭に入れてから、その手の本を読まれるといいと思います。

お礼

ご解答どうもありがとうございます。

> デザイン方向からしか見ていないから、難しいのでは？と思います。
> 考え方がテーブルレイアウトで無理にｃｓｓに合わせようとするから難しいのではないかな？と思います。

まさに、その通りだと思います。（汗）
テーブルでせっかく作ったものを、CSSに置き換えようとしている自分を滑稽に感じます。苦笑
Dreamweaverを離れ、CSS単独で勉強してみます。ありがとうございました。

回答No.3

Matix

私もいろいろなページを作ってきましたが、正直CSSの方が楽です、というか、tableがどれほど面倒なものかを実感しました。

●リストを使ってみたらどうでしょうか。
ナビゲーション部分は、リストを使うとすっきりできます。
ul{ list-style:none; }
li{ padding: 0em 1em; float: left; }
または
ul{ list-style:none; }
li{ padding: 0em 1em; display: inline; }
にすれば、横並びのナビゲーションになります。

●擬似的なテーブルを作る。
1つのセルの相当する部分をCSSで構成します。
例えば、横に2つ並べる場合は、
div.leftside { float:left; width:50%; ・・・ }
div.rightside { float:right; width:50%; ・・・ }
p.clear { clear:all; }
として、
<div class="leftside">
中身
</div>
<div class="rightside">
中身
</div>
<p class="clear"></p>
とやれば、擬似的に横2列の形になります。これを繰り返せば、横2列の表のような感じになります。

いろいろと工夫しないといけませんが、いろいろと試行錯誤してみてください。
ちなみに、メモ帳程度からでも、CSSの勉強はできますので。
逆に、すっきりしていいのかもしれません。

テーブルレイアウトがまずい1つの理由として、テーブルは1つの大きな文字と同じ扱いをするので、場合によっては横に広がってしまい、かえって見にくくなるからです。

お礼

ご説明いただきありがとうございます。おそらく長年、DWのテーブルレイアウトのオーソドックスな作成方法に慣れすぎたのだと思います。だから、そのスピードとスタイルを崩せなくなっている様に感じます。それと、勉強の仕方を間違えてるのかも知れませんね。柔軟に勉強していきます。

回答No.2

345itati

自分もWeb作成は趣味レベルだから教示出来る程のものは無いけど、
少なくともCSSレイアウトの方が、HTMLでテーブル組んで一ページ一ページ書き出して行くよりも、後でちょっとデザインに変更を加えたい時などは圧倒的に楽になります。
例えば全ページ背景色を変えたいとか、フォントサイズを変えたい等の場合でも、外部CSSを作ってしまえば、一カ所書き換えるだけで全ページに適用されますし。

最初からソフトにばかり頼っていると、CSSやHTMLの記述の決まり事が分かりにくいのかもしれません。
自分はテーブル組む方がはるかに面倒くさいと思いましたよ～。CSSでレイアウト決定するようにいてからはサイト更新にかかる時間がかなり削減あれました。

回答No.1

noname#150436

それで食えるなら良いのではないでしょうか
しかし、私のような素人には理解出来ない世界なんですね
私が考えていたHPデザイナーは
HTML、XML、CSS、CGI（Perl、PHP）、JAVA（スクリプト、アプレット）
さらにグラフィックでフォトショップ、イラストレーターなど出来て
デザインセンスのあるWEBのベテランかと思ってました
でもHTMLとわずかなCSSだけでも食えるなんて逆に凄いと思ってしまう
ぶっちゃけ俺の方がスキルがあるw素人なのにw
失礼しましたでもまあ少し勉強した方が良いかもしれないですね
せめてCSSくらいは簡単なので覚える時だけが結構難しいですが
覚えてしまえばHTMLよりも効果的なHP作成が可能になりますし、編集も楽になりますよ