Web制作で使う言語は大きく3つに分かれています。それぞれの役割を最初に正しく理解しておくことで、その後の学習がスムーズになります。
Web制作に必要な3つの言語
HTML（骨格）
HTML（HyperText Markup Language）はWebページを作るためのマークアップ言語です。プログラミング言語と混同されがちですが、HTMLは「計算」をするのではなく、「ここに文章がある」「ここが見出しだ」「ここに画像がある」というように、情報の役割（構造）を指定するためのものです。
Webサイトにおいて、HTMLは「設計図（骨格）」の役割を担います。現在の標準は HTML5 です。
HTML5では大きく2つのポイントが進化しました。
- 「意味」がより明確になった（セマンティック）：以前は汎用的な箱（
<div>）を並べるだけでしたが、HTML5では「ここはヘッダー（<header>）」「ここは記事本文（<article>）」といった場所の意味を表す専用タグが増えました。AIや検索エンジン、読み上げソフトがサイトの内容をより正確に理解できるようになります。 - 「アプリ」のような動きが可能に：外部プラグインなしで動画（
<video>）・音声（<audio>）を直接再生したり、位置情報を取得したりできるようになりました。
CSS（見た目）
CSS（Cascading Style Sheets）はHTMLで作った骨組みに対して「どんな見た目にするか」を指示するための言語です。色を変えたり、配置を整えたり、アニメーションを加えたりして、実際に見えるWebサイトの形を完成させます。CSS3以降の進化でさまざまな表現が可能になっています。
JavaScript / jQuery（動き）
JavaScriptは「動きや連動」を指示するためのプログラミング言語です。「もし〜されたら、こう動かして！」という具体的な命令を出す役割を担います。jQuery（ジェイクエリ）はJavaScriptをより簡単・便利に書けるようにしたライブラリです。
HTML・CSS・JavaScript（jQuery）の3つは、Web制作に欠かせない言語です。
| 言語 | 役割 | 例え |
|---|---|---|
| HTML | 構造・骨格を作る | 家の設計図・骨組み |
| CSS | 見た目・デザインを整える | 内装・塗装・インテリア |
| JavaScript | 動きや連動を加える | 電気・水道・自動ドア |
テキストエディタの準備
HTMLを書くとき、Wordやテキストエディットなどのリッチテキストエディタは使いません。コードをそのまま入力できるシンプルなテキストエディタや専用の開発エディタを使います。
まずは macOS用の汎用テキストエディタ 「mi」 を使います。
（実際は、「VS Code」などの専用エディタを最初から使用してもOK。）
- ダウンロード：https://www.mimikaki.net/
インストール後「mi」アプリケーションを開き、ツールバーで以下のように設定します。
- 文字コード：UTF-8
- 改行コード：LF
- モード：HTML5
文字コード・改行コードについて
HTMLの文字コードはUTF-8が推奨です（他にShift_JIS・EUC-JPなどがあります）。改行コードはWindowsでは「CR+LF」、Macでは「LF」が一般的ですが、基本的には「LF」で問題ありません。
はじめての HTML ファイル「Hello World」を作成しよう
設定が済んだらエディタに以下のコードを入力します。インデント（字下げ）はTabキーで作成します。全角スペースは使わないよう注意してください（ブラウザ表示時に隙間として表示されてしまいます）。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>こんにちは</p>
</body>
</html>入力できたらファイル名を 「index.html」 として保存します。保存した「index.html」をブラウザにドラッグ＆ドロップして開き、画面に「Hello World」と「こんにちは」が表示されれば成功です。
各タグの意味
<!DOCTYPE html>：このファイルがHTML5であることをブラウザに宣言します。<html lang="ja">：HTMLドキュメントの最外枠。lang="ja"で日本語ページであることを示します。<head>：ブラウザへの指示・設定を書く領域。ユーザーの画面には表示されません。<meta charset="UTF-8">：文字コードをUTF-8に指定します（文字化け防止）。<title>：ブラウザのタブに表示されるページタイトルです。<body>：ユーザーに見えるコンテンツを書く領域です。<h1>：最も重要な見出しタグです。<p>：段落タグ。ひとまとまりの文章を定義します。
まとめ
Web制作はHTML（骨格）・CSS（見た目）・JavaScript（動き）の3言語が連携して成り立っています。まずHTMLで構造を作り、CSSで見た目を整え、JavaScriptで動きを加えるという順番を意識して学習を進めましょう。「Hello World」の作成が完了したら、次はHTMLの基本タグについて詳しく学んでいきます。
