• ベストアンサー

CSSを使用したページレイアウト

今までtableを使用してページを作成してきたんですが、tableをできる限り使用せずHTML+CSSのみでページを作成してみたくなりました。 しかしCSSに関しては、基礎的な仕組みと書き方がわかるくらいで、どのように構成すればいいのかわかりません。 あるサイトのソースを見たらDIVにclassを指定しているようでしたが、実際どのように記述されているのでしょうか? 書籍でもサイトでも何でも良いので、参考になりそうなものがありましたら教えてください。

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

  • ベストアンサー
回答No.3

このサイトはなかなか刺激してくれますよ。 http://www.csszengarden.com/tr/japanese/ 様々なデザイナーが同じHTMLにCSSでレイアウトしています。

kamay
質問者

お礼

ありがとうございます。 素敵なサイトですね~ デザインも含め、色々と勉強になりそうです。

その他の回答 (3)

noname#107787
noname#107787
回答No.4

tableのような段組(テーブルレイアウト)をCSSで代替する場合は、一般的にfloatを使います。 floatの説明は下のサイトが参考になります。 http://www.motchie.com/article/multicolumn.html http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html http://dhr.at.infoseek.co.jp/simple_style21.htm#float 補足ですが HTML+CSSのみでページを構成する場合、XHTMLの記述方法・構成が参考になると思います。 http://www.tg.rim.or.jp/~hexane/ach/lbxh/

kamay
質問者

お礼

ありがとうございます。 どのページもとても参考になりました。 XHTMLについても勉強してみようと思います。

  • mfu
  • ベストアンサー率33% (1/3)
回答No.2

私も以前は質問者様と同じような状態でした。とりあえず「スタイルシート スタンダード・デザインガイド(毎日コミュニケーションズ)」本を一冊買って、見よう見まねで1ページ作ってみたら大まかな構成は理解できました。 (参考URLにアマゾンのURLを貼っておきます) この本は、CSSの考え方から順番に説明してくれているので理解しやすかったです。ですが、実際に業務でCSS組みを始めると、ブラウザによってバグがボロボロ出てきます。 もう一つ、参考URLに貼ったサイトはバグ回避のコツや裏技などが載っていますので役に立ちました。 ちなみに、CSS組みのデバッグはFirefoxで行うと良いですよ。CSSの解釈に関しては一番標準規格に沿っています。

参考URL:
http://www.amazon.co.jp/exec/obidos/ASIN/4839915016/qid=1129897573/sr=8-1/ref=sr_8_xs_ap_i1_xgl/250-9740874-5184246,http
kamay
質問者

お礼

ありがとうございます。 本屋さんで探してみようと思います。

回答No.1

私が使っているのは「スタイルシートサンプルブック」という本です。 ISBN4-88337-405-X 1900円(税別) 全ページカラーでブラウザごとの特徴とサンプルコードも掲載されていますので、比較的理解しやすいですよ。 参考URLにアマゾンへのリンクを貼っておきます。 ==================================== スタイルシートは、いろいろなものにクラス付けできるので実際に使い出すとおもしろいですよ。 画像にクラス付けしたり、テーブルにクラスつけてみたり。。。 いろいろやってみると楽しいですよ。

参考URL:
http://www.amazon.co.jp/exec/obidos/ASIN/488337405X/fjvshomepag-22?creative=1615&camp=243&link_code=as1
kamay
質問者

お礼

ありがとうございます。本屋で探してみようと思います。 検索してみたら初心者向けの評判の良い本ですね。勉強になりそうです。 その本にはclassやidの使用法等ではなく。CSSを使用したページレイアウトについて書かれていますでしょうか? ちなみに、以下のサイトのような事をしたいと思っています。 今までずっとtableを使用したゴテゴテのサイトしか作った事がなかったので、これを期にCSSに切り替えてみようと思いました。 http://www.geocities.co.jp/SiliconValley/4466/

関連するQ&A