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

基礎

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

記事のテーマ
●HTML、CSS、JavaScriptの違いとは?
●HTML、CSS、JavaScriptの役割とは?
●HTML、CSS、JavaScriptの違いを実例でみたい

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

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

めちゃ簡単です。

HTML、CSS、JavaScriptの違い

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

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

HTMLとは

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

See the Pen MWKJYyB by そろり兄やん (@sororiniyan) on CodePen.

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

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

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

正式名称は
Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)

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

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

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

CSSとは

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

See the Pen dyGNPMP by そろり兄やん (@sororiniyan) on CodePen.

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

正式名称は
Cascading Style Sheets(カスケーディング・スタイル・シート)

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

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

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

JavaScriptとは

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

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

See the Pen MWKbzWJ by そろり兄やん (@sororiniyan) on CodePen.

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

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

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

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

●スライドショー
●問合せフォーム
●ポップアップウィンドウ
●カルーセル

上記はできることの一部です。
使い方次第で、いろいろできるので楽しいです。

まとめ

まとめ(本の絵)

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

まずは「HTML」と「CSS」から勉強してから
その後に「JavaScript」の勉強でいいと思います。

JavaScriptは独学している段階で全てを把握するのは難しいので
仕事しながら学ぶ流れでも十分やっていけます。

〈そろり兄やん〉
それでは!!
よい、エンジンニアライフを!

コメントを残す

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

CAPTCHA