HTMLとCSSとJavaSciptの役割の違い

プログラミングを学びたいから手始めにHTMLから勉強するでござる・・・。あれ?本を買うとHTML・CSS・JavaScriptの三つが一冊にまとめられてるでござる・・・

拙者、HTMLでWEBページを作りたいのにCSSとは何であろうか?

CSSは(Cascading Style Sheets)で、HTMLを装飾するものです。JavaScriptはWEBページを動的に動かしたりする時に使うプログラムです。

むむ?ていうことは、WEBブラウザで図形がぬるぬる動く、おしゃれなサイトを作ろうとしたら・・・

恐らく三つの要素(HTML,CSS、JavaScript)は必要です。

えぇ・・・そんな沢山学ぶ必要があるでござるか?

必要なところだけ学べばOKですよ!今回は、3つのプログラミング言語がどのような役割を担っているのか説明しますね。

HTMLとは?

HTMLはHyperTextMarkupLangegeの略称で、WEBサイトの基礎となる部分です。

うむ。WEBサイトを作るにはまず「HTML」って聞いてたでござる。

サンプルとして、私が適当に作ったWEBサイトを見てみましょう。

ブラウザで表示されているものと、それをHTMLで書かれているものを比較している画像
私がサンプルで作っているサイトで、表示されている情報は適当なもので記載されているカフェは存在しません。

英語がいっぱいでござる・・・

プログラミングは、英語が基本ですからね。書いていれば慣れてきますよ。

さて、HTMLについてですが、HTMLはWEBサイトの構造や情報を載せる基礎的な部分です。

しかし、HTMLは見た目についてはCSSにお願いして、動的なコンテンツはJavaScript(他の言語の場合もあります)に任せてるんですね。なので、CSSの設定を無くすと、以下のように見栄えの悪いWEBサイトになります。

WEBサイトからCSSの設定を抜いた時の変化

うわ、これじゃあ何が何だかでござる。

HTMLで情報を書くことは出来るのですが、見栄えを整えないと人は見てくれません。なので見栄えの部分はCSSに任せているんです。

CSSとは?

じゃあ、CSSはどんな物でござるか?

実際に見てみましょう。さっきのWEBサイトのCSSです。

WEBサイトのCSSコードのサンプル画像

同じように英語が沢山でござるな。

CSSはHTMLを装飾するために使うものです。なので、非常に簡単なものでは以下のようなものがあります。

HTMLのボタンタグに、CSSを適用させている図

ふむふむ。これをHTML全体に装飾を加えていくと綺麗なサイトになるでござるね。

ざくっと言うと、そんな感じです。

よし!じゃあ、サイト完成でござるね!

シンプルなWEBサイトの場合、これで終了するときもあります。一方で、もっとリッチなサイトにするには次の話を知っておかなければなりません。

JavaScriptとは?

リッチなサイト?多機能なWEBサイトってことでいいでござるか?

はい。WEBサイトの図形を動かしたり、データの入力を制御したりするには、HTMLとCSSだけでは難しかったりします。(一部CSSで動かせることも出来ますが、制約が多いです)

なので、そんな時はJavaScriptというプログラムを使うことがあります。

HTMLとCSSだけでは表現できないものを、JavaScriptで作りこむでござるね!

はい。実はJavaScript以外にも色んなプログラミング言語(もしくはフレームワーク、プラグイン等)があります。実装したい機能に応じて色んなプログラミング言語を使い分けることになります。

(以下の動画は小さな丸が、サイズを変えながらマウスに追従するようにJavaScriptで作ってます。)

何から勉強すると良い?

結局、WEBサイトを作りたいでござるが、何から始めればいいでござるか?

とりあえずはHTMLとCSSを学びながら作ってみましょう。

そして作っていく過程で「ここの装飾を動かしたい」だとか「データをサーバで保存させたい」など思いつくところが出てくると思います。

そうなってきたらJavaScriptを中心に他のプログラミング言語を触っていくという流れでいいと思います。

よーし!じゃあまずはHTMLとCSSを書きまくってやるでござるよ!

ちなみに、どのようなサイトを作るんですか?

拙者がいかにカッコよい侍なのか、全世界に知らせるためのサイトでござる!!

が、がんばってください・・・

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA