HTML&CSSの勉強方法について

Question

今独学でホームページの勉強をしています。
しかし、勉強方法でつまづいています。

最初は　初めてのHTML&CSSって感じの本を一通り通してやったのですが、
そのあとの勉強方法が想像もつきません。

最初は簡単なホームページを作ってみようと思い、紙にHPを設計して、いざタグ打ちをしようと思ったら、その最初のタグが出てこない。って感じで本を読みながらしか打つことができないって状態になっております。
自分の勉強方法は何かがだめだって思っております。。。

みなさんはどういった勉強をして習得しましたか？アドバイスお願いします。

ORUKA1951 · Accepted Answer

　私は、初めて十数年以上になるので、どのように学んだかは忘れました。しかし、その中でどうすれば早いかはアドバイスできると思います。 1)まず、 ★HTML 4.01仕様書 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html#toc ) 　だけは、読んでいつでも参照できるようにブックマークに入れておくこと。とてもよく書かれています。　XHTML1.0,XHTML1.1,HTMLの元になっている仕様です。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから本仕様書は様々な方法で利用できるだろう。・最初から最後まで通読する。　本仕様書は、HTMLに関する一般表現から始まり、末尾に向けて徐々に技術的で特殊な　内容になっていく。・必要な情報に直接アクセスする。　できるだけ素早くシンタクスやセマンティクスに関する情報を得るために、オンライン　版の仕様書には次の特徴を持たせた。　　1) 要素や属性についての参照は何れも、本仕様書内の当該要素・属性の定義箇所に　　　リンクしている。各要素及び属性は、その一箇所で定義している。　　2) 各ページに索引へのリンクがあるので、要素または属性の定義を読むために、　　　2回より多くリンク移動する必要はない。　　3) 言語リファレンスマニュアルの各ページ冒頭には、全体の目次より更に詳細に　　　当該ページ内容を記したページ目次を掲げてある。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［1 HTML 4 仕様書について ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/about.html )］より　あわせて、『HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#toc )』も平行して読んでおくと良いでしょう。ただし、HTML5は未勧告ですし、とても大きな仕様なのでそれに従う必要はまったくありませんが、HTMLの考え方についてはとても参考になります。　 (注意)その際、あくまでstrictだけを学ぶこと。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.1 定義( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )］より 2) 書いたら、 ★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html ) 　などでチェックすること。どこがどう間違っているかをアドバイスしてくれるのでとても勉強になります。 3)デザインは【一切!!!】考えない　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ＞簡単なホームページを作ってみようと思い、紙にHPを設計して、いざタグ打ちをしようと思ったら、　No.3のDrFellさんは、やんわりと否定されていますが、私は最悪のパターンだと思います。HTMLで書かれたウェブページ(ホームページじゃない、ましてHPじゃない-- http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8#.E3.83.9B.E3.83.BC.E3.83.A0.E3.83.9A.E3.83.BC.E3.82.B8.E3.81.A8.E3.81.84.E3.81.86.E8.A8.80.E8.91.89 )は、【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］よりであり、そのために『2.4.1 構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』は守らなければなりません。　デザインのためにマークアップするのではなく、あくまで文書構造を示すためにマークアップするものです。　端的に言うと、HTMLは(文書構造)をマークアップするもので、プレゼンテーションはスタイルシトーで行うものです。　私は、HTML2→HTML3.2と使ってきましたがその経験から言うと、HTML3.2はまさしく、HTMLをデザインのために使っていた仕様でした。その反省からHTML4.01が策定され、その後の仕様はそれがより徹底されていると考えています。＞その最初のタグが出てこない。って感じで　たぶん、(2)が理解できていないことが原因です。　HTMLは、 1) HTML化したい文書を読み解き、それを構成する要素(element)に分解し 2) その要素が何であるかをタグで括ってマークアップする。　メタ言語です。　具体的には、

ここは文書の見出し

ここは段落

　ここは引用ブロック

とね。blockquoteなんて覚えにくい代表的なものですが、他はおおむね英語の単語か省略そのものです。要素索引 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/index/elements.html ) 　そのうち、普段使うのは、多くてせいぜい数十個--中学校で学ぶ英単語2,000語に比較したら1/00です。そんなのすぐ覚えます。 4) 最後にスタイルシートでデザインしていきます。　大事なことは、デザインのためにHTMLを書くのではなく、HTMLの文書構造に基づいてデザインしていくという基本スタンスです。　先のHTML4.01仕様書邦訳メンバーの内田さんがご家族(中学生？)に書かれた『はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )』があります。　手始めにするには、とてもよいサイトです。　先ほど回答した HTMLとCSSのお勧めの本を教えてください - Webデザイン・CSS - 教えて！goo ( http://oshiete.goo.ne.jp/qa/7670050.html ) 　もどうぞ・・

ORUKA1951 · Answer

No.4です。＞その最初のタグが出てこないということで、HTML4.01strictで使用するタグを整理してみました。全部で78個あります。 1) 必ず使うが、覚えなくてよいもの--テンプレートで済む。　　

DrFell · Answer

今の勉強でいいのでは？ちょっと焦りすぎの気がします。本を一通り通してやったぐらいで、必要なタグを調べもせずにすらすら出来るなんてことは、普通ありません。ご自分のやりたい事をやろうと、何度も繰り返し調べているうちに、自然と覚えてしまうものです。

紙にページを設計し、タグ打ちは正直ちょっとまずいかなとも思います。それて見た目依存のｈｔｍｌになりませんか？ｈｔｍｌは見た目ではない、文章の構造に対してタグをつけるものです。そこのｈｔｍｌとｃｓｓの役割分担、基本理念がわかっていれば、今の段階ではOKです。学ぶ本を間違うとこの大切な部分を学ばず、デザイン的に技術的にどうこうするhtmlができます。こういう本をえらばれてしまったのなら、マイナスからの学びなおしが必要となります。

htmlだと、hn/p/table/tr/td/ol/ul/li/a/strong/img位です。それらに当てはまらない場合にはdivやspanをつかいます。すぐに覚えられると思います。文章宣言などは、暗記している人は少ないです。コピペや辞書登録で済ませますし、雛形を作ることも多いです。オーサリングソフトでは最初から入っていたり、cssファイルをドラッグアンドドロップで済ませる場合もあります。

最初のタグがでてこないって、書きたいのは見出し？表？くらいはわかるでしょ？「HPに必要なソース探」すのはだめな参考書に当ったのかな？と思います。htmlがきちっとかけて初めて見た目が制御できますが、「HPに必要なソース探」すとhtml無視の見た目だけが実現できるソースを使ってしまうことになります。見た目はｃｓｓですが、1つ1つのプロパティは簡単で単純なことです。それらの組み合わせで見た目を実現します。まずは自分でパズル感覚で組んでみて、出来ない場所を調べるくらいでいいと思います。

実践あるのみです。仕様書どうりに動作しないブラウザだらけですので、数をこなすうちに、覚えます。

例えば、先に挙げられていますが、とほほなどは、htmlにｂやfontタグが入っています。いまどき、こういうタグは間違いとされていますので、ダメなものとして紹介ではなくこう使いましょうと説明されているサイトは見ない方がいいですし、本なら捨ててください。わざわざ間違いとされるものを学ぶ必要はありません。

神崎はお勧めです。勉強的で楽しそうでないためお勧めしても、スルーされることも多いですが、お勧めです。学ばなくても、知識として一通り読まれると、上述したダメなタグがなぜだめなのかや、理念が理解できると思います。最初は理想などどうでもいい、タグが知りたいと思われるかもしれませんが、最初に学ぶべきはタグより理念だと私は思いますので、お勧めします。理想とする形がわかっていると間違った本・真似してはいけないソースを選ぶ確率はぐっと減ります。

htmlとｃｓｓの役割分担がわかっていれば、あとは数をこなすことをお勧めします。慣れてきたら仕様書を一通り読み、理解を深める。誤解を改める。そしてまた実践。沢山実践して、沢山間違え、沢山修正し徐々に成長していってください。焦らずゆっくりだけど着実にです。そして新しいことに挑戦！がんばってください。

tenderfeel · Answer

本１冊通してやっただけでダメだと思ってるその意識がダメですね。全然量が足りないです！
機械相手の言語は　書く＝喋る　なので、もっとタグ打ちしましょう。
本とかお手本見ながらの写経でいいんですよ始めたばかりなら。私も最初はそうでした。
新しい本に手を出すもよし、よく見てるサイトのソースを読んで見るもよし。
覚えるまではひたすら書くことです。

慣れてくるとデザインを見れば頭のなかにHTMLが浮かぶんですよ。
タグが見えるとかアウトラインが見えるとかという人もいます。

日常生活で会話をする時には、話す内容に必要な単語を覚えていないと喋れないですが、
プログラミングとかマークアップもそれと同じことなんです。
HTMLはマークアップ言語ですから、タグ＝単語　文書構造＝文法だと思ってください。
本を一通り読んだだけでは単語や文法が頭に入らなかったってことなので、
何も見ずに打てるようになるまで繰り返しマークアップするのが基本的な勉強方法です。
もし日本語以外に喋れる言葉があったら、それを覚えた時の手法が生かせるんじゃないかと思います。

ブックマークおすすめサイト
http://www.tohoho-web.com/www.htm
http://www.htmq.com/
http://www.kanzaki.com/docs/htminfo.html
https://developer.mozilla.org/ja/

torayoshi · Answer

基本的にコピペです（笑）
IEとFirefoxで表示が同じならそれでOK。
趣味でやるならその程度でじゅうぶんです。

が、将来ウWebデザイナーとかで仕事としてやっていくなら、
それ専門の学校にとか行ってきちんと勉強することです。

HTML&CSSの勉強方法について

私は、初めて十数年以上になるので、どのように学んだかは忘れました。

No.4です。

今の勉強でいいのでは？ちょっと焦りすぎの気がします。

本１冊通してやっただけでダメだと思ってるその意識がダメですね。

この回答への補足

基本的にコピペです（笑）

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　私は、初めて十数年以上になるので、どのように学んだかは忘れました。