• 締切済み

HTML CSS覚えるコツはありますか?

ビルダーを使っていますが、ページを作っていくうえでCSSなどを勉強したほうがいいということに気づきました。過去ログをいろいろ見ましたが、参考書やサイトなどで、勉強をされてる方が多いですね。 いろんなサイトでソースなどを見ると、ビルダーで作られるソースより簡単に表示されている気がします。質問ですが・・・ 1.皆さんは独学で習得しましたか? 2.HTML CSSを覚えるコツなどはありますか? 参考書はソフトバンクの「HTML+CSS HANDBOOK」を購入しました。

  • ouren
  • お礼率78% (246/313)
  • HTML
  • 回答数9
  • ありがとう数4

みんなの回答

  • you-jia
  • ベストアンサー率24% (13/54)
回答No.9

こんにちは 1.独学です 最初はHTMLエディタで作っていましたが、細かく直したい部分は直接タグを編集し、そのうちに覚えるようになりました。 2.良いな、と思ったデザインや効果があれば、そのソースを見るようにしています。解読(?)するには知識がいりますから自然に覚えていきますし、ソースの書き方の勉強にもなります。 がんばってくださいね。

ouren
質問者

お礼

この場を借りて皆様にお礼をさせていただきます。 お一人お一人にお礼をしないで申し訳ありません。 やはり、独学派が多いですね。 しかもコツは自然に覚える・・・が多い。 現在は、ビルダーの編集/ソースのページで皆様からいただいた参考URLなどを見ながら、タグ打ちの勉強をしています。 なかなか思ったとおりにいかなくて、試行錯誤していますが・・・ 以前はソースを見ても何がなんだか・・・って感じでしたが、しているうちになんとなく紐解けてきた感じです。(自負しているだけ・・・) 英語の文法のような、答えはひとつだから理系のような・・・などと考えながら徐々に進めています。 まわりにわかる友人がいるといいのですが全然いなくて・・・ 頑張ります!! わからないことがあったらまた質問します。その時は宜しくお願いします。 申し訳ありませんが皆様の回答ありがたかったので公平にポイントは無しにさせていただきます。 本当にありがとうございました。

  • 9arabi
  • ベストアンサー率32% (140/433)
回答No.8

独学です。 意見交換も重要でしたね。 いろいろなブラウザをとにかくインストールして、見比べながらやるのがいいですね。 でも一台の端末だと、IEは複数のバージョンが入れられないのでたいてい古いバージョンを無視してしまってます。 XHTML化するのにCSSを覚えたようなものなので、OperaでCSSを消して(作成者モードを切り替えれば構造だけがみれる)構造を確認しながら他のページを参考にしたりもしました(便利です)。 やっていてわからなかったら、とほほのWWW入門とかで検索しながらやってます。 でもまだまだ難しいですね~。

回答No.7

1.独学です。 一応、学校で習いましたが、今思い出すと、でたらめしか教えていなかったです。 2.HTMLを覚えるコツは、使う要素と、使わない(使えない)要素を覚えることです。 CSSは、なんども使い、経験で覚えていくのがいいと思います。 わたしは、このやり方で覚えました。 あと、HTMLを書籍やwebサイトで参考にする場合、でたらめを教えているものか、正しいHTMLを教えているかを見極めるのが大事です。 大半は、でたらめを教えているので、間に受けないよう気をつけてください。 HTMLも、CSSも、仕様書を見れば、間違いは載っていないし、正しい使い方も覚えれるので、仕様書を参考にするというのも手ではないでしょうか。

noname#20378
noname#20378
回答No.6

1,2 僕は 底なし井戸の底の底-良質なテキストサイトの爲のISO-HTML入門 http://kaz.topaz.ne.jp/well/www/isohtml/ HTML版『スタイルシートWebデザイン』 http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/1.html#h11 等を自分で読んで学びました。やや長くて時間はかかるかもしれませんがこの2つは、非常に判りやすく良いページだと思います。 究極のホームページ裏ワザ入門HTML MANIAX http://www.amazon.co.jp/exec/obidos/ASIN/4844319515/249-3679560-8171512 等もどちらかというとCSSメインで薄いですが、割と判りやすかった気がします。 辞書としては...ある程度わかるようになってきたら 改訂版 詳細HTML&XHTML&CSS辞典 http://www.shuwasystem.co.jp/cgi-bin/detail.cgi?isbn=4-7980-1003-0 が優れていると思います(というか理解出来てきたら自然にどれが良書か判ってくる)

回答No.5

1.独学です。ただし、情報処理系の専門卒でプログラムを作ったりする事を仕事としていたので基礎については学校で学んでいました。 とはいえ、汎用機が主だったのと私の当時はCSSなんてなかったですから・・・。 2.コツというか、出来れば覚えるという事を記憶するでなく理解するとして欲しいなぁ~。 まぁHTML,CSSは容易に動作確認が出来るので いろいろ作っていろいろ診るのが良いかと思います。 それから、意味を理解してそれぞれに分けて学ぶのも良いかと。 結構いろいろな事が出来るので、覚える事が多いし。 HTMLではヘッダとボディに分けて考え ブロック要素とインライン要素と種類を意識し CSSも位置情報,色等で機能を意識し あと、用語も適切に覚える事で調べたり質問したりしやすくなるかと思います。

  • wif87
  • ベストアンサー率50% (47/94)
回答No.4

1.独学です。 2.辞典(タグ辞典など)を買い、やりたい事をやる為の方法を徹底的に読んで実践する。

  • nyonyoko
  • ベストアンサー率0% (0/1)
回答No.3

1、独学、未経験から、今はWebデザインの仕事をしてます。 2、とにかくHPを作られるのが良いと思いますよ。 美しいレイアウトのHPがあればそのサイトのソースを見て調べる。 実際にこんなページレイアウトをしたい!っていうのをどんどん具現化していく。 何回も使えばいやでも覚えますしね^^ ↓参考URLは、ブラウザでの表示方法も合わせて載せてくれてるので、ぜひご参考に。

参考URL:
http://www.tagindex.com/index.html
  • souta_n
  • ベストアンサー率33% (79/234)
回答No.2

おっWebページでこんなこと出来るんだ!というサイトのソースをメモ帳に貼り付けて、いじくり倒す。

  • tnt
  • ベストアンサー率40% (1358/3355)
回答No.1

独学です。 結局、どっかの学校に行っても 生徒の質は千差万別ですから 待たされる時間だけが長いという結論になりました。 それから覚え方ですが、 コツはとうとう見つかりませんでした。 あまりにも普通の言葉から離れて居るんですね。 で、やったのは、 索引ページをコピーして壁に貼っておく、これだけです。 記述がわかって内容がわからないのなら 本を見ますが、 普通は何て書けばよいのかがわからないのですから そのヒントだけあればなんとかなります。

関連するQ&A

  • 簡素化したHTMLを書けるようCSSを勉強中です

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

    • 締切済み
    • CSS
  • HTML CSS

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

  • ホームページビルダーでCSSをアップできないので困ってます。

    ホームページビルダー6.5にてホームページをつくっております。今までは、ページ編集の部分に文字を打ち込んで使っていたのと、HTMLをコピー&ペーストしてつくっていました。 今回、友人にCSSを使ったソースにてサイトをきれいにしてもらったのですが、ホームページビルダー6.5にて更新することができません。初心者でソースの表示からHTMLソースのところにコピー&ペーストしたのですが、たぶんCSSの部分がうまく更新できずにプレビューがおかしく出ます。ちなみに友人はホームページビルダーを使ったことがないとのことで判らず、困っています。 どのようにすればホームページビルダーのHTMLソースからアップデートできるか、もしくは参照すればできそうなサイトなどありましたら教えて下さい。よろしくお願いいたします。

  • HTML5+CSS3 でしかできないこと

    長年、趣味や一部仕事で XHTML+CSS のサイトを作っています。 数年前から、サイト内にCGIを入れたり、色んな動きを楽しむため javascriptを導入してサイト作成を楽しんでいたりもします。 言語も html css javascript jquery php など、色々楽しみながら勉強してきました。 ほんの数年前から、HTML5+CSS3 が登場しましたが、 様子を見ていると、どんどん独創的なサイトが出てきています。 スマートフォン用のサイトも作れるようになりたいな、と思っていましたが ようやく重い腰を上げて作業に取り掛かろうと思っています。 そこで質問なのですが、HTML5+CSS3で作られたサイトで まるでjavascriptで制御されたような軽快なスクロールや動きが散見されます。 こうしたサイトを見ると、javascriptで動かしているのかHTML5で動かしているのか 判別がつきません。 HTML5やCSS3で新しく実装された機能については、ネットで調べると色々出てきます。 例えば、リンクタグをブロック要素化することが簡単になったとか、 角が丸い四角形を充てることができるようになったとか、電話番号をタップすると 「通話」ボタンが出るようになったとか、個別の機能についてはなんとなく把握しました。 しかし、「HTML5+CSS3で作られたサイト全体」で見ると、 いまいちピンと来ないのです。 そこで、お詳しい方に是非、以下のような形で 教えてもらえたらと思い、投稿しました。 ------------------------------------- 実際にHTML5+CSS3で作られたサイトを基に、 どこをどのように設定したのかを見せて欲しい ------------------------------------- 例えば、 http://www.hotakubo-seikei.com/ は、ソースを見るとHTML5で作られていますが(section タグや header タグがありますね) XHTML+CSSでサイトを長年作ってきた人間からすると、 どうしてこんなサイトができるのか全く分からないのです。 javascriptもいくつか利用されていますが、どれがjavascriptによるもので どれがHTML5+CSS3によるものなのかわかりません。 また、一番驚いたのが、サイトの構成です。 サイト全体の横幅が無く全画面表示になっており、 3カラムで、縦スクロールするとディレクトリが変わるなんて XHTML+CSSの常識では考えられません。 もちろん、デザイナーによるデザインでこうなったと言ってしまえばそれまでですが、 それを実装できていることに感動しているのです。 ↑↑↑ こんな感じで、何かサンプルサイトを基に XHTML+CSSとの違いや、HTML5+CSS3だからこそ実現できることを 分かりやすく教えてもらえたらとても有難いです。 サンプルサイト付きで、なるべく詳しく教えて頂いた方に ポイントを付与させていただきたいと考えております^^ どうぞ宜しくお願い致します!

  • html&cssの件

    html&cssを勉強している超初心者です。本を読みながらソースを入力していたところ、ソースどうりにならず、なんども確認しましたがソースに間違いはありませんでした。翌日そのページを開いたところ、ソースどうりになっていました。 これってパソコンが悪いのかなにが悪いのか解らなくてなやんでいます。どなたか教えて下さい。お願いします。(更新は行っています) cssソース <style type="text/css"> 前略 p.note { border: double 3px #86a9c2; } </style> この部分なんです。

    • ベストアンサー
    • HTML
  • CSS、HTMLのメニューリストの解説をお願いします

    宜しくお願い致します、趣味でホームページ制作をはじめました。 http://www.b-architects.com/ 上記のサイトのトップページの 「メニューの部分だけ(リスト)」、 構造を理解して自分もこんな感じでメニューを作りたいと思っています。 ちなみに私の知識としては、HTMLの記述は非常に初心者レベルで記述できる程度、CSSに関しても同じであります。 上記サイトを理解する上でまず、上記サイトのトップ画面を開いた上で、 ファイル→名前を付けて保存する  事で、上記サイトの構成しているファイルと部品(CSSファイルやら 画像)を保存して、上記サイトのHTMLソースを眺めながら、 「メニュー(リスト)の部分だけ」 理解し、自分も同じように記述して習得しようとしているのですが、 「ちんぷんかんぷん」です。  まず、メニュー(リスト)にあるサービス~ケーススタディの左横の 縦の棒ですが、これは画像なんでしょうか?ソースで記述されたものなのでしょうか?  先ほども私が書いたように、トップページからファイル→保存をすると このページを構成するファイルと部品(CSSファイルやら画像)は確かに 保存されてますが、縦の棒に該当する画像は保存されてませんでした。では ソースでCSSか何かで記述されているのだろうか?と思い外部CSSファイルを睨めっこしたのですが、そんな形跡がありません。  このサイトはプロのデザイン制作会社のページなのでコード文字数が多く なかなか私も完全に構造内容を確実に把握できません。  「メニュー(リスト)部分のみ」でいいのでどなた様かどうか解説して 頂けないでしょうか?  また私もどうも地頭が悪いので、メニュー(リスト)の部分を構成する HTMLとCSSを抜粋して説明して頂けると本当に有難いです。  友人には、そんな難しいサイトで勉強せず、適当にテーブルで作ればい いだろうが!と言われますが、なんとかこのサイトで理解したいんです。  上記サイトの構造を眺めて2週間ですが、全然わかりません。  助けて下さい。宜しくお願い致します。  

    • ベストアンサー
    • CSS
  • HTML&CSSの勉強方法について

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

    • ベストアンサー
    • HTML
  • HTMLのものをcssで修飾したい

    すでにホームページはできています。ただし、単なるHTMLで書かれたものなので一度、ホームページビルダー11体験版で今あるホームページを保存して、CSSで作ろうと考えています。何かほかのほうがあれば教えてください。 どのようにしてCSSに変えられるでしょうか。

  • HTMLについて、教えて下さい

    ずっと独学でXHTMLを勉強していたのですが、気が付けば今はHTML5になっていました。 どうゆう進化をしているのか全然分からないのでお聞きしたいのですが・・・・やはり基本のXHTMLがあって、それからHTML2→3→4→5と内容が少しづつ変化していっているのですか? 勉強していくのなら、2345と順番にしていかないと分からないのでしょうか? *CSSもCSS→CSS2→3としていったほうがいいのでしょうか? HTMLがどう変化しているのかさえ分からないので的はずれな質問かも知れませんが教えて下さい。

  • htmlとCSSを覚えるにあたって

    サイト作りを勉強し始めましたが、綺麗なソースを心がけましょうみたいなことを言ってる人をみかけ、真に受けました。 ホームページビルダーを使おうと思いましたが、この手のソフトはソースが汚いということでやめ。 htmlとCSSを勉強することになると思いますが、これらのことを説明したサイトが結構ありますよね。 htmlとCSSの勉強は、こういったサイトを読むだけで充分でしょうか? htmlも1~5まであるようだし、タグも数年前はOKでも今はNGというものがあったりしますよね。 サイトの情報が古くても、僕には判断できません。 そこでもし最適なサイトをご存知でしたら教えていただけないでしょうか? サイトだけでは不充分ということなら、良書なども教えていただけると幸いです。

    • ベストアンサー
    • CSS