HTML、CSS、JavaScriptの違いは何ですか？

HTML、CSS、JavaScriptの違いについて学びましょう。

Web開発、特にフロントエンド開発について学び始めると、HTML、CSS、およびJavaScriptは、スキルスタックの3つの最も基本的な要素であると主に見なされます。

HTML、CSS、JavaScriptはすべて同じウェブ開発エコシステムの一部であり、最新のウェブの可能性を最大化するために連携する必要があります。

しかし...HTML、CSS、JavaScriptの違いは何ですか？

• HTML ハイパーテキストマークアップ言語の略です。
• CSS カスケードスタイルシートの略です
• JavaScript の略です...よくJavaScript（ショートカット JS ）

HTML

HTMLは、コンテンツを記述し、Webサイトの基本的な大まかな構造をレイアウトするために使用するマークアップ言語です。

アナロジー： HTMLは、家のフレームとコンテンツです。つまり、椅子、テーブル、ドア、階段、家を構成するものの必要不可欠なものなど、それ以上のものはありません。

HTML開発者の仕事は、Webサイトのコンテンツを正しく記述して、Webサイトの最低限の要件を提供することです。これにより、設計者は、ボタンと段落が何であるかを知ることができます。

例：

<!-- Describe content -->

<p>This text is described correctly by wrapping it between opening and closing paragraph tags.</p>

<button>I’m a button</button>

CSS

CSSは、色、タイポグラフィ、間隔、境界線などの観点からWebサイトのコンテンツを形作り、スタイルを設定するために使用するスタイリング言語です。

アナロジー： CSSは、視覚的に魅力的で住みやすい家のペイントと丸みを帯びたエッジです。技術的には、椅子の定義はあなたが座るものですが、形状、サイズ、パディング（デザイン）などが座り心地の良い（または不快な）椅子。

CSS開発者の仕事は、さまざまなデバイスで表示したときに、色、タイポグラフィ、間隔、形状、および全体的なレイアウトに関して、所有者が望む適切な視覚スタイルをWebサイトに持たせることです。

例：

/* Style text element */
p {
	font-family: "Helvetica";
	font-size: 20px;
	line-height: 1.5;
}

/* Style button */
button {
	font-size: 16px;
	font-weight: bold;
	padding: 16px 32px;
	border-radius: 8px;
	color: white;
	background-color: green;
}

JavaScript

JavaScriptは動的プログラミング言語であり、Webサイトをインタラクティブでリアクティブにすることができます。

アナロジー： JavaScriptは、現代の家を現代の家にし、入浴、食事の調理、そして冬の間に凍死しないことを可能にする電気と水の供給です。 JavaScript開発者は、スイッチを入れるとライトがオンになり、水道の蛇口を回すと温水/冷水が出るようにします。

JavaScript開発者の仕事は、「メニュー」というボタンをクリックすると、キャンバス外のメニューがスライドしてすぐに使用できるようにすることです。 JavaScripは、Webサイトの要素がユーザー入力に応答するようにするものです。

例：

// Make button interactive 

const button = document.querySelector("button")

button.addEventListener("click", showModal)

function showModal() {
	alert("You clicked on the button!")
}