• ベストアンサー

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

今独学でホームページの勉強をしています。 しかし、勉強方法でつまづいています。 最初は　初めてのHTML&CSSって感じの本を一通り通してやったのですが、 そのあとの勉強方法が想像もつきません。 最初は簡単なホームページを作ってみようと思い、紙にHPを設計して、いざタグ打ちをしようと思ったら、その最初のタグが出てこない。って感じで本を読みながらしか打つことができないって状態になっております。 自分の勉強方法は何かがだめだって思っております。。。 みなさんはどういった勉強をして習得しましたか？アドバイスお願いします。

  • HTML
  • 回答数5
  • ありがとう数4

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.4

　私は、初めて十数年以上になるので、どのように学んだかは忘れました。しかし、その中でどうすれば早いかはアドバイスできると思います。 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) その要素が何であるかをタグで括ってマークアップする。 　メタ言語です。 　具体的には、 <h1>ここは文書の見出し</h2><!-- Heading(見出し) --> <p>ここは段落</p><!-- Paragraph(段落) --> <blockquote> 　ここは引用ブロック<!-- Block of quotation --> </blockquote> とね。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://okwave.jp/qa/q7670050.html ) 　もどうぞ・・

その他の回答 (4)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.5

No.4です。 ＞その最初のタグが出てこない ということで、HTML4.01strictで使用するタグを整理してみました。全部で78個あります。 1) 必ず使うが、覚えなくてよいもの--テンプレートで済む。 　　<HTML><BODY><HEAD><LINK><META><STYLE><TITLE> 　　　たまに使うがテンプレートやコピペで間に合うもの 　　　<NOSCRIPT><SCRIPT><BASE> 2) 必ずと言うくらい使うもの--覚えて置いたらよいもの 　　<A><BLOCKQUOTE><DIV><DD><DL><DT><EM><H1><H2><H3><H4><H5><H6> 　　<HR><OL><P><IMG><LI><PRE><Q><SPAN><STRONG><SUB><SUP><TT><UL> 　　　存在を知っておくとよいもの(できれば使うべきもの) 　　　<ADDRESS> 3) 表を作成するときに最低限必要なもの 　　<CAPTION><TABLE><TBODY><TD><TH><TR> 　　　必須ではないが、仕様書を見ながらで間に合うもの 　　　　<COL><COLGROUP><TFOOT><THEAD> 4) フォームを作るときにいるもの 　　<FORM><INPUT><OPTION><SELECT><TEXTAREA> 　　　フォームのときたまに使うもの、めったに使わないもの 　　　<BUTTON><FIELDSET><LABEL><OPTGROUP><LEGEND> 5) めったに使わないが存在は知っておくべきもの 　　<ABBR><DEL><INS> 6) 使わないほうがよいもの、使うべきでないもの!-- これは意外かも--- 　　<B><BIG><BR><I><SMALL> 7) オブジェクト--動画など、画像やiframeの代わりに使う 　　<OBJECT><PARAM><VIDEO> 8) 特殊な分野でないと使わないもの。知っていれば使いたくなるもの 　　<BDO><CITE><CODE><DFN><KBD> 9) クライアントサイドマップ 　　<MAP><AREA><SAMP><VAR> 10) 絶対に使わないもの 　　<ACRONYM> 　一般的なサイトでは、この半分使えば・・すごい・・かも →Index of the HTML 4 Elements ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/index/elements.html )

takokinngu20
質問者

お礼

：ORUKA1951さんの説明はとてもわかりやすかったです。 部分的な質問にも答えてくださりありがとうございます。

  • DrFell
  • ベストアンサー率55% (305/551)
回答No.3

今の勉強でいいのでは？ちょっと焦りすぎの気がします。本を一通り通してやったぐらいで、必要なタグを調べもせずにすらすら出来るなんてことは、普通ありません。ご自分のやりたい事をやろうと、何度も繰り返し調べているうちに、自然と覚えてしまうものです。 紙にページを設計し、タグ打ちは正直ちょっとまずいかなとも思います。それて見た目依存のｈｔｍｌになりませんか？ｈｔｍｌは見た目ではない、文章の構造に対してタグをつけるものです。そこのｈｔｍｌとｃｓｓの役割分担、基本理念がわかっていれば、今の段階では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とｃｓｓの役割分担がわかっていれば、あとは数をこなすことをお勧めします。慣れてきたら仕様書を一通り読み、理解を深める。誤解を改める。そしてまた実践。沢山実践して、沢山間違え、沢山修正し徐々に成長していってください。焦らずゆっくりだけど着実にです。そして新しいことに挑戦！がんばってください。

takokinngu20
質問者

お礼

確かに焦ってる部分が自分にはありました。 アドバイスのほうありがとうございました。

回答No.2

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

takokinngu20
質問者

お礼

アドバイスありがとうございます。

takokinngu20
質問者

補足

回答ありがとうございます。 さっそく写経をやってみます。 あまり難しいのだとできないので、簡単な方からやってみようと思います。 もっとタグ打ちしましょう。と書かれていましたが、自分、例えば<html><head>とか CSSの宣言の<link rel="stylesheet" type="text/css" href="">とかを単語登録しているのですが、これはtenderfeelさんから見て、これはあまりよくないことでしょうか？

  • torayoshi
  • ベストアンサー率62% (910/1449)
回答No.1

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

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • HTMLはどうのように勉強するんでしょうか？？

    ホームページを作成したいのですが、ＨＴＭＬプログラミングについては全く知識がありません。将来的にもＨＴＭＬをしっかりと理解しておきたいと思っています。 本屋や色々な本を見ましたが、初心者にとって結局何から始めるのがいいのがわからず買うのはやめました。 初心者なんで、もちろん基本的な知識を習得するのはもちろんですが、 あくまで目的はホームページを作ることなんで、出来ればホームページを作りながらあわせてＨＴＭＬを勉強していくといったスタイルをとりたいと思っています。 周りに詳しい人とか全くいませんので全くの独学になります。 何か効率的な勉強がありましたらどうかご教授願います。

    • ベストアンサー
    • HTML
  • 簡素化したHTMLを書けるようCSSを勉強中です

    出来るだけ簡素化したHTMLを書けるよう、CSSを勉強中なのですが、今はドリームウィーバーのCS5.5なのですが、ホームページビルダーでホームページ作りを勉強し始めたため、どうしてもホームページビルダーの癖が出てしまいますし、ＣＳＳの云わんとするところは理解出来るのですが、「じゃあ具体的にどうしたらいいの？！」ってなってしまいます。 具体的には、ＨＴＭＬだけで、TABLEを多重化させ書いていたページを、見た目を変えずに、ＴＡＢＬＥを使わずに、HTML（出来ればＸＨＴＭＬ）＋ＣＳＳ（外部ファイル）でweb2.0で書くとどうなるかとか、 画像のロールオーバーを≪<body onload=≫で書いていたのを同じくHTML（出来ればＸＨＴＭＬ）＋ＣＳＳ（外部ファイル）で書くとどうなるかとか、比較してあると「私は」分かりやすいのですが、そういうサイトをなかなか探し出せないでいます。 こういう事を比較して書いてあるサイトがありましたら、教えて頂きたいです。 また、検索エンジン最適化（Search Engine Optimization、SEO）にもＣＳＳは有効だという事ですが、≪<meta name="Keywords" content=≫等は、ＨＴＭＬファイルに書くか、ＣＳＳファイルに書いた方が良いのか、ＣＳＳに書くなら書き方は同じで良いのか等、分からない事だらけです。 よろしくお願いします。

    • 締切済み
    • CSS
  • HTML CSS覚えるコツはありますか？

    ビルダーを使っていますが、ページを作っていくうえでＣＳＳなどを勉強したほうがいいということに気づきました。過去ログをいろいろ見ましたが、参考書やサイトなどで、勉強をされてる方が多いですね。 いろんなサイトでソースなどを見ると、ビルダーで作られるソースより簡単に表示されている気がします。質問ですが・・・ １．皆さんは独学で習得しましたか？ ２．ＨＴＭＬ　ＣＳＳを覚えるコツなどはありますか？ 参考書はソフトバンクの「ＨＴＭＬ＋ＣＳＳ　ＨＡＮＤＢＯＯＫ」を購入しました。

  • HTMLとCSSについて勉強しています。

    HTMLとCSSについて勉強しています。 PCについての基本操作はできますが、HTMLについてはまったくの素人。 Dreamweaverを使ってのWEB講座を受講したのでソフトを使えばCSSもある程度使ってHPを作成できるようになりました。 ただタグをきちんと理解していないので、細かいところでつまづいてしまいます。 勉強用に本を購入したいのですが、 1.一週間でマスターするHTML for Windows (1 Week Master Series) 2.HTMLとスタイルシートによる最新Webサイト作成術 どちらを購入するか迷っています。 先生に1.の１週間でマスターするシリーズの福島靖治著は非常にわかりやすいといわれJavascript・CGI・Perlはこのシリーズを購入したのですが、基本となるHTMLについては著書が違うので購入をためらっています。 amazonのレビューで2.がわかりやすいとあったのですが、HTMLの知識が歯抜けで基礎も応用もというようなお勧め本は他にありますか？ よろしくお願いします。

    • ベストアンサー
    • HTML
  • HTML　CSS

    独学でフリーWebデザイナーになることを目指しています。 今から勉強しようと思うのですが、いろいろ調べたところまずはHTML＆CSSの学習からとありました。 はずかしい質問とは思いますが、勉強方法がわかりません。 よろしくお願いします。

  • HTMLとCSSについて

    HTMLの本を見ながらHTMLを勉強していますが、 所々にCSSと言う言葉が出てきます。 本を読んでいてもCSSはHMTLを細かく操作すると書いてありました。 と言う事はCSSはHTMLとは違う言語なんでしょうか？ CSSを教えてくれませんか、お願いします。

  • PHPの勉強をする際、その前知識として（HTML/CSS）の知識が必要

    PHPの勉強をする際、その前知識として（HTML/CSS）の知識が必要でしょうか？ （HTML/CSS）については、ほんの基礎的な知識しか持ち合わせておりません。 PHPに興味あり勉強したいのですが、（HTML/CSS）をある程度こなせる状態まで習得した後、PHPの勉強をしたほうが良いのでしょうか？ 行く行くはホームページ制作の仕事をしたいと思っております。

  • タグ打ちを徹底的に修練する方法って何かありませんか？

    私は今、タグ打ちでホームページを作成する勉強をしています。 併せてDreamweaverの勉強もしていますが、やはり基礎であるタグを理解することが先決だと思っています。 今は参考書１冊を購入して、それを何度も繰り返して勉強しているのですが、やはりそれだけでは中々前に進みません。 ちなみにそういった関係の仕事をしているわけではありません。 私の理想をいうと実践でも役立てるようなタグ打ちの技術を習得したいです。もちろん、独学なのでプロレベルまでになりたいというのは少しむちゃな話ですが、とりあえずタグ打ちの基礎的なことはマスターしたいです。 プロの方がどういった感じで仕事をされているのかわかりませんが、 素人の独学でタグ打ちを実践的かつ効率的にマスターする方法などあれば、どんな事でも構いませんのでご教授願います。

  • ＨＴＭＬ５で削除されるタグはどうなりますか？

    私は１９００年代からホームページを作成してきました。 そのころはＣＳＳもありませんでした。やっとＣＳＳを習得できたと思ったら今度はＨＴＭＬ５です。 そこで疑問に思ったのですが、ＨＴＭＬ５で削除されるタグです。たとえば＜frame＞のタグです。ＨＴＭＬ５ではその代わりはあるのでしょうか？参考になる情報があれば教えてください。 他にも<font><center>など使い慣れたタグが削除されるのはなぜでしょうか？

    • ベストアンサー
    • HTML
  • javascriptの勉強方法

    webデザインの勉強を始めようやくhtmlやcssを使えるようになってきました。 次のステップとしてjavascriptの習得を考えているのですが、理数系の本を読んでいるようで、何がなんだかわかりませんでした。 htmlやcssとは違った壁を感じてしまい、なかなか前に進めません。 独学でjavascriptを習得する時、みなさんはどのように勉強したのでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する