CSSでHPを作る事になり困っています！

質問

いつもお世話になっております。
突然ですが、会社でCSSでサイトを作成することになりました。
私は今まで組んだ後のCSSの値の修正くらいしかしたことがなく
段組なんかはてんでわかってません。
必死にネットのサイトを見て覚えているのですが
仕事なので時間の余裕もなくテンパっています。
どうかわかりやすいCSSの本を教えていただけたらと思います。

３カラムのバナーやらテキストやら細かくバラバラある
商品数の多いサイトです、３カラムはどうも色々面倒みたいなので
その辺の説明がわかりやすく書いてある本教えてください。
お願いします！！本当にお願いします！

回答No.2

ORUKA1951 · ベストアンサー

私は、５年ほど前から、基本的に（HTML4.01strictないし、XHTML）＋CSSでのサイト作りに統一しているのですが、慣れればこれほど楽なものはないです。
　ただ、参考になる書籍も、ネット上の情報も、いっぺんに取得できる良いものはないですね。何冊かの書籍と、多くのサイトを参考に一ヶ月あまり猛勉強しました。ただ、以前より基本的にHTML4.01strictを基本にしていましたし、そもそも開発はテキストエディタオンリーでしたから、覚えるのはCSSだけでよかったですね。

　HTMLstrict/XHTML＋CSSとなると、HTMLオーサリングツールには完璧なものはなく、開発はテキストエディタ＝HTMLエディタ( http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83%BC%E3%82%B5%E3%83%AA%E3%83%B3%E3%82%B0%E3%83%84%E3%83%BC%E3%83%AB#HTML.E3.82.A8.E3.83.87.E3.82.A3.E3.82.BF )が主体となるでしょう。

　前置きはそのくらいにして・・
　３カラムは、メインブロックをまずrelativeで配置して、そのメインブロック内にある右枠ブロックと左枠ブロックをメインブロックを基準にしてabsoluteで配置するのが、変な裏技を使わずにブラウザに依存しない配置方法としてお勧めします。
　HTML4.01strictとCSSを利用したページ作りの基本は、下記サイトがウェブ標準に準拠しているのでお勧めです。

【参考サイト】
はじめてのWebドキュメントづくり
　 http://www.asahi-net.or.jp/%7Esd5a-ucd/www/
あたりから、どうぞ・・・・
【参考サイト】
初心者のためのホームページ作り：第1号
　 http://www.scollabo.com/banban/magazine/magazine_001.html
【参考サイト】
初級Webデザインアドバイス
　 http://deztec.jp/x/02/10/design/index.html

そして、なによりも、迷ったときの調べ先は・・・＿＿＿＿＿＿＿＿
【参考サイト】
HTML 4.01 仕様書 (邦訳)
　 http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html
Another HTML-lint gateway
　 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

開発ツール＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
EmEditor ( http://jp.emeditor.com/ )をメインに、確認には、Firefox ＋ firebug( https://addons.mozilla.jp/firefox/details/1843 )＋JSView ( https://addons.mozilla.jp/firefox/details/2076 )＋ViewSourceWith ( https://addons.mozilla.jp/firefox/details/394 )をつかってます。
★EmEditorにはフリー版もあります( http://www.vector.co.jp/soft/winnt/writing/se047993.html )

【CSS参考書】＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
スタイルシートスタイルブック( ISBN4-7981-0585-6 )
　　http://www.amazon.co.jp/%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88-%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%83%96%E3%83%83%E3%82%AF-%E6%9C%89%E5%9D%82-%E9%99%BD%E5%AD%90/dp/4798105856/ref=sr_1_1?ie=UTF8&s=books&qid=1231255437&sr=8-1
　もう、書籍は開くことはないので、手元にあるのはこれだけ・・・
　他の本は、娘に皆やったので、後日調べて・・・

お礼

ありがとうございます！本当に本当に助かりました。
今日仕事中に教えてgooを覗いたらベンリな本や
リンクをたくさん書き込んでもらえていてちょっと泣きそうになりました。
まだ始めたばかりで上手くいくかは不安ですが、
なんとかとっかかりはいけそうな気がします。
このたびは本当に皆さんありがとうございます。
頑張ってサイトを作りたいと思います！

何から何まで細かく丁寧に書いていただいてありがとうございます！
朝一番に読んで本当に頭が下がる思いでした。
教えていただいた本は書店に置いてあったので
ちゃんと３カラムについての説明も確認して
購入しました、あんだけ本があると本当に
どれがいいのかわからなくなりますね。

それと少しだけ質問よろしいでしょうか？
＞３カラムは、メインブロックをまずrelativeで配置して、そのメインブロック内にある右枠ブロックと左枠ブロックをメインブロックを基準にしてabsoluteで配置するのが、変な裏技を使わずにブラウザに依存しない配置方法としてお勧めします。
↑
このメインブロックというのは３カラムの真ん中のブロックで
よろしいのですか？ちょっとまだrelativeとabsoluteが
よくわかってなくて、とにかく当てはめてやったんですけど
どうも上手くいきませんでした（＾＾；
本を見てもう一度勉強あるのみですね。

回答No.6

ORUKA1951

≫このメインブロックというのは３カラムの真ん中のブロックでよろしいのですか？

　そうです。３カラムが難しいとか言われますが、私はそれで悩むことは今はありません。
　floatは、ブラウザによって結構挙動が異なるので、私は、ブロック要素の配置に、基本的に使いません。あくまでinlineでの画像の配置とかに限定しています。

<div class="bodyText">
　<h3>本文</h3>
　<p>記事</p>
　<div class="note head">
　　　左記事
　</div>
　<div class="note foot">
　　　右記事
　</div>
　<h5>文書情報</h5>
　<ol></ol>
</div>
のようにマークアップして、div.bodyTextをrelativeで、まず配置して、その後でdiv.bodyText > div.headをabsoluteで本文の外左へ、div.bodyText > div.footをabsoluteで本文外右に配置しています。基本的に幅は固定せずウィンドウ幅に合わせるようにしています。

お礼

たびたびありがとうございます！
３カラムでどうのこうのっとかかれてたのは
floteについてだったんですね。
おかげさまでサイトの外枠もできはじめました。
他のブラウザでどう見えるのかは今度試しますが
本当にありがとうございます。
relativeの配置をどこにするかがよくわかってなかったので
助かりました！

回答No.5

shioz

ちょっと古いですが、私はこちらの本を参考にしています。
http://www.amazon.co.jp/%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%83%96%E3%83%83%E3%82%AF-%E5%A4%A7%E8%97%A4-%E5%B9%B9/dp/488337405X

定義ごとにブラウザの対応状況が一覧になっていて、各定義の説明が完結でわかりやすいし、使用例の図もたくさんあって確認しやすい点が気にいってます。
また、片手で持てるサイズも便利です。

本は好みなどにもよって、その人それぞれの使いやすさが違うので、大型の書店で何点か手にとって見てから買うといいと思います。

ネットでは、下記サイトにお世話になっています。
http://www.htmq.com/index.htm
http://www.tagindex.com/index.html

お礼

ありがとうございます！本当に本当に助かりました。
今日仕事中に教えてgooを覗いたらベンリな本や
リンクをたくさん書き込んでもらえていてちょっと泣きそうになりました。
まだ始めたばかりで上手くいくかは不安ですが、
なんとかとっかかりはいけそうな気がします。
このたびは本当に皆さんありがとうございます。
頑張ってサイトを作りたいと思います！

本屋さんに置いてなかったので、今買った本で難しくなってきたら
大きな書店に見に行って探したいと思います。
表紙からしてわかりやすそうですね。
参考リンクは凄く助かりました、タグ辞典みたいなのは持っていないので
フル活用させていただきます！

回答No.4

reverie013

私個人的には、
本よりも要所要所でネット検索する方がおすすめです。
情報も基本的には随時更新されていくし、
色んな意見を目にできます。

参考までに。
http://www.tagindex.com/index.html
http://htmllint.itc.keio.ac.jp/htmllint/htmllintl.html
http://jigsaw.w3.org/css-validator/
http://w3g.jp/

お礼

ありがとうございます！本当に本当に助かりました。
今日仕事中に教えてgooを覗いたらベンリな本や
リンクをたくさん書き込んでもらえていてちょっと泣きそうになりました。
まだ始めたばかりで上手くいくかは不安ですが、
なんとかとっかかりはいけそうな気がします。
このたびは本当に皆さんありがとうございます。
頑張ってサイトを作りたいと思います！

参考リンク拝見しました
検証サービスなんてのが世の中にはあるんですね！
最後のリンクの場所なんかも私みたいな文型の人間にもわかりやすく
シンプルな説明があって凄く参考になりそうです！
ありがとうございました。

回答No.3

nori_007

別に必死になって覚える必要はありません。
IE6 の場合、標準モードで動作するに制作して、floart で並べるのが一般的だと思います。ポイントを抑えれば特に問題はないと思います。今はネット上に色々ヒントも多いと思いますので。

書籍は下記の本を参考にしてみてください。

Webプロフェッショナルのための黄金則 XHTML+CSS虎の巻 (Web Designing BOOKS)
http://www.amazon.co.jp/gp/product/483992435X?ie=UTF8&tag=manabiblog-22&linkCode=as2&camp=247&creative=1211&creativeASIN=483992435X

実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips (単行本)
http://www.amazon.co.jp/gp/product/4861671647?ie=UTF8&tag=manabiblog-22&linkCode=as2&camp=247&creative=1211&creativeASIN=4861671647

スタイルシート・デザイン XHTML + CSSで実践するWeb標準デザイン講座 (大型本)
http://www.amazon.co.jp/gp/product/4844359045?ie=UTF8&tag=manabiblog-22&linkCode=as2&camp=247&creative=1211&creativeASIN=4844359045

等が定番の書籍だと思います。
参考にしてみてください。

>商品数の多いサイトです、３カラムはどうも色々面倒みたいなので
なぜ、そう思われるのですか？

お礼

ありがとうございます！本当に本当に助かりました。
今日仕事中に教えてgooを覗いたらベンリな本や
リンクをたくさん書き込んでもらえていてちょっと泣きそうになりました。
まだ始めたばかりで上手くいくかは不安ですが、
なんとかとっかかりはいけそうな気がします。
このたびは本当に皆さんありがとうございます。
頑張ってサイトを作りたいと思います！

こちらで紹介していた本も近くの本屋には置いてなかったので
休日に大型書店の方で探してみたいと思います！
たくさんの本を紹介していただいてありがとうございます！

>商品数の多いサイトです、３カラムはどうも色々面倒みたいなので
なぜ、そう思われるのですか？
についでなんですが、私本当にCSSは素人なんです。
それで、色々なサイトを見たら３カラムの場合は綺麗なソース（？）
でかけないとか、あとやり方によってはレイアウトが
ブラウザによって崩れる場合があるとか注意書きが色々
書いてあったのでなんとなく面倒なのかなぁって印象を持ってました。

回答No.1

redcurb

念の為、立ち読みしてから、購入して下さい。
http://www.amazon.co.jp/Web標準XHTML-CSSデザイン-クリエイターが身につけておくべき新・100の法則。-加藤-善規/dp/4844324241/ref=sr_1_20?ie=UTF8&s=books&qid=1231254627&sr=8-20

お礼

ありがとうございます！本当に本当に助かりました。
今日仕事中に教えてgooを覗いたらベンリな本や
リンクをたくさん書き込んでもらえていてちょっと泣きそうになりました。
まだ始めたばかりで上手くいくかは不安ですが、
なんとかとっかかりはいけそうな気がします。
このたびは本当に皆さんありがとうございます。
頑張ってサイトを作りたいと思います！

教えていただいた本、レビューなんかを読むと
今まさに私に必要なのはこの本ではっ！と
凄く興味がわきました。やっぱり近くの本屋にはなかったので
後日大型書店で探そうと思います。
見つからなかったらアマゾンさん頼りになりそうですが（＾＾；）