HTML、CSS、JavaScriptの違いとは【基本解説】

今回はこんなお題に回答したいと思います。

全っくの初心者でこれからWebエンジニアの勉強をすると
HTML、CSS、JavaScriptの違いがどういうモノか知りたいと思います。

僕の周りでもWebエンジニアやコーダーに興味ある人が多くいます。
なので、ここで初心者の方に向けて違いを実例を元に解説します。

めちゃ簡単です。

HTML、CSS、JavaScriptの違い

やっぱり、最初勉強するにあたり、
違いってきになりますよね。

この記事では

無駄を省き、簡単な実例を元に紹介・解説していきます。

HTMLとは

まずは、HTMLだけを実装するとこうなります。

See the Pen
bGBvbyY by えんにぃ (@enjiniyan)
on CodePen.

デザインが全くないのが分かりますね！

最近ではプログラミン的な位置付けみたいに感じるかもしれないですが、
HTMLは実はプログラミングではないです。

マークアップ言語と言います。

頭文字をとって、「HTML」となります。

コンピュターに認識させるための言語です。

土台といえば分かりやすいと思います。

CSSとは

先ほどのHTMLのものにCSSを追加してみるとこうなります。

See the Pen
rNWdBgR by えんにぃ (@enjiniyan)
on CodePen.

一気に良くみるデザインになったと思います。

頭文字をとって、「CSS」となります。

画面をみる人のための言語なので、
実際、コンピュターには意味のないモノです。

見る人のために
文字の大きさや色などデザインに関することを整えてくれるのが「CSS」です。

JavaScriptとは

先ほどの「HTML」、「CSS」のものにJavaScriptを追加してみます。

ボタンをクリックすることに色が変わるようにしています。

See the Pen
mdOxbZR by えんにぃ (@enjiniyan)
on CodePen.

このように、サイトに「動き」を与えることができるのが
JavaScript（ジャバスクリプト）です。

今回の例では
「jQuery」というライブラリを使っています。

説明すると
JavaScriptをより簡単に記述できるモノです。

使いこなせると下記のようなことができるようになり、
よりリッチなサイト作成ができます。

上記はできることの一部です。

使い方次第で、いろいろできるので楽しいです。

まとめ

今回は「HTML、CSS、JavaScriptの違い」にフォーカスし書きました。

まずは「HTML」と「CSS」から勉強してから

その後に「JavaScript」の勉強でいいと思います。

JavaScriptは独学している段階で全てを把握するのは難しいので

仕事しながら学ぶ流れでも十分やっていけます。

にぃやん

それでは！！よき、エンジンニアライフを！