2020/12/07

HTMLとCSS、JavaScriptの基本【現役エンジニアが解説】

今回は、HTMLとCSS、JavaScriptの基本について、それぞれに分け、簡単に解説していきます。

HTML

HTMLはhtmlタグを最上階層とするマークアップ言語です。

HTMLはCSSやJavaScriptを包括することができ、Webページを豊かに表現できます。

<html>
    <head></head>
    <body></body>
</html>

上記のコードのように、htmlタグの下にheadタグとbodyタグがあり、コンテンツはbodyタグ内に書きます。

CSSは主にHTMLのheadタグ内に書くスタイルシート言語です。

headタグ内にstyleタグを書き、その中でHTMLの各要素(タグ)の装飾をしていきます。

<style>
    body{margin:0;background-color:#f5f5f5;}
    #container{width:80%;margin:0 auto;}
    .form-control{width:100%;font-size:1rem;}
</style>

上記のコードのように、CSSではタグ名やid名(#id名)、クラス名(.クラス名)ごとに装飾の設定をしていきます。

JavaScriptはheatタグ内やbodyタグ内に書くスクリプト言語です。

JavaScriptによって、Webページに動きを付けることができ、様々な機能を作ることができます。

<script>
    function onSendButtonClick(){
        alert("送信ボタンがクリックされました。");
    }
</script>

上記のコードでは、送信ボタンがクリックされた際にダイアログを表示するために呼び出せる関数を定義しています。