「HTML、CSS、JavaScriptの違いがよくわからない…」
「Webサイトって実際はどうやって作ってるの？」
初心者の方で、HTML、CSS、JavaScriptの違いがわからない……という人は多いと思います。
- HTML、CSS、JavaScriptの違いを知りたい…
- それぞれの使い方を知りたい
- この3つの言語を習得する方法は？
そんな悩みを解決できる記事を用意しました。
目次
HTMLとCSS、JavaScriptの違いって？
HTML、CSS、JavaScript。この3つの言語は、Webサイトの制作には欠かせない言語です。
まずは、それぞれの言語の違いについて理解していきましょう。
HTML、CSS、JavaScriptには、明確な違いがあります。
それぞれの役割を見てみましょう。
- HTML → 動かせないもの、基盤
- CSS → 装飾できる、見た目を変える
- JavaScript → 動きを加える、変化を加える
この3つの違いを、実際のWebサイトを見ながら説明していきます。
まずは下記の動画をご覧ください。
上記の動画は、私が制作したWebサービスの一部です。このフォームの構成言語は、『 HTML、CSS、JavaScript 』です。
このように、「 HTML、CSS、JavaScript 」それぞれの言語には、明確な役割があります。
1つずつ、解説していきます。
HTMLとは
先ほどのフォームを、HTMLだけを利用して作った場合を見てみましょう。
このように、デザインが最初のものより、質素になっていることがわかると思います。
HTMLは、Webページ全体の構造を指示するための言語です。
CSSとは
CSSは、HTMLで記述されたWebページを装飾するための言語です。
実際に先ほどのフォームで、HTMLとCSSの違いを見てみましょう。
どうでしょう。見た目が違っているのがわかりますよね。
右側の方が、綺麗に整っていて見やすいと思います。
CSSは、HTMLで構成したWebサイトを綺麗に整える役割
このように、インターネット上に公開されているWebサイトは、HTMLとCSSを使って作られているものがほとんどです。
ちなみに、HTMLとCSSについて詳しく知りたいという方は、下記の記事を参考にしていただくと理解が深まるはずです。
JavaScriptとは
JavaScriptは、Webページを動的にすることができるプログラミング言語です。
Javascriptで具体的に何ができるのかと言うと、
- お問い合わせフォーム
- スライドショー
- アニメーション
- 固定ヘッダー
などなど、Webサイトでよく見かけるのは上記のような項目ですかね。
上記以外にもJavaScriptで行える動作は、まだまだたくさんあります。
JavaScriptの使用例
ちなみに、冒頭で紹介したフォームに使われているJavaScriptは、「ユーザーの選択によって、フォームの内容を変更する」という動作です。
上記の動画を見ると、ラジオボタンの選択によって、フォームの入力内容が変化しているのがわかると思います。
これは下記の処理を、JavaScriptで指示しています。
- ラジオボタン「プログラミング」が選択されたときには、Aの入力フォームを表示する。
- ラジオボタン「ブログ」が選択されたときには、Bの入力フォームを表示する。
JavaScriptを導入すると、Webサイトを動的にすることが可能になります。より、品質の高いWebサイト制作が可能になります。
だからこそ、JavaScriptは、必ず習得しておきたい言語ですね。
HTML／CSS／JavaScript：フロントエンド
『HTML／CSS／JavaScript』この3つの言語を使いこなせると、いわゆる「フロントエンド」としての作業が可能になります。
フロントエンドは、『HTML、CSS、JavaScrip』の言語を使用して、ユーザーが視覚的にWebサイトを閲覧できる状態にまで制作するのが仕事です。
もちろん、スマートフォン、PC、タブレットなどの、各サイズに合わせた調整も必要ですね。これらもフロントエンドの仕事です。
HTML、CSS、JavaScriptを習得する方法
『HTML、CSS、JavaScript』は、下記の順番で学習していきましょう。
- HTML
- CSS
- JavaScript
おすすめの学習手順
オススメはの学習サイトは、「Progate→ドットインストール」の順番です。
それぞれ学べるコンテンツを細かくご紹介しておきます。
上記の順番で一通り学べば、フロントエンドとしてのスキルは習得できるはずです。あとは、実際に自分でWebサイトを制作してみましょう。
学習サイトが終わったら、必ずアウトプットをしてください。アウトプットは、とても重要です。
- 新しい知識に気付ける
- 自分のスキルを把握できる
- しっかりとスキルアップできる
HTML、CSS、JavaScriptの学習を終えた次は、サイト模写がいいですね。
- HTMLとCSSを使って、既存サイトの模写をする
- 模写したサイトにJavaScriptで動きをつける
上記の手順でのアウトプットがオススメです。
確実にフロントエンドエンジニアになるには
とはいえ、独学は向き不向きがあります。確実にフロントエンドエンジニアを目指したいという人には、スクールもオススメです。
TechAcademy
最短4週間で未経験からプロを育てるオンライン完結のスクールです。
オンラインで受講できるので、どこかに通う必要なく、自宅でもプログラミングを学ぶことができます。
≫TechAcademy「フロントエンドコース」
HTML／CSS／JavaScriptとは：まとめ
この3つの言語を習得できれば、フロントエンドとしての活動が可能になります。
最後にもう一度おさらいしておきましょう。
HTML、CSS、JavaScriptの役割
- HTML→動かせないもの、基盤
- CSS→装飾できる、見た目を変える
- JavaScript→動きを加える、変化を加える
フロントエンドエンジニアとは
- 『HTML、CSS、JavaScrip』の言語を使用する
- ユーザーが視覚的にWebサイトを閲覧できる状態にまで制作する
- スマートフォン、PC、タブレットなどの、各サイズに合わせた調整も必要
HTML、CSS、JavaScriptの学習方法
もう一度、学習方法を確認したいという人は、下記を参照してください。
≫ HTML、CSS、JavaScriptの学習方法
