【Web】HTML・CSS・JavaScriptって何？Webページの仕組みを解説

こんにちは、ISAパソコンスクール銀座校です。

10月に入り、ようやく雨も落ち着いて、少しずつ秋らしい日が増えてきましたね。 先日の台風も大きな影響がなく、ほっとされた方も多いのではないでしょうか。 朝晩は少しずつ涼しくなってきましたので、体調に気を付けてお過ごしください。

さて、今回は「Webページはどのように作られているの？」という疑問についてご紹介します。

普段何気なく見ているWebサイトですが、文字や画像が表示されていたり、 ボタンをクリックすると画面が変わったり、さまざまな仕組みが使われています。

実はWebページを作るうえで、特に重要なのが HTML・CSS・JavaScriptの3つです。

それぞれどのような役割を持っているのか、簡単に見ていきましょう！

Webページは何でできているの？

HTMLとは？

まずはHTMLです。

HTMLは、Webページの文章や画像などの内容を記述するための言語です。 Webページの「骨組み」を作る役割があります。

実際にHTMLを書いてみると……

<h1>ISAパソコンスクール</h1>
<p>パソコンスキルを学べるスクールです。</p>

このように記述すると、Webブラウザでは見出しと文章として表示されます。

つまり、HTMLは「Webページに何を表示するのか」を決める役割を持っています。

CSSとは？

次にCSSです。

CSSは、HTMLで作ったWebページの色や文字サイズ、配置、余白などのデザインを設定するための言語です。

例えば、HTMLで作った見出しに色を付けたり、文字を大きくしたり、背景に色を付けたりできます。

h1 {
    color: #38a8d2;
    font-size: 32px;
}

このようにCSSを使うことで、Webページの見た目を自由に整えることができます。

JavaScriptとは？

そして3つ目がJavaScript（ジャバスクリプト）です。

JavaScriptは、Webページに動きやさまざまな機能を追加するためのプログラミング言語です。

例えば、ボタンをクリックしたときにメッセージを表示したり、 入力内容によって表示を変えたりすることができます。

function sayHello() {
    alert("こんにちは！");
}

このようなJavaScriptを使うことで、Webページをただ表示するだけではなく、 ユーザーの操作に反応するページを作ることができます。

HTML・CSS・JavaScriptの関係

ここまでの内容をまとめると、それぞれの役割は次のようになります。

例えば「お問い合わせボタン」を作る場合、

HTMLでボタンを作り、
CSSで色や大きさを整え、
JavaScriptでクリックしたときの動作を設定する、

というように、それぞれの技術を組み合わせてWebページを作っていきます。

Web制作を学ぶなら、まずは基本から！

Web制作というと「難しそう……」と思う方もいるかもしれません。

しかし、まずはHTML・CSS・JavaScriptがそれぞれ何をしているのかを理解すると、 Webページの仕組みが少しずつ見えてきます。

「自分でWebページを作ってみたい！」という方は、 まずHTMLやCSSの基本から学んでみるのがおすすめです。