HTMLとCSSの効果的な勉強方法や、参考になる参考書、サイト等があれ

質問

HTMLとCSSの効果的な勉強方法や、参考になる参考書、サイト等があれば
是非教えて下さい。

会社でＷＥＢ担当になったのですが、
簡単なHTML以外は知識が無い状態です。

リニューアル等の大きな制作は業者の方に御願いするとしても、
ある程度のサイトの構造は理解したいと思っています。
（ニュースリリース等の更新は問題ありません）

初心者向の解説があるＷＥＢ等で自己流で勉強していますが、
なかなか難しいなあと感じています。

知識を身に付けるためには、ある程度の基礎が必要なのかもしれませんが、
とりあえず、何が基礎かも分からないので、必要な情報を都度調べて模索している状態です。

勉強に近道はないと思うのですが、もう少し要領よく学ぶ為の
進め方/順序（この知識を身に付けてから、これ、的な・・・）等があるのではないかなあと思っています。

ご意見いただけると嬉しいです。

回答No.1

noname#140971 · ベストアンサー

私が会社のＨＰを作成した際の手順は以下のようです。

１、ＨＴＭＬ、ＣＳＳの仕様書の邦訳を印刷して一通り読み試す。
２、Ｊａｖａｓｃｒｉｐｔを一通り演習する。
３、ＩＥ、Ｆｉｒｅｆｏｘ等との関連を書籍で確認する。
４、スタイルシート集からテクニックを学ぶ。

　ＨＰを記述しアップロードするだけでしたら１、２は参考書は不必要でした。３、４は、これは参考文献は必須でした。
　まずは、HTML仕様書の検索と印刷から始められたらどうでしょうか？

お礼

早速のご回答ありがとうございます！

HTML,CSSの仕様書というのがあるのですね。
ソースとはまた違うものなのでしょうか？

参考にさせて頂きます。

回答No.5

matoro6173

１：１からサイトを作る系の本（3000円くらいでたくさんある）ので、まずそれをみながら作る。
２：HTML+CSSがどのようなものを把握できたら、WEB標準についての本を買って勉強する。
３：XHTMLやjavascript、サーバー系までいくならその本を買って勉強する。

タグを覚えたり、禁止された使い方、バグが起きる原因
よく使われる手法、発展していく新技術、プログラミング言語などなど
まずは作りながら、本にお金を出すことを惜しまないことが近道だと思います。

レガシーで堅牢？なコーディングであればHTML+CSSだけでできてるようなサイトのコードを
ブラウザからでも見たら勉強になるかもしれませんが、だいたい本に書いてあります。
カッコいいサイトなんかは、Flashやjavascriptが使われてあったり、Ajaxだったり、
サーバー側で動的にコードが生成されてあったりでおそらく読めたものではないでしょう。

回答No.4

metametamu

作っていくうちにわからない所、疑問に思った所を検索していくのがベストだと思いますよー。
私の場合、最初のうちはhtmlのタグやcssのプロパティを使いながら覚える作業だった気がします。
ある程度作ってみるとタグの微妙な使いかたやcssのムダが見えてくるのでそれを最適化していくという感じでした。
htmlでの最適な書きかたとかは複数のブログを参考にするといいと思います。どうしてこんな感じに書いているんかポリシーがそれぞれ異なるのでできる限りいいとこ取りをするという感じで。
cssに関してはほとんどがIE、safariとの互換性をどう保つかという感じです。

参考サイト
http://www.seotoools.com/htmllint/htmllint.html
http://adp.daa.jp/web.html

コツというか、自分がすぐに使えるhtmlとcssのテンプレートを作るといいと思います。head内とかいつも書くのは面倒なので。
あと表示確認するブラウザの種類はだいたい今だとIE6～IE8、firefox、opera、safari、iphone(必要なら)あたりだと思います。とりあえずfirefoxで作りつつ最終的に全ブラウザで確認するのがいいと思います。IEに関してはIE Testerというソフトがあるので、それで全バージョンの確認ができますよ。

お礼

回答ありがとうございます。

自分がすぐに使えるテンプレートを作成するというのは、
是非レベルアップしたら使わせて頂きたいと思います。

リンクも参考にさせて頂きます。
ありがとうございました。

回答No.3

tracer

No.2です。
追記です。

一般的にホームページを作る人は、デザインもできて、プログラムもかけて、動画や写真の編集もできるひと。と勘違いされがちですが、実際はそれぞれが別物です。質問内容はHTML＆CSSの勉強方法なので、話がそれているかもしれませんが、デザインとHTML&CSSの記述を同時に行わないことを強くおすすめします。おそらくそれではいつまで経っても完成しません。

HTML&CSSの一番手っ取り早い学習方法は、他サイトをコピーすることです。もちろん、HTML＆CSSをそのままコピーしてはいけません。デザインのコピーです。仮に、Yahooやhatenaなどのサイトを質問者さんが独自にHTML&CSSを書いて、それがInternetExploer、Firefox、Safari、Google Chrome、Operaで同じように表示できるようになったのであれば、もう必要十分な技術だと思います。そこからは、自分の中で効率のよい記述方法を開発していくだけです。

お礼

分かりやすい回答（２つも！）ありがとうございます。

＞HTML&CSSの一番手っ取り早い学習方法は、他サイトをコピーすることです。

最初は、既に出来ている物の構造を理解する事から始めるのは、確かに有効ですね。
さっそく取組んでみます。

デザインと同時に取組まないように、という注意点も非常に参考になりました。
（実際、そうなりそうでしたので・・・）

ありがとうございました。

回答No.2

tracer

どこまでを目指すのかによって覚えるべきことは異なりますが、はじめの一歩というのであれば、

1.HTMLの種類やその目的を知ること。
2.CSSの目的を知ること。
3.HTMLタグを理解すること。
4.CSSプロパティを理解すること。
5.クロスブラウザを理解すること。

1と2が分かれば、3と4はそれぞれのポケットリファレンスがあれば事足りると思います。リファレンスはご自身で使いやすければ何でもいいと思います。ただし、WEB関連は仕様の変化が激しいので、必ず新しいリファレンスを使用することをおすすめします。また、自分の扱っているWEBサイトのHTMLの種類がなんなのかを理解していないと、古い情報と混同してしまい、理解が遅れると思います。
5については、いろんなブラウザで見ることのできるHTML&CSSを書きましょう。という意味になります。

慣れてくると、他サイトで見る、斬新なエフェクトや機能を実装したくなるかもしれませんが、そういったものは、HTML&CSSだけでは実現できず、一気に土俵が広がってしまうため、最初の一歩としては手を出すべきではありません。学習効率が落ちます。ひとまず、いろいろなブラウザで、文章や画像を意図通りのサイズ、位置にレイアウトできるか、という部分で学習されることをおすすめします。

なお、ご存知かもしれませんが、フレームやテーブルレイアウトは今となってはとても古い手法で、そういった古い情報に惑わされないように頑張ってください。