プログラミング

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

2020年6月18日

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

この記事の内容

  • HTML、CSS、JavaScriptの違いとは?
  • HTML、CSS、JavaScriptの役割とは?
  • HTML、CSS、JavaScriptの違いを実例でみたい

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

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

めちゃ簡単です。

HTML、CSS、JavaScriptの違い

疑問

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

この記事では

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

HTMLとは

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

 

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

 

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

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

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

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

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

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

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

CSSとは

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

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

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

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

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

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

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

JavaScriptとは

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

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

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


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

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

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

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

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

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

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

 

まとめ

まとめ

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

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

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

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

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

にぃやん
それでは!!よき、エンジンニアライフを!

広告




  • この記事を書いた人
つちだ

つちだ ろい

現役のエンジニアです。日々Web制作に勤しみつつ、ブログ更新していきます。ポートフォリオ兼仕事依頼ページも同時に作成中ですのでご期待ください。/東京在住/30歳/フロントエンド/スノボ/バイク/オムライス

-プログラミング