• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:HTML5、CSS、JavaScript、CSS3)

HTML5、CSS、JavaScript、CSS3 ホームページ作成のために必要なソフトとは?

aky_nilの回答

  • ベストアンサー
  • aky_nil
  • ベストアンサー率46% (94/203)
回答No.2

まずそれぞれの役割を。 【HTML】 webページの情報を書き込む。HMTLだけだと見栄えはあまり良くできない。 【CSS】 HTMLで作られたページを装飾するためのもの。位置や色などを自由に設定できます。 HTMLでもある程度の装飾は可能ですが、CSSはかなり幅広い装飾が可能です。 解説を見れば便利さがわかりますよ。 【JavaScrit】 HTMLに動的な表現をできるようにするためのプログラム。 HTMLは自分でそこに書き込んだことしか表示できません。 例えば現在時刻を表示する時計を入れたいとします。 時間の表示は常に変化しますが、HTMLだけでは変化するものを表すことができません。 12時00分と書いたら、ずっと12時00分としか表示されませんし、それしかできません。 そこでHTML内にプログラムを書いて、HTMLに変化を持たせられるようにしたのがJavaScriptです。 時計以外でも当然ながらできることはいろいろありますよ。 さてご質問を上から。 (1) 上の解説にも書いたように、それぞれ役割が違います。 挙げられているものはどれもコンピューター言語、プログラムみたいなものです。 これは買うとかそういうものではないのです。 これらの言語にもバージョンがあり、できることがバージョンが上がるごとに増えていきます。 記述をしてページ等を作っていくわけですが、記述の際に「これはバージョン○○で書きますよ」といった定型句を書けばOK。 そしてこの場合ですとブラウザ(InternetExplorerやFireFoxなど)がそれを理解して、「そのバージョンで書かれている前提で実行しますよ」となるわけです。 逆にブラウザが古いと「そんなバージョン知らないんだけど・・・」となって、エラーとなったりします。 (2) テキストエディタであれば何でも良いので、書こうと思えばWindows標準搭載のメモ帳でも作れます。 もしやるならフリーソフトのTeraPadなどの、もっとマシなエディタの方が使いやすいですけどね。 ドリームウェーバーなどのソフトはあくまでも支援ツールで、最低限のHTML、CSS、JavaScriptの知識は必要になります。 (3) 4でも5でも基本は変わりませんが、細かい点で違う部分がいくつかあります。 また、現状でHTML5とCSS3はまだ普及できていません。 機能の一部はブラウザが対応していなかったり、それもブラウザの種類ごとでまちまちな状態です。 (あくまでも基本的な記述は可能ですが、HTML5で追加された機能について不可能という意味です。) 本来であればWebページはどんな環境を使っている人でも見られることが理想なので、まだHTML5に手を出す必要はないでしょう。そもそもHTMLを理解できれば、5の追加機能もすぐに使える程度のものです。 (4) 上にも書きましたが、CSS3は従来のものに追加機能を付けたものです。 HTML5と同じくまだ普及はされていませんが、CSSの構造がわかればCSS3の追加要素もすぐにわかる程度です。 解説書を購入する際でも、HTML5やCSS3だけで使える機能のみを書かれた解説書は存在しないはずです。 あくまでも基本部分は同じで、追加や変更がいくつかあるだけと思っていください。 恐らくは解説書でも、その機能や記述方法についての対応バージョンの注意書きはあるはずです。 教室などに通うのも手ではありますが、そこまで難解なことはないと思います。 解説書や解説サイトは山のように腐るほどありますし、独学するにも事足りません。お金もかかりません。 レイアウトだけであれば、基礎を学んだ後に、Webページのテンプレを配布しているサイトもたくさんあるので、そのテンプレの中身を理解しながらマネて自分で作ってみるのが学習としては手っ取り早いですね。 もしつまずくならJavaScriptあたりかもしれません。プログラミングをやったことがないと不慣れな部分が多いはずですので、そこは解説書を買って基礎から学ぶといいでしょう。 順番としてはHTML→CSS→JavaScritがオススメ。HTMLとCSSはほぼ同時並行で勉強しても大丈夫です。

flattoo
質問者

お礼

詳細なご説明ありがとうございます。 複数の方からのアドバイスに共通している部分が多く 私が完全に思い違いをしていました。 ドリームウェーバーにしても、最低限の知識が必要との事。 いずれにしても、通学も視野に入れながらも、まずは自分で 少し勉強してみます。

関連するQ&A

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

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

    • ベストアンサー
    • HTML
  • 新旧のHTMLを左右対照するソフト

    更新する前と後のHTMLでどこが変更になったか知りたいのですが、そういうツールがあったと記憶してます。フリーソフトでありませんか? 同じファイル名で中身のHTMLがどのように違うか見たいのです。 確か私が記憶しているのはビジュアルソースセーフとかエクリプスとかいう名前だった思いますが、多分これらは大きな何万行にもなる開発用のツールで今使用するには多機能すぎるし、前者においてはフリーではなかった気がします。 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の学習本について

    Webページ作成の勉強を始めました。今までは市販のソフト(ビルダー)でWebページを作成してきました。HTML、CSSの基礎的な勉強をするのにもっとも解りやすい本を教えてください。 条件として ●説明している文字が大きいこと ●カラーで重点を解りやすく説明していること ●例題などがたくさんあること ●付録にDVDの解説が付いていること ●価格は問題にしていません。(幾らでもいいです) ●出版社も解れば教えてください。 よくわかるマスター Webクリエイタ―上級(FOM出版) を購入しましたが問題と解答の文字が小さく読みにくいです 自分が読んでみて思ったより解りにくい本でした。 もっと実践的で解りやすく読みやすい本を教えてください。

    • ベストアンサー
    • CSS
  • HTML・CSSを忘れない用にするには?

    HTML・CSSを忘れない用にするには? 自分のHPを作成するために、HTML・CSSを本で学びましたが、HPを作っってしまったら更新作業をするだけなので、いまではほとんど覚えた事を忘れてしまいました。 そこで、HTML・CSSを忘れないようにしたいのですが、どのようにして忘れないようにしたら良いでしょうか? 無料のテンプレートを見て毎日HTML・CSSを打っていれば覚えておけるのでは?と思っていますが、皆様はどうようして忘れないようにしているのでしょうか? あと、沢山のHPのソースを見ると <div id="ok_header">  <div id="ps_header"> 上記のように前にスペースが空いていますが、HTMLの打つ位置はなにか決まり事があるのでしょうか? よろしくお願いします。

  • いきなりXHTML+ CSSで勉強しても大丈夫ですか?

    現在ドリームウィーバーを使用してHPを作成できるくらいなのですが、いまから本格的にHTMLを勉強しようと思っています。 ただ今現在主流になりつつあるXHTMLとCSSですが、いきなりそれの本を買って勉強したほうが効率がいいでしょうか? それともHTMLの本を本で勉強してから取り組むという形じゃないと難しいでしょうか? できればXHTML+CSSをいきなり勉強して覚えたいと思っているのですが、 アドバイスよろしくお願いいたします。

    • ベストアンサー
    • CSS
  • cssについて

    ホームページでcssにしたいページがあります。そこで判らない点がありまして皆さんの教えを乞いたいと思い質問した次第です。 1.cssを作成したページはcssのフォルダを作って、その中にcssのソース(HTML)を格納し、サーバーに転送するそうなんですが、これはページ全体のソースのことですか。cssの部分だけですか? 2.cssのページはバック(壁紙)が“白”と“緑”のページがありますが、この場合はcssのフォルダを別々に作るのですか? 3.cssフォルダによってページが一括管理出来て更新が簡単になるとのことですが、ページ全体をcssにした方が管理しやすいですか? 4.cssのソースはホームページを作ってるソフト以外のエディタにコピーしても宜しいですか? Dreamweaver3で作成してますが、以外とアバウトなソフトなので、細かい設定はソフトの機能に頼らず、ソフトのタグをいじっています。なんせ初心者です。判りやすく解説お願いします。

  • すでにあるHTMLとCSSをワードプレスに入れたい

    ワードプレスの固定ページを作りたいと思っています。 すでにHTMLとCSSで、作ったものがあるので、 それを差し込みたいのですが、 固定ページでは、HTMLだけ入力するということでいいのでしょうか? また、 cssはどこでどのようにして入力したらいいのでしょうか? 今までホームページ作成ソフトに頼ってきたので、 ワードプレスがわからなく困っています。 よろしくお願いいたします。

  • HTML、CSSに関して

    HTMLの初心者です。いくつかご質問させていただきます。 ①段落と段落の間に行間を空けたい場合、必ずCSSを使わなければなりませんか?行間を空けたい場合、HTMLの本文中で段落と段落の間に行間を空けて記述するのは間違っていますか?例えば以下のような例文です。 〈p〉ここでは私が旅先で撮影した写真を掲載しています。日本列島津々浦々、特に温泉巡り、行く先々の海の幸、山の幸には目がありません。〈/p〉 〈p〉それでは当サイトをお楽しみください。〈/p〉 このようなHTMLでもブラウザ表示は行間が空いて表示されると思うのですが。 ②CSSの書式として以下のような書式があります。 p{font-size: 1.3em;} このpというのは何ですか?CSSの書式を記述するときに使うものということで深く考える必要はありませんか?また字間についてですが、:と1.3emの間に半角スペースを必ず入れるということは知っていますが(手持ちのホームページ作成入門本にそう書いてあります)、pと{の間にスペースを入れる必要はありませんか? ③行間を調整するCSSを記述した以下のファイルを例文として記載します。上記の手持ちのホームページ作成入門本から抜粋しています。 〈html〉 〈head〉 〈title〉序文に変えて〈/title〉 〈style type="text/css"〉 p{line-height 150%;} 〈/style〉 〈/head〉 〈body〉 〈h1〉序文に変えて〈/h1〉 〈p〉ようこそ、このサイトではラーメンマニアの私が食べ歩いたラーメンを写真付きで紹介しています。 〈/body〉 〈/html〉 この150%という値ですとファイルをブラウザにドロップしたとき〈p〉タグの内容の行間が少し広くなります(と入門本に記載があります)。普通に本文の文字の大きさで1行分空けたい時はどうすればいいですか?つまり現在知恵袋で記載しているような1行分です。150%ではなく1emと記述すればいいですか?また、このCSS書式のp{line-height 150%;}ではline-heightと150%の間に質問②で記載したCSS書式のような:がありません。設定名と値の間は:で区切っても半角スペースでもどちらでもいいのですか? 宜しくお願いします。( `・∀・´)

  • HTMLとCSSの違いとは?

    ホームページ作成を最近はじめたのですが、HTMLとCSSの違いがよくわかりません。本などをみて見ると、ひとつのスタイルを作ってそれを全体に適応できるようなことが書いてあったのですがいまいちよくわかりません。 スタイルシートは別に作ったりするのでしょうか? そもそもどちらかがどちらかに含まれるのでしょうか? 初心者なのでまったくよくわからないのですが、初心者でもわかるような説明をいただけるとうれしいです。

    • ベストアンサー
    • HTML