ALL CSS

質問

6年ほどWEB デザインナーをしたのですが、テーブルレイアウトで作っていました。こちらの掲示板サイトで2年ぐらい前にALL CSSでサイトを作るべきですかと質問したところ、つくるべきだと回答をもらいましたが、まだ手をつけていません。idごとに区切る最初のところ、実際にALL CSSの作成の文字列のところから進めません。

内容をグルーピングすることが第一段階で実際にタグを作成するのが第二段階という説明は講習会で習ったのですが、それ以後が問題です。習得するのにここから入るとわかりやすいという所がありましたらおねがしいます。それとオススメの本、サイト、考え方がありましたら教えて下さい。

回答No.1

noname#83877 · ベストアンサー

現在のcssではhtmlにidやclassを指定しないでレイアウトするのは現実的ではないので、それらをできるだけ大きなグループに指定していきます。
基本的にはidでheaderやfooter等のグループに対して指定することが多いです。
大きなグループに指定するのはhtmlに変更を加える点を少なくすることが目的なので、最初のうちは無駄なidやclassがたくさんできると思いますがあまり気にしない方がいいです。
あとは付加したidとその子孫要素に対して指定をしていくだけです。

cssを理解するにあたって基本的な書きかたとボックスを理解することが一番最初に必要なことだと思います。
http://www.tohoho-web.com/css/basic.htm
http://www6.plala.or.jp/go_west/beginner/css/box.htm

あとは目的のレイアウトを実現するために必要なプロパティを適宜探していく感じでしょうか。

その他、作っている時はFirefoxでレイアウトの確認をしてください。完成後IEで確認して問題部分を修正します。

お礼

上から順番にheaderやfooter等の大きなグループからidとclassを指定していくんですね。考え方としてわかりやすいです。プロパティ、実際のCSSの表現については探したり、よく使うものを覚えて行きながらやってみます。

それから1と2の間辺りからはじめるCSS講座はとてもおもしろくわかりやすいので、苦もなく進められそうなので助かりました、ありがとうございます！

回答No.6

hamue

いきなりフルCSSにいかず、テーブルの各セルにIDやclassを利用していくところから始めたらどうでしょうか？まずはcssの記述方法（id、class、継承などの方法）を固めて、徐々にフルcss可していく。

xhtml&cssの基本がわからないまま作ろうとするとブラウザごとのバグに苦しむことになると思いますよ。（知っていても苦しみますけど）

ちなみにtableレイアウトだけどなるべく適切なマークアップをする方法としてハイブリッドデザインというのが紹介されています。これまでtableレイアウトに慣れてしまっているのならば、まずハイブリッドデザインでcssをマスターするのが良いのではないでしょうか？

・参考書籍
「スタイルシートスタイルブック」
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

１、２とあります。ちょっと古いですけど、html→xhtml&cssへの移り変わりには最適かもしれません。

回答No.5

noname#119508

idは1回しか使えないもの
classは複数回使えるもの

オススメサイトは
http://www.w-frontier.com/
や
http://www.htmq.com/index.htm
など

あと、正しく書けているかは
http://jigsaw.w3.org/css-validator/
で調べると良いです。

回答No.4

suzuko

>idごとに区切る最初のところ、実際にALL CSSの作成の文字列のところから進めません。
>内容をグルーピングすることが第一段階で実際にタグを作成するのが第二段階という説明は講習会で習ったのですが、それ以後が問題です。

う～ん。あなたがどこでつまずいているのか、この文章では分かりません。「グルーピングをして、タグを作成」すれば、終了でしょう。

ご自分がどう言ったところで、どう分からないのか。具体的の○○としてみたが、××になってしまったとか、補足されれば少しは、それに特化した本やサイトがご紹介できますよ。

回答No.3

abril

ここの質問を2年ほど眺めたり回答したりしている間に得た個人的感想ですが、CSSで躓いている方達の多くはCSS以前に、(X)HTMLの理解が的確にできていないところに根本的な原因があるのでは…と。もし、HTMLというマークアップ言語が本来どういう意味のものなのか、という出発点が理解（納得）できていれば「テーブルレイアウト」という考え方自体がおかしいものだと気付くからです。

下記は、もう10年以上前に発行されたスタイルシート解説本の草分け的存在のHTML版ですが、これはスタイルシートを説明する前段階としてHTMLに関する解説にかなりのページ数を費やしており、実はその部分がHTMLの的確な理解に非常に役に立つ優れものです。ここの一章～三章までを順を追ってじっくり読めばHTML文書の本来の役割を理解できると思います。
その後にようやく、実際のCSSの記述法などが出てくるのですが、それも最初の第四章はシンタックスについてのみです。ここもすごく重要な事で、各プロパティの役割や実際の記述の仕方の解説が出てくるのは半分を過ぎた第五章になってようやくですが、結局各プロパティを正しく使いこなせる様になるには事前にシンタックスを理解しておく事が必須だと、個人的経験からも思うからです。
【参考】http://www.asahi-net.or.jp/%7Ejy3k-sm/css1/2003maki/

スタイルから考えるのではなく、まず論理構造ありきで考えられる様になる。それがCSSを使いこなせる様になる道に繋がると思います。

【蛇足】
以前、よく似た様な質問があり「具体的にテーブル使用でないサイトを作る時、どうすれば良いのかがわからない」という事に対してアドバイスさせて頂きました。よろしければそちらも覗いてみて下さい。
http://oshiete1.goo.ne.jp/qa4185652.html（ANo.5）

お礼

WEBページを本来あるべき姿にしてこうというテーマが感じられるサイトでした、読み込むと力になりそうです。一読してみます。回答例のページも目を通してみました。ありがとうございます。

回答No.2

reverie013

http://www.tagindex.com/index.html
素晴らしい方々がいらっしゃいますので、
サイト内の説明だけでなく、質問版など（新たに質問しなくても過去の回答を見るだけ）でも非常に勉強になります。

とにかく書いてみる事だと思います。
書いて上手くいかなかったらどこがどういけないのか、調べてみる。
形になっていても、もっと良い方法、書き方がないか調べてみる。
その内ある程度は身に付くと思います。

お礼

こちらのTAG indexでは掲示板で質問できるんですね！困ったら投稿してみます。タグの一覧もあってこちらも使うと便利そうですね。ありがとうございます。