Web開発言語の基礎の基礎 – HTML、CSS、JavaScriptの違いを徹底解説-

2025 3/21

2025年3月21日 2025年3月21日

Webサイトを作成するためには欠かせない3つの言語があります。それが HTML、CSS、JavaScript です。これらはそれぞれ役割が異なり、組み合わせることで初めて魅力的で機能的なWebページが完成します。本記事では、初心者の方向けにこの3つの言語の違いと役割を歴史的背景も交えながら詳しく解説します。基本的な書き方や具体的なコード例、さらに近年話題のライブラリ（jQueryやReact）についても簡単に紹介します。また、Webブラウザに標準搭載されている開発者ツール（検証ツール）の使い方も説明します。HTML・CSS・JavaScriptの基礎を押さえて、あなたもWeb開発の第一歩を踏み出しましょう。

Web開発におけるHTML、CSS、JavaScriptの役割

まずは、Webページ制作におけるHTML、CSS、JavaScriptそれぞれの役割について見てみましょう。Webページは例えるなら建物のようなものです。HTMLが建物の骨組み（構造）にあたり、CSSが内装や外観（デザイン）を飾る塗装にあたり、JavaScriptが電気や機械設備（インタラクティブな動き）に相当します。それぞれが得意分野を持ち、三位一体となって動作することで、私たちが普段目にするWebサイトが動いているのです。

HTMLとは？（基本概念と役割）

HTML（エイチティーエムエル）とは HyperText Markup Language の略で、Webページの骨組みとなるマークアップ言語です。文章の見出しや段落、リンク、画像、表など、ページの内容や構造を記述するために使われます。HTMLではタグと呼ばれる決められたキーワードを山かっこ（< >）で囲んで要素を表現します。例えば <h1> は大見出し、<p> は段落、<a> はハイパーリンクを示すタグです。ブラウザはHTMLファイルを読み込み、タグに沿って画面上にテキストや画像を配置します。

HTMLはWebページの内容そのものを記述する言語です。例えばニュース記事のWebページなら、見出しや本文、著者名、投稿日などの情報をHTMLでマークアップ（構造化）します。こうすることで、ブラウザや検索エンジンが内容を正しく理解し、表示や解析ができるようになります。HTMLはWebサイトの土台であり、これが無ければページに表示するテキストすら存在しません。

CSSとは？（デザインの重要性）

CSS（シーエスエス）とは Cascading Style Sheets の略で、Webページの見た目（スタイル）を指定するための言語です。文字色や背景色、フォントサイズやレイアウト（配置）など、デザインに関するあらゆる設定をCSSで行います。先ほどの建物の例えで言えば、CSSは壁の色を塗ったり家具を配置したりする内装工事にあたります。

CSSを使うことで、HTMLで作った骨組みにデザインの要素を追加できます。例えば、同じHTMLでもCSS次第で「文字を赤色にする」「背景に画像を敷く」「要素を横並びに配置する」といった見た目上の変化を自由に与えられます。CSSはHTMLと違って単体では使わず、必ずHTMLに対して適用します。HTMLファイル内に <style> タグで直接CSSを書き込む方法や、.css ファイルを用意して <link> タグで読み込む方法などがあります。CSSが重要な理由は、デザインと内容を分離できる点です。デザイナーはCSSを調整することで見た目を改善でき、HTML（内容部分）を触らなくてもサイトの外観を大きく変えることができます。

JavaScriptとは？（インタラクティブな要素の追加）

JavaScript（ジャバスクリプト）とは、Webページに動的な動きや対話性を加えるためのプログラミング言語です。HTMLとCSSが静的なページ（ただ表示されるだけのページ）を作るのに対し、JavaScriptを組み込むことでユーザーの操作に応じて内容を変えたり、アニメーションさせたり、サーバーと通信して新しいデータを表示したりできます。

例えば、ボタンをクリックしたらメニューがスライド表示される動きや、定期的に最新のニュースを読み込んで表示を更新する、といった機能はJavaScriptで実現できます。ブラウザはページ読み込み時にJavaScriptのコードも実行し、HTMLやCSSを自由に操作することができます（これを DOM を操作すると言います。DOMについては後ほど説明します）。JavaScript自体は通常、HTML内に <script> タグで記述するか外部ファイルとして読み込ませます。JavaScriptが無いWebページは静止画のようなもので、ユーザーとの対話ができません。逆にJavaScriptを用いることで、ボタンを押す・フォームに入力する・ページをスクロールするといったユーザーアクションに反応するリッチなWeb体験を提供できるのです。

💡 補足: JavaScriptという名前からJavaという言語の仲間と思われがちですが、全くの別物です。JavaScriptは主にブラウザ上で動くスクリプト言語であり、Javaは主にアプリケーション開発に使われるオブジェクト指向言語です。名前は似ていますが混同しないようにしましょう。

HTML、CSS、JavaScriptの歴史と発展

続いて、それぞれの技術がどのように発展してきたか、その歴史を簡単に振り返ります。歴史を知ることで、現在主流となっている技術や流行の背景が見えてきます。Webの世界は進化が早く、HTML・CSS・JavaScriptも登場以来アップデートを重ねてきました。それぞれの進化の節目を押さえておきましょう。

HTMLの進化（HTML4からHTML5へ）

HTMLは1990年代に誕生し、初期のバージョンから機能追加を繰り返してきました。長らく標準だったHTML4.01（1999年制定）は静的な文章構造を記述するもので、レイアウトや見た目の装飾は含まれていませんでした。当時はデザインを実現するために、無理やりHTMLでレイアウト用のテーブルを作ったり、Flashプラグインに頼ってリッチコンテンツを表示したりしていました。

2000年代後半から2010年代にかけて登場したHTML5は、Webの可能性を大きく広げました。HTML5では新たに**** やタグが導入され、プラグインなしで動画や音声を再生できるようになりました。またタグによってブラウザ上で動的なグラフィックス描画が可能になり、ゲームやアニメーションも実現しやすくなりました。さらに , , , などのセマンティックタグ（意味を持つタグ）が追加され、HTML文書の構造や意味合いが機械にも伝わりやすくなりました。現在ではHTML5が事実上の標準となっており、新しい機能追加や拡張も継続的に行われています。HTMLは単なるテキスト表示の枠を超え、リッチなコンテンツの器へと進化を遂げたのです。

CSSの進化（CSS1からCSS3へ）

CSSもまた1990年代半ばに誕生しました。最初の仕様であるCSS1（1996年）はフォントの色やサイズを指定したり、簡単な余白調整ができる程度のものでした。その後、CSS2（1998年）で位置指定（absoluteやrelativeレイアウト）やメディアタイプ別のスタイル指定など機能拡張されました。しかし当初のCSSはブラウザ間で実装の差異が大きく、意図したデザインをすべてのブラウザで再現するのが難しい時代もありました。

CSS3という言葉は2000年代後半以降よく使われますが、CSS3は単一の仕様ではなく、複数のモジュールに分割されて段階的に拡張された新機能群の総称です。例えば角丸（border-radius）やドロップシャドウ（box-shadow）、グラデーション背景、アニメーションやトランジション機能などはCSS3世代で追加された代表的な機能です。またレイアウト面でも飛躍的な進化があり、従来はfloatで無理に実現していたデザインを、FlexboxやCSS Gridレイアウトといった新仕様で簡潔に表現できるようになりました。これらにより、CSSはよりリッチで複雑なデザインをシンプルな記述で実現できるようになりました。現在もCSSは進化を続けており、変数や計算関数、さらには将来のCSS4に向けた議論も進んでいます。

JavaScriptの発展（jQueryからReactへ）

JavaScript自体は1995年に誕生し（当初はブラウザ上で動く簡易スクリプトとして生まれました）、1997年に標準仕様（ECMAScript）として制定されました。初期のJavaScriptは機能も限られ、主にポップアップを表示したり簡単なフォームチェックを行う程度でした。しかしWebの高度化に伴い、JavaScriptも大きく進化しています。

2000年代中頃にはjQueryという画期的なライブラリが登場しました（jQuery初版リリースは2006年）。jQueryは「少ないコードで簡単にDOM操作やアニメーションができる」ことを売りに急速に普及しました。従来、JavaScriptでHTML要素を操作するには煩雑なコードが必要でしたが、jQueryを使うと $() というシンプルな構文で要素を選択し、メソッドをチェーンさせて直感的に操作できます。例えば数行のコードでフェードイン・フェードアウトのアニメーションを付けたり、Ajax（非同期通信）でサーバーからデータを取得するといった高度な処理が容易になり、**「とりあえずjQueryを読み込んで開発する」**というのが当時の定番でした。

さらに2010年代に入ると、Webアプリケーションはより大規模・複雑化し、フロントエンド開発の手法も変化してきます。その中心にあるのがReactをはじめとするコンポーネントベースのフレームワーク（ライブラリ）です。Reactは2013年にFacebook社（現Meta）によって公開されたJavaScriptライブラリで、UI（ユーザインタフェース）をコンポーネントという独立した部品の集まりとして構築するアプローチを広めました。React以前にもAngularJSなどのフレームワークが存在しましたが、Reactは仮想DOM（Virtual DOM）による効率的な描画更新や、宣言的なUI記述（JSXという独自記法でHTMLに似た構文をJavaScript内に書く）によって開発者体験を大きく向上させました。現在ではReactの他にもVueやAngularといった主要フレームワークが台頭し、**シングルページアプリケーション（SPA）**と呼ばれる高度にインタラクティブなWebアプリが一般的になっています。

このように、JavaScript界隈ではjQueryからReactへの流れが一つの大きな潮流でした。jQueryは今でも利用されていますが、新規開発ではReactなどモダンなフレームワークが選択されることが多くなっています。JavaScriptそのものもES6（2015年のECMAScript2015）以降、let/constによる変数宣言やアロー関数、Promise/async-awaitといったモダンな文法が追加され、言語として格段に表現力が増しています。JavaScriptは静的なページを動的に変えるツールから、大規模アプリケーションを支えるための本格的な言語へと発展したと言えるでしょう。

基本的なHTMLの書き方と実践例

では実際に、HTMLをどのように記述するのか基本を押さえましょう。Webページの土台となるHTMLの書き方を理解することは、Web開発の第一歩です。ここではHTML文書の基本構造と、代表的な要素の具体例について紹介します。実際のコード例を示しますので、手を動かして試してみることをおすすめします。

HTMLの基本構造

HTMLファイルは決められた基本構造に従って記述します。最低限必要な構文は DOCTYPE宣言 と html要素, head要素, body要素 です。DOCTYPE宣言はHTMLのバージョンをブラウザに伝える役割があり、現在は <!DOCTYPE html> と記述すればHTML5であると宣言できます。<html> 要素で文書全体を囲み、その中に <head> と <body> を配置します。head要素内にはページのメタ情報（文字エンコーディングやタイトル、外部CSSやスクリプトの読み込み、SEO関連のタグなど）が含まれ、body要素内に実際にブラウザに表示されるコンテンツ（本文）が入ります。

以下に基本的なHTML文書の構造を示します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">             <!-- 文字エンコーディングの指定 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- レスポンシブ対応 -->
  <title>はじめてのページ</title>    <!-- ページのタイトル（タブや検索結果に表示） -->
</head>
<body>
  <!-- ここにページの内容となるHTMLを記述 -->
  <h1>こんにちは、世界！</h1>
  <p>このページはHTMLの基本構造を示すサンプルです。</p>
</body>
</html>

上記の例では、日本語のページなので <html lang="ja"> と言語属性を指定し、文字コードをUTF-8に設定しています（文字化け防止のため通常指定します）。<title>タグの中身はブラウザのタブに表示されるタイトルになります。<body>内に簡単な見出しと段落を入れてあります。

このようにHTMLは比較的シンプルな構造ですが、開始タグ<tag>と終了タグ</tag>で要素を囲むルールや、入れ子の構造の考え方など最初は慣れが必要です。エディタで実際に打ち込み、.htmlファイルとして保存してブラウザで開いてみると良いでしょう。自分で書いたHTMLがブラウザ上でどのように表示されるか確かめることで、タグの意味が体感的に理解できます。

見出し・段落・リンクの記述例

HTMLで文章コンテンツを記述する上で、基本となる要素をいくつか見てみましょう。代表的なものに見出し要素、段落要素、リンク要素があります。

見出し要素: <h1>〜<h6>まで6段階の見出しタグがあります。<h1>が一番大きな見出し（タイトル級）、<h2>がその下のサブタイトル、と順に小さくなっていきます。見出しは章立てや項目のタイトルを示す際に使います。
段落要素: <p> で段落（パラグラフ）を表します。文章のひとかたまりを示すのに使い、ブラウザでは通常、段落ごとに適度な余白が自動で入ります。
リンク要素: <a> （アンカータグ）で他のページや同じページ内の別の場所へのリンクを作ります。href 属性に移動先のURL（またはID）を指定します。リンクテキストをタグで囲むことで、クリック可能なハイパーリンクになります。

これらを使ったHTMLの記述例を示します。

<h1>サイトの主タイトル</h1>
<p>この段落はサイトの紹介文です。HTMLを使うとこのように文章をマークアップできます。</p>

<h2>関連リンク</h2>
<p>詳しくは <a href="https://developer.mozilla.org/ja/">MDN Web Docs</a> を参照してください。</p>

上記の例では、<h1>でページの主題となるタイトルを表示し、その下に<p>で紹介文の段落を書いています。そして<h2>で小見出し「関連リンク」を付け、続く段落で <a> を用いて他サイト（MDN Web DocsというWeb開発のドキュメントサイト）へのハイパーリンクを設置しています。ブラウザで表示すると、<a>で囲まれた「MDN Web Docs」の部分が青色かつ下線付き（デフォルトスタイル）で表示され、クリックすると指定したURLに飛ぶようになります。

他にもテキストを強調する <strong> や <em>、改行の <br>、箇条書きリストの <ul>（中に<li>で項目）など様々な要素がありますが、まずは見出し・段落・リンクが押さえられれば十分です。HTMLは文書の論理構造をマークアップするものだと意識し、適切なタグを使い分けましょう。

フォームやボタンの作成方法

次に、ユーザーからの入力を受け付けるフォームやクリック可能なボタンの作り方を見てみます。フォーム要素を使うと、テキストボックスやチェックボックス、ラジオボタンなどを配置できます。

HTMLでは <form> 要素でフォーム全体を囲み、その内部に <input> や <textarea>、<select> といった入力用要素を配置します。<input> タグは汎用の入力フィールドで、type 属性の値によって様々な入力欄になります（textで一行テキスト、emailでメール形式、checkboxでチェックボックスなど）。ボタンは <button> 要素か、<input type="button"> あるいは type="submit" を指定して作ります。<button>要素は中に表示するテキストや他のHTMLを入れられるため柔軟です。

簡単なフォームとボタンの例を示します。

<h2>お問い合わせフォーム</h2>
<form action="/send" method="post">
  <p>
    お名前: 
    <input type="text" name="username" placeholder="お名前を入力">
  </p>
  <p>
    メール: 
    <input type="email" name="email" placeholder="メールアドレスを入力">
  </p>
  <p>
    お問い合わせ内容:
    <textarea name="message" rows="4" cols="40"></textarea>
  </p>
  <button type="submit">送信</button>
</form>

このコードでは、<form>タグのaction属性で送信先URLを、「method属性でHTTPメソッド（ここではPOST）を指定しています。フォームの中にテキスト入力欄やメール入力欄、複数行テキスト入力のを配置し、それぞれにname属性を付けています。最後に`で送信ボタンを配置しています。

ブラウザでこのフォームを表示すると、ユーザーは名前やメールアドレスを入力し、送信ボタンを押すことができます。送信するとactionで指定されたサーバー側にデータが送られます（今回は具体的なサーバー処理はありませんが）。実際のWebアプリケーションでは、この送信先でデータを受け取り処理するプログラムを書く必要があります。また、JavaScriptを使えば送信ボタンが押されたときにページ遷移せず非同期でデータを送ったり、入力内容の簡単な検証を行ってユーザーにフィードバックしたりすることも可能です。

HTMLだけでもフォーム自体は作成できますが、送信後の処理や動的なフィードバックはできません。そういった部分は後述するJavaScriptの出番となります。まずは上記のようなフォーム構造をHTMLで作れるようになっておきましょう。

CSSの基本とレイアウトの考え方

次に、HTMLで作った骨組みにデザインを施す CSS の基本と、レイアウト手法について解説します。CSSを使うことで、文字の色や大きさを変えたり、要素を横並びやグリッド状に配置したり、アニメーションを付けたりと様々な視覚効果を与えられます。ここではCSSの文法の基本、レイアウトの手法（FlexboxとGrid）、そして色やフォント、簡単なアニメーションの指定方法を紹介します。

CSSの基本文法

CSSでは、**「セレクタ(selector)」と「プロパティ(property)と値(value)」**の組み合わせでスタイルを指定します。基本構文は次の通りです。

セレクタ {
  プロパティ1: 値1;
  プロパティ2: 値2;
}

例えば、「すべての段落(<p>)の文字色を青にし、文字サイズを16pxにする」スタイルは次のように書けます。

p {
  color: blue;
  font-size: 16px;
}

この例では p というセレクタ（HTMLのp要素を指定）に対し、color プロパティに blue、font-size プロパティに 16px を指定しています。複数の指定は;で区切り、ブロック全体は {} で囲みます。

セレクタには様々な種類があります。特定のタグ名を指定するタイプの他に、.から始まるクラスセレクタ（HTML要素のclass属性にマッチ）、#から始まるIDセレクタ（id属性にマッチ）などがよく使われます。例えば <p class="intro"> というHTMLに対し、.intro { ... } とCSSを書くとそのクラスを持つ段落だけに適用できます。また「親要素内の子要素」を指定する子孫セレクタや、複数条件に一致する組み合わせセレクタなど高度な指定も可能です。

CSSをHTMLに適用するには、前述したようにいくつか方法がありますが、開発段階では手軽な <style> タグを使った方法をとるとよいでしょう。HTMLの<head>内に <style>〜</style> を書き、その中にCSSコードを記述します。外部ファイル化する場合は <link rel="stylesheet" href="style.css"> のようにCSSファイルを読み込みます。どの方法でも結果は同じく、ブラウザは対応するHTML要素にスタイルを反映して表示してくれます。

CSSでのレイアウト（FlexboxとGrid）

CSSの重要な役割の一つにレイアウト（配置）があります。文章や画像をただ縦に並べるだけでなく、ヘッダー・メニュー・コンテンツ・フッターといったページの構成要素を思い通りの位置に配置するにはCSSの力が欠かせません。

従来、レイアウトにはfloat属性やposition属性（absoluteやrelative）を駆使したテクニックが必要でしたが、現在はFlexbox（フレックスボックス）レイアウトとCSS Gridレイアウトという強力な仕組みが主流です。

Flexboxレイアウト: 一列（一方向）にアイテムを配置するのに適しています。親要素（コンテナ）に対して display: flex; を指定すると、その直下の子要素が自動的に横並び（または縦並び）に整列されます。さらにjustify-contentやalign-itemsといったプロパティで配置の揃え方（左寄せ、中央揃え、均等配置など）を簡単に設定できます。子要素側ではflex-grow（要素をどの程度伸縮させるか）などを指定することで、画面サイズに応じた伸縮レイアウトも実現できます。
Gridレイアウト: 2次元の格子状レイアウトを組むのに適しています。親要素に display: grid; を指定し、grid-template-columns や grid-template-rows で列や行の幅を定義すると、そのグリッド上に子要素を配置できます。たとえばgrid-template-columns: 1fr 2fr; のように書けば、幅の比率が1:2の2列レイアウトになります。Gridではgrid-columnやgrid-rowを用いて子要素が複数のセルにまたがるレイアウトなども容易に実現できます。

FlexboxとGridの簡単なコード例を見てみましょう。まずはFlexboxの例です。3つのボックスを横並びにし、中央揃えに配置するケースを考えます。

<div class="flex-container">
  <div class="item">ボックス1</div>
  <div class="item">ボックス2</div>
  <div class="item">ボックス3</div>
</div>

.flex-container {
  display: flex;             /* フレックスコンテナにする */
  justify-content: center;   /* 水平方向に中央揃え */
  align-items: center;       /* 垂直方向（行の高さ）も中央揃え */
  gap: 20px;                 /* 要素間の隙間を20pxに */
}
.item {
  background-color: lightblue;
  padding: 10px;
}

.flex-containerに対してdisplay: flex;を指定すると、その中の.item要素3つが自動で横一列に並びます。さらにjustify-content: center;で子要素たちをコンテナ内で中央寄せし、gapでボックス間のスペースを確保しています。結果、ブラウザ上では水色のボックスが横一列に綺麗に中央配置されるでしょう。Flexboxを使うと、このように行方向または列方向の配置が驚くほど簡単に整えられます。

次にGridレイアウトの例です。こちらは例えば写真ギャラリーのようにサムネイルを3列で並べるケースを考えます。

<div class="grid-container">
  <div class="grid-item">A</div>
  <div class="grid-item">B</div>
  <div class="grid-item">C</div>
  <div class="grid-item">D</div>
  <div class="grid-item">E</div>
  <div class="grid-item">F</div>
</div>

.grid-container {
  display: grid;                     /* グリッドコンテナにする */
  grid-template-columns: 1fr 1fr 1fr;/* 等幅の3列を定義（frは残り幅の比率単位） */
  gap: 10px;                         /* グリッドの隙間を10pxに */
}
.grid-item {
  background-color: lightgreen;
  padding: 10px;
  text-align: center;
}

.grid-containerに対しdisplay: grid;を指定し、grid-template-columnsで3列のグリッドを定義しています。1fr 1fr 1frと記述することで、コンテナの幅を3分割した等分の列幅になります（frは残りスペースを按分する単位です）。6つの.grid-item要素は自動的にこの3列グリッドに沿って上から順に配置され、2行×3列のレイアウトになります。gapで各セル間のスペースを確保し、各アイテムは薄緑色の背景としています。

FlexboxとGridは用途が重なる部分もありますが、一方向の整列はFlexbox、網目状の配置や複雑なレイアウトはGridと使い分けると良いでしょう。いずれも従来より直観的にレイアウトが組める強力なCSS3機能なので、ぜひ覚えておきたいところです。

カラー、フォント、アニメーションの適用

CSSではレイアウト以外にも、文字や背景の色指定、フォント（書体や大きさ）の指定、ホバー時の装飾やアニメーション付与など、デザイン全般を扱います。ここではそれらの基本的な指定方法を紹介します。

カラー（色）の指定: CSSで色を指定するプロパティは主にcolor（文字の色）とbackground-color（背景色）です。値には色名（red, blue, etc）、RGB値（rgb(255,0,0)など）、16進数コード（#FF0000など）を使用できます。また透過度付きのRGBAや最近はHSL表記なども使われます。例えば、特定のクラス.importantのテキストを赤字にし背景黄にするには: .important { color: red; background-color: yellow; }
フォントの指定: フォント関連ではfont-size（文字サイズ）、font-family（書体）、font-weight（太さ）、line-height（行間）などを指定します。例えば段落を全体に読みやすいサイズ・フォントにするには: p { font-size: 1.1em; /* 1em=基準サイズに対する倍率 */ line-height: 1.6; /* 行間は1.6倍 */ font-family: "游ゴシック体", sans-serif; /* 日本語と英字それぞれ指定 */ } 上記ではフォントサイズを親要素基準の1.1倍（ブラウザ標準16pxなら約17.6px）に、行間を1.6倍に設定し、フォントファミリーを日本語フォント（游ゴシック）と、なければサンセリフ体系にフォールバックする指定をしています。
アニメーションの適用: CSS3以降、簡単なアニメーションや動的効果もCSSで可能になりました。代表的なのがホバーエフェクトとトランジション、そしてキーフレームアニメーションです。ホバーエフェクトとはユーザーが要素にマウスカーソルを重ねたときの見た目変化で、:hover疑似クラスを使って指定します。トランジション（transition）はあるプロパティの変化にアニメーション（なめらかな移り変わり）を付与する機能です。例えば、ボタンにホバー時の色変化とトランジションを付けてみます: .btn { background-color: steelblue; color: white; transition: background-color 0.3s ease; } .btn:hover { background-color: royalblue; } .btnクラスの要素に対し、通常時は背景色スティールブルー、文字色白を指定し、背景色が変わるときに0.3秒かけて変化するようトランジションを設定しています。:hover時には背景色をロイヤルブルーに変える指定をしています。結果として、ユーザーがこのボタンにカーソルを合わせると背景色が0.3秒かけてなめらかに青みがかった色に変化します。またより複雑なアニメーションをしたい場合は@keyframesルールを使って自由な動きを定義し、animationプロパティで適用できます。例えばフェードインするアニメーション: @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } .fade-in-element { animation: fadein 2s forwards; } これは.fade-in-elementに対し2秒かけて透明(0)から不透明(1)に変化させるアニメーションを適用する例です。

このようにCSSを使えば、色・フォント・アニメーションまで幅広くWebページの表現力を高めることができます。デザイン面で実現したいことの多くはCSSで可能なので、様々なプロパティを試してみるとよいでしょう。

JavaScriptの基礎と簡単な動作例

それでは最後のピースである JavaScript の基礎について学びましょう。JavaScriptはプログラミング言語ですので、HTML/CSSとは記述の仕方が大きく異なります。ここでは変数や関数、イベント処理といった基本概念と、実際にブラウザ上でどのように動作するかの簡単な例を紹介します。また、JavaScriptを使ってHTMLを動的に操作する方法（DOM操作）や、3つの言語を組み合わせて簡易的なWebアプリ（TODOリスト）を作る例も示します。

変数・関数・イベントの基本

変数と関数、そしてイベントはプログラミングの初歩として押さえておきたい概念です。

変数: 値を一時的に保存しておくための「箱」です。JavaScriptではletもしくはconstキーワードで変数を宣言します（古い書き方ではvarもあります）。例えばlet x = 5;とすると、xという名前の変数に数値5を格納します。変数には文字列や数値、真偽値、オブジェクトなど様々な種類の値を入れることができます。
関数: 繰り返し使う処理や一連の処理をまとめて名前を付けたものです。関数を定義しておけば、後からその関数名を呼び出すだけで中の処理を実行できます。JavaScriptでは従来functionキーワードを使った定義や、近年ではアロー関数 (()=>{}) といった書き方もあります。例えば、 function greet(name) { console.log("こんにちは、" + name + "さん"); } と書けば、greetという関数を定義しています。この関数は引数nameを受け取り、コンソール（後述の開発者ツールのConsole）に挨拶メッセージを表示する処理を行います。呼ぶときは greet("太郎"); のようにします。
イベント: ユーザーの操作やタイミングによって発生する出来事のことです。代表例は「ボタンがクリックされた」「ページが読み込まれた」「キーが押された」などで、JavaScriptではこれらイベントに対して処理（イベントハンドラ）を設定できます。イベントハンドラの登録は、対象要素を取得して .addEventListener("イベント名", 関数) を呼ぶ方法や、要素のonclickプロパティに関数を代入する方法などがあります。

実際にJavaScriptの基本を示すコード例を見てみましょう。以下は、変数の宣言、関数の定義、そしてボタンのクリックイベント処理をまとめた例です。

<button id="myButton">クリックしてね</button>

<script>
  // 変数の宣言と利用
  let count = 0;
  count = count + 1;  // 数値をインクリメント
  console.log("現在のカウント:", count);

  // 関数の定義
  function showAlert(message) {
    alert("アラート: " + message);
  }

  // イベントハンドラの設定
  const btn = document.getElementById("myButton");
  btn.addEventListener("click", function() {
    showAlert("ボタンがクリックされました！");
  });
</script>

上記のHTMLでは、まず <button id="myButton"> というボタンを用意しています。その下の<script>タグ内がJavaScriptのコードです。

let count = 0; で変数countを0で初期化し、次の行でcount = count + 1;と計算して値を1に更新しています。console.logはブラウザのコンソールにデバッグ出力する関数で、「現在のカウント: 1」というメッセージが表示されます。
次に function showAlert(message) { ... } でshowAlertという関数を定義しています。この関数はalertを使ってポップアップ表示します。alertはブラウザに簡易的なダイアログを出す関数で、ユーザーにメッセージを伝える際などによく使われます。
最後にイベントハンドラの設定部分です。まずdocument.getElementById("myButton")でHTML中のid="myButton"という要素（先ほどのボタン）を取得し、btnという定数に代入しています。そしてbtn.addEventListener("click", function() { ... })でクリックイベントに匿名関数を紐付けています。これにより、ユーザーがボタンをクリックすると中のshowAlert("ボタンがクリックされました！");が実行され、画面にアラートが表示されます。

この例でJavaScriptの基本サイクルが理解できると思います。**「HTMLで用意した要素をJavaScriptで取得し、何らかのイベントに対して処理を実行する」**という流れです。JavaScriptではこのようにDOMを操作しつつユーザー操作に反応するコードを書いていきます。

DOM操作（HTML要素の変更）

JavaScriptの強力な機能の一つに、DOM操作があります。DOM（Document Object Model）とは、読み込まれたHTMLをブラウザ内で木構造のオブジェクトとして表現したものです。JavaScriptからこのDOMにアクセスすることで、現在表示されているページの内容を書き換えたり、新しい要素を追加したり、逆に削除したりすることができます。これにより、ページをリロードしなくても画面の内容を動的に変化させることが可能です。

DOM操作の基本として、まず要素の取得と内容の変更をやってみましょう。要素を取得するには前節でも使った document.getElementById や、document.querySelector などのメソッドを利用します。取得した要素に対して、textContentやinnerHTMLプロパティを変更すると表示テキストを書き換えられます。またstyleプロパティ経由でCSSスタイルを変更することもできます。

具体的な例を示します。例えばHTML側に <p id="message">こんにちは</p> という段落があったとします。このテキストをJavaScriptで書き換えてみましょう。

<p id="message">こんにちは</p>
<button id="changeBtn">メッセージ変更</button>

<script>
  const msgElem = document.getElementById("message");
  const btn = document.getElementById("changeBtn");
  
  btn.addEventListener("click", function() {
    // テキスト内容を変更
    msgElem.textContent = "こんばんは";
    // スタイルを変更（文字色を赤に）
    msgElem.style.color = "red";
  });
</script>

このコードでは、まずid="message"の段落要素を取得してmsgElem変数に保存しています。また、ボタン要素（id=”changeBtn”）も取得してbtnに保存しています。次にbtnに対してクリックイベントを登録し、そのコールバック内でmsgElem.textContentに新しい文字列「こんばんは」を代入しています。これによって、クリック時に段落の表示テキストが「こんにちは」から「こんばんは」に変わります。さらにmsgElem.style.color = "red";とすることで、その段落の文字色を赤色に変更しています。これらの変更はページを再読み込みしなくてもリアルタイムで反映され、ユーザーはボタンを押すと文字が変わり色も変化する様子を見ることができます。

このようにDOM操作を駆使すると、ユーザーの操作に応じてページ内容を書き換えるインタラクティブなUIを作れます。他にも、element.classList.add/removeでクラスの付け外しをしてCSS適用を切り替える手法や、setAttributeで属性を書き換える、appendChildで新しい要素を追加する、など様々な操作が可能です。慣れてきたらぜひ色々なDOM操作に挑戦してみてください。

簡単なWebアプリを作る（例：TODOリスト）

それでは、HTML・CSS・JavaScriptを組み合わせて簡単なWebアプリケーションを作ってみましょう。例として「TODOリスト」を題材にします。TODOリストとは、やることリストを追加・表示・管理するシンプルなアプリです。ユーザーがテキスト入力してボタンを押すとリストに項目が追加される、という動きを実装してみます。

基本的な方針は以下の通りです。

HTML: テキスト入力欄と「追加」ボタン、そしてTODO項目を表示するリスト（箇条書き）を用意する。
CSS: 必要に応じて見た目を整える（ここでは最低限にします）。
JavaScript: ボタンがクリックされたときの処理を記述し、入力欄のテキストを新しい要素としてリストに追加する。追加後、入力欄をクリアする。

では実際のコードを示します。HTMLファイル内にまとめて書いた例です。

<h2>簡易TODOリスト</h2>
<input id="new-task" type="text" placeholder="やることを入力">
<button id="add-task">追加</button>

<ul id="todo-list"></ul>

<script>
  const input = document.getElementById("new-task");
  const addBtn = document.getElementById("add-task");
  const list = document.getElementById("todo-list");

  addBtn.addEventListener("click", function() {
    const task = input.value.trim();      // 入力値を取得（前後空白除去）
    if (task !== "") {
      const li = document.createElement("li");  // 新しい<li>要素を作成
      li.textContent = task;                   // テキスト設定
      list.appendChild(li);                    // リストに追加
      input.value = "";                        // 入力欄をクリア
    }
  });
</script>

このコードを実行すると、画面にテキストボックスと「追加」ボタン、その下に空の箇条書きリストが表示されます。ユーザーがテキストボックスに例えば「牛乳を買う」と入力しボタンを押すと、JavaScriptのイベント処理が動き、<li>牛乳を買う</li> という項目がリストに追加されます。複数回入力すればその度にが増えていき、TODOリストがどんどん伸びていく仕組みです。

コードのポイントを簡単に解説します。まず各要素をgetElementByIdで取得しています。クリックイベントでは、input.value.trim()で入力文字列を取得し、空白トリムした上で空文字でないかチェックしています。空でなければdocument.createElement("li")で新しい要素を作り、textContentに入力文字を設定してから、list.appendChild(li)でに追加しています。最後にinput.value = ""でテキストボックスを空に戻しています。これで続けて新しい項目を入力しやすくなります。

見た目を整えたい場合はCSSでul#todo-listやliにスタイルを当てればOKです。例えばli { list-style: disc inside; }などとすれば丸付きリストになります。また削除機能などをつけるには、各に削除ボタンを付けてクリック時にremoveChildする、といった実装になりますが、ここではシンプルな追加のみの機能としました。

このTODOリストは非常に簡単な例ですが、HTMLで構造を作り、CSSで体裁を整え、JavaScriptで動きを付けるというWeb開発の基本が詰まっています。ぜひ実際にブラウザで試し、動く喜びを体感してください。うまく動かない場合は、ブラウザの開発者ツールでエラーメッセージを確認すると原因を突き止めやすいです（次章で開発者ツールの使い方を説明します）。

Web開発における最新の動向

ここまでHTML、CSS、JavaScriptの基本について説明しましたが、Web開発の世界は日進月歩であり、新しい技術やライブラリが次々と登場しています。初心者のうちは基本を理解することが最優先ですが、将来的に学ぶことになるかもしれない 最新の動向 についても触れておきましょう。特にフロントエンド分野で広く使われている jQuery や React といったツールについて簡単に紹介します。

jQueryとその役割

**jQuery（ジェイクエリ）**は、前述したようにJavaScriptを簡潔に書くためのライブラリです。WebページにjQueryのスクリプトを読み込むと、独自の $ 関数が使えるようになり、これを使ってHTML要素の操作やイベント処理を手短に書けます。例えば、「すべての段落(<p>)を非表示にする」という処理は、生のJavaScriptではループを回して各要素にstyle.display = "none"を当てる必要がありますが、jQueryなら一行で済みます。

$("p").hide();

このコードは、ページ内の<p>要素を全て選択し、一括で非表示にするというものです。$("p")がセレクタにマッチする要素集合を取得し、.hide()メソッドでそれらを非表示にします。他にも、$("#id名")でID指定した要素を取得したり、.on("click", function(){...})でイベントを設定したり、.ajax()でAjax通信を行ったりと、Web開発に必要な機能が一通り揃っています。

jQueryの役割は、特に2010年前後までは非常に大きく、事実上Webサイト開発の標準ツールでした。理由は、当時ブラウザ間（IEやFirefox、Chrome等）のJavaScript実装差異が大きく、直接DOM操作コードを書くとブラウザごとに動かなかったりバグが出たりしたためです。jQueryはそうした差異を吸収し、開発者が意識せずともどのブラウザでも同じように動作する抽象レイヤーを提供しました。また、アニメーションやエフェクトも豊富でプラグインも多数開発され、jQueryさえ使えばだいたい何でもできるという時代が長く続きました。

近年ではブラウザの標準APIが整備され、また後述するフレームワークの台頭もあり、新規プロジェクトで必ずしもjQueryを使う場面は減りました。しかし今でも古いシステムや簡易なプロトタイプ作成では使われることも多く、知っておいて損はないライブラリです。jQueryの公式サイトやドキュメントも非常に充実しているので、興味があれば一度触ってみると良いでしょう。

Reactとコンポーネントベース開発

React（リアクト）は、Facebook社によって開発されたUI構築ライブラリで、近年のフロントエンド開発で主流となっている技術の一つです。Reactの特徴は、コンポーネントベースのアプローチと仮想DOMによる効率的な描画更新にあります。

コンポーネントベースとは、ユーザインタフェースを小さな部品（コンポーネント）の集合として考える手法です。例えばWebページを「ヘッダー」「ナビゲーションバー」「コンテンツカード」「フッター」などのコンポーネントに分割し、それぞれを独立した単位（HTML + CSS + JSが組み合わさったもの）として定義します。こうすることで、複雑な画面でも部品単位で開発・管理ができ、再利用もしやすくなります。

ReactではコンポーネントをJavaScript（もしくはTypeScript）内でJSXという拡張記法を用いて定義します。JSXではHTMLに似た記述でUI構造を書けますが、実態はJavaScriptのコードとして解釈されます。各コンポーネントは自身の状態（state）を持ち、状態が変化すると自動的にUIが再描画されます。この再描画処理を効率化するのが仮想DOMです。Reactはブラウザの実際のDOMとは別にメモリ上に仮想的なDOMを保持し、状態変化時に新旧の仮想DOMを比較して差分だけを本物のDOMに反映します。これにより、直接DOM操作を乱用するよりパフォーマンスが向上し、大規模アプリでも快適に動作します。

初心者の方には少し難しく感じるかもしれませんが、要するにReactなどのフレームワークを使うと、手作業でDOM操作しなくてもUI構築と更新が簡単に書けるということです。React以外にも、Vue.js（ビュー）やAngular（アンギュラー）といった主要なフロントエンドフレームワークがありますが、考え方は概ね似ています。これらを駆使すると、単一ページで動的に画面遷移するリッチなWebアプリ（シングルページアプリケーション）を開発できます。

ただし、こうしたフレームワークはHTML・CSS・JavaScriptの基礎を理解した上で扱うものです。今回学んだ基礎なしにいきなりReactを勉強しても混乱してしまうでしょう。裏を返せば、HTML/CSS/JSの仕組みをしっかり理解していれば、フレームワーク習得もスムーズになります。興味が出てきたタイミングでReactのチュートリアルなどに挑戦してみると、新たな視野が開けるはずです。

検証ツール（開発者ツール）の活用方法

Web開発を行う上で非常に頼りになるのが、ブラウザに搭載されている**開発者ツール（デベロッパーツール、検証ツールとも呼ばれます）**です。ChromeやFirefox、Edge、Safariなど主要なブラウザは、Web開発者向けにページの構造やスタイル、ログ、ネットワーク通信などをリアルタイムで確認・操作できる機能を提供しています。ここでは開発者ツールの基本的な機能と、具体的な活用方法（HTML/CSSの検証やJavaScriptのデバッグ）について紹介します。

開発者ツールの基本機能

開発者ツールを開くには、Windowsなら F12キー（またはCtrl + Shift + I）、Macなら Command + Option + I といったショートカットを使うか、ブラウザのメニューから「開発者ツール」または「検証」を選択します。すると画面の右側や下側に開発者ツールのパネルが表示されます。

開発者ツールにはいくつかのタブがあり、それぞれ以下のような機能を持っています（※ブラウザによって名称が若干異なりますが概ね共通です）。

Elements（要素）タブ: 現在表示しているページのHTML構造と適用されているCSSを確認・編集できます。ツリー状にHTML要素が表示され、選択すると右側にその要素に適用中のCSSルールやボックスモデル（margin/padding/borderの状態）が表示されます。
Console（コンソール）タブ: JavaScriptのログやエラーメッセージが出力されます。先ほど console.log で出力した内容もここに表示されます。またコンソールから直接JavaScriptコードを入力・実行することもでき、ちょっとした値の確認や関数の呼び出しを試す場としても便利です。
Sources（ソース）タブ: 読み込まれたJavaScriptファイルのコードを表示し、ブレークポイント（実行一時停止地点）を設定してステップ実行や変数の中身確認といったデバッグを行えます。コードにバグがあるとき、ここで逐次実行しながら原因を調べることができます。
Network（ネットワーク）タブ: ページ読み込み時やAjax通信時に発生したHTTPリクエストの一覧や、その詳細（送信データや応答データ、所要時間など）を確認できます。サーバーとの通信が正しく行われているか、速度は適切かなどを分析するのに使います。
Application（アプリケーション）タブ: ブラウザに保存されたデータ（Cookie、ローカルストレージ、セッションストレージ、IndexedDBなど）や、サービスワーカー、キャッシュ情報などを確認できます。オフラインWebアプリやログイン情報のCookie確認など、より高度な場面で使用します。

このように開発者ツールには豊富な機能がありますが、最もよく使うのはElementsタブとConsoleタブでしょう。次項ではElementsタブを使ったHTML/CSSの編集確認、ConsoleタブやSourcesタブを使ったJavaScriptデバッグの具体例を見てみます。

HTML/CSSの変更をリアルタイムで確認

開発者ツールの Elementsタブ を使うと、今表示しているページのHTMLとCSSをその場で書き換えて試すことができます。これはとても強力で、コーディング中に「この要素の色を変えたらどう見えるだろう？」とか「レイアウトを少し余白増やしたら？」という調整を即座に反映して確認できます。

Elementsタブでは、ページのHTML構造がツリー表示され、ホバーやクリックで任意の要素を選択できます。また、ページ上の特定の要素を右クリックして「検証」(Inspect)を選ぶと、その要素に対応する箇所がツリー内でハイライトされます。選択した要素に対し、右側のスタイル編集ペインで現在適用されているCSSルールが一覧表示されます。ここの値をクリックして編集すると、すぐさまページに反映されます。例えばcolor: red;をcolor: green;に書き換えれば、その要素の文字色が瞬時に赤から緑に変わるのが確認できるでしょう。 (〖超初心者向け〗ブラウザの開発者ツールの使い方)】開発者ツールのElementsタブ画面の例。左側にHTML要素のツリーが表示され、右側に選択要素のCSSルールが一覧表示されている。吹き出しにあるように、「要素」タブを選択するとHTMLが表示され、内容を直接編集することも可能です。

このように、スタイルの調整は開発者ツール上で試行錯誤し、うまくいった内容を自分のCSSファイルに反映させるといった使い方が一般的です。HTML内容も同様に一時的に編集可能で、例えばテキストを書き換えてみて文量に応じたデザイン崩れがないか確認するといったこともできます（ただしツール上での変更はあくまでブラウザ上の一時的なもので、実ファイルには保存されません）。

また開発者ツールにはレスポンシブデザインモードもあります。デバイスアイコンのボタンを押すと、スマートフォンやタブレットの画面サイズをエミュレートした表示に切り替わります。これにより、手元に実機がなくても様々な画面サイズでデザインが崩れないかチェックできます。現代のWeb開発ではレスポンシブ対応がほぼ必須ですので、この機能もぜひ活用しましょう。

JavaScriptのデバッグ

JavaScriptを使って開発をしていると、思い通りに動かないバグに出会うことが必ずあります。その際に力を発揮するのが、開発者ツールのConsoleタブとSourcesタブを用いたデバッグです。

Consoleタブでのデバッグ: コード中にconsole.logを仕込んで変数の値を出力したり、条件分岐の流れを確認したりするのはシンプルながら効果的なデバッグ方法です。エラーが発生した場合も、Consoleに赤字でエラーメッセージやスタックトレース（どの場所でエラーになったか）が表示されますので、まずはそれを確認しましょう。たとえば「Uncaught ReferenceError: x is not defined」と出ていれば、変数xが定義されていないのに使われたことが原因だとわかります。

Consoleタブではまた、開発者自らリアルタイムにJavaScriptコードを入力して実行できます。ページ内の変数や関数にもアクセスできるので、例えばdocument.getElementById("todo-list").children.lengthと入力してTODOリストの項目数を調べる、といったことも可能です。ちょっとした検証や、関数が正しく動くかを試す場として活用しましょう。

Sourcesタブでのデバッグ: より踏み込んだデバッグには、Sourcesタブでブレークポイントを設定してコードを一行ずつ実行する方法があります。Sourcesタブで自分の書いたJavaScriptファイルを開き、怪しい箇所の行番号をクリックすると赤い印（ブレークポイント）が付きます。するとそのコードが実行される直前で処理が止まり、変数の中身を確認したり、次の行へステップ実行（一行ずつ進める）したりすることができます。例えばループがおかしいときにブレークしてループ変数の値を逐次確認する、if文の条件分岐が期待通りか確認する、といった使い方ができます。

さらに、開発者ツールではネットワーク遅延のシミュレーションやJavaScriptのプロファイリング（性能測定）など高度な機能も提供されていますが、初心者のうちはConsoleでエラーを確認し、必要に応じてブレークポイントデバッグを行うところから始めると良いでしょう。バグに遭遇したら開発者ツールを開く——これを習慣にすると、問題解決が格段に早くなります。

まとめ – Web開発の第一歩を踏み出そう

以上、Web開発の三本柱である HTML、CSS、JavaScript について、その役割と違いを中心に解説しました。簡単に振り返ると、HTMLはページの構造と内容をマークアップする言語、CSSはページの見た目を装飾・レイアウトする言語、JavaScriptはページに動きを与えるプログラミング言語です。この3つが組み合わさることで、私たちが普段目にするような洗練されたWebサイトが成り立っています。

記事中ではそれぞれの基本的な書き方やコード例、歴史的な発展、さらに最新のライブラリ（jQueryやReact）の話題や開発者ツールの使い方まで幅広く紹介しました。最初は盛りだくさんに感じるかもしれませんが、実際に手を動かして小さなページを作ってみれば、各技術がどのように関わっているかが実感できるはずです。ぜひ本記事のコード例を参考に、簡単なHTMLページを作り、CSSでデザインを調整し、JavaScriptでちょっとしたインタラクションを追加してみてください。

Web開発の第一歩は、小さくても自分の作ったページがブラウザに表示され、動くことを確かめることです。それができたときの喜びが、さらに学習を進める原動力になります。基礎を身につけた後は、是非モダンなフレームワークや高度なテクニックにも挑戦してみましょう。しかし何より大事なのは基本であり、本記事で解説した内容はそのまま今後の土台となります。

最後に、わからないことがあれば開発者ツールで調べる習慣を持ちましょう。Webページの裏側を見ることができる開発者ツールは、まさに皆さんの学習を助ける相棒です。先輩開発者たちもこのツールを駆使して問題を解決しています。

あなたも今日からHTML、CSS、JavaScriptを駆使して、世界に一つだけのWebページを作ってみませんか？ Web開発の世界は広大ですが、基本を押さえれば怖いものはありません。まずは一歩踏み出して、楽しみながら学んでいきましょう！

承知しました。この記事では、HTML、CSS、JavaScriptの違いを中心に初心者向けに解説し、歴史や発展の背景にも触れながら具体的なコード例を交えて説明します。

また、最新の研究動向については、ReactやjQueryといったライブラリに少し触れる形で紹介します。

さらに、基本的なHTMLページの作成、CSSのレイアウト例、JavaScriptの基本的な動作、簡単なWebアプリの作成をコード例とともに解説し、加えて検証ツールの見方についても説明します。

記事が完成しましたらお知らせします。

Web開発言語の基礎の基礎 – HTML、CSS、JavaScriptの違いを徹底解説

Web開発におけるHTML、CSS、JavaScriptの役割

HTMLとは？（基本概念と役割）

CSSとは？（デザインの重要性）

JavaScriptとは？（インタラクティブな要素の追加）

💡 補足: JavaScriptという名前からJavaという言語の仲間と思われがちですが、全くの別物です。JavaScriptは主にブラウザ上で動くスクリプト言語であり、Javaは主にアプリケーション開発に使われるオブジェクト指向言語です。名前は似ていますが混同しないようにしましょう。

HTML、CSS、JavaScriptの歴史と発展

HTMLの進化（HTML4からHTML5へ）

CSSの進化（CSS1からCSS3へ）

JavaScriptの発展（jQueryからReactへ）

基本的なHTMLの書き方と実践例

HTMLの基本構造

以下に基本的なHTML文書の構造を示します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">             <!-- 文字エンコーディングの指定 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- レスポンシブ対応 -->
  <title>はじめてのページ</title>    <!-- ページのタイトル（タブや検索結果に表示） -->
</head>
<body>
  <!-- ここにページの内容となるHTMLを記述 -->
  <h1>こんにちは、世界！</h1>
  <p>このページはHTMLの基本構造を示すサンプルです。</p>
</body>
</html>

見出し・段落・リンクの記述例

見出し要素: <h1>〜<h6>まで6段階の見出しタグがあります。<h1>が一番大きな見出し（タイトル級）、<h2>がその下のサブタイトル、と順に小さくなっていきます。見出しは章立てや項目のタイトルを示す際に使います。
段落要素: <p> で段落（パラグラフ）を表します。文章のひとかたまりを示すのに使い、ブラウザでは通常、段落ごとに適度な余白が自動で入ります。
リンク要素: <a> （アンカータグ）で他のページや同じページ内の別の場所へのリンクを作ります。href 属性に移動先のURL（またはID）を指定します。リンクテキストをタグで囲むことで、クリック可能なハイパーリンクになります。

これらを使ったHTMLの記述例を示します。

<h1>サイトの主タイトル</h1>
<p>この段落はサイトの紹介文です。HTMLを使うとこのように文章をマークアップできます。</p>

<h2>関連リンク</h2>
<p>詳しくは <a href="https://developer.mozilla.org/ja/">MDN Web Docs</a> を参照してください。</p>

フォームやボタンの作成方法

簡単なフォームとボタンの例を示します。

<h2>お問い合わせフォーム</h2>
<form action="/send" method="post">
  <p>
    お名前: 
    <input type="text" name="username" placeholder="お名前を入力">
  </p>
  <p>
    メール: 
    <input type="email" name="email" placeholder="メールアドレスを入力">
  </p>
  <p>
    お問い合わせ内容:
    <textarea name="message" rows="4" cols="40"></textarea>
  </p>
  <button type="submit">送信</button>
</form>

CSSの基本とレイアウトの考え方

CSSの基本文法

CSSでは、**「セレクタ(selector)」と「プロパティ(property)と値(value)」**の組み合わせでスタイルを指定します。基本構文は次の通りです。

セレクタ {
  プロパティ1: 値1;
  プロパティ2: 値2;
}

例えば、「すべての段落(<p>)の文字色を青にし、文字サイズを16pxにする」スタイルは次のように書けます。

p {
  color: blue;
  font-size: 16px;
}

CSSでのレイアウト（FlexboxとGrid）

Flexboxレイアウト: 一列（一方向）にアイテムを配置するのに適しています。親要素（コンテナ）に対して display: flex; を指定すると、その直下の子要素が自動的に横並び（または縦並び）に整列されます。さらにjustify-contentやalign-itemsといったプロパティで配置の揃え方（左寄せ、中央揃え、均等配置など）を簡単に設定できます。子要素側ではflex-grow（要素をどの程度伸縮させるか）などを指定することで、画面サイズに応じた伸縮レイアウトも実現できます。
Gridレイアウト: 2次元の格子状レイアウトを組むのに適しています。親要素に display: grid; を指定し、grid-template-columns や grid-template-rows で列や行の幅を定義すると、そのグリッド上に子要素を配置できます。たとえばgrid-template-columns: 1fr 2fr; のように書けば、幅の比率が1:2の2列レイアウトになります。Gridではgrid-columnやgrid-rowを用いて子要素が複数のセルにまたがるレイアウトなども容易に実現できます。

FlexboxとGridの簡単なコード例を見てみましょう。まずはFlexboxの例です。3つのボックスを横並びにし、中央揃えに配置するケースを考えます。

<div class="flex-container">
  <div class="item">ボックス1</div>
  <div class="item">ボックス2</div>
  <div class="item">ボックス3</div>
</div>

.flex-container {
  display: flex;             /* フレックスコンテナにする */
  justify-content: center;   /* 水平方向に中央揃え */
  align-items: center;       /* 垂直方向（行の高さ）も中央揃え */
  gap: 20px;                 /* 要素間の隙間を20pxに */
}
.item {
  background-color: lightblue;
  padding: 10px;
}

次にGridレイアウトの例です。こちらは例えば写真ギャラリーのようにサムネイルを3列で並べるケースを考えます。

<div class="grid-container">
  <div class="grid-item">A</div>
  <div class="grid-item">B</div>
  <div class="grid-item">C</div>
  <div class="grid-item">D</div>
  <div class="grid-item">E</div>
  <div class="grid-item">F</div>
</div>

.grid-container {
  display: grid;                     /* グリッドコンテナにする */
  grid-template-columns: 1fr 1fr 1fr;/* 等幅の3列を定義（frは残り幅の比率単位） */
  gap: 10px;                         /* グリッドの隙間を10pxに */
}
.grid-item {
  background-color: lightgreen;
  padding: 10px;
  text-align: center;
}

カラー、フォント、アニメーションの適用

カラー（色）の指定: CSSで色を指定するプロパティは主にcolor（文字の色）とbackground-color（背景色）です。値には色名（red, blue, etc）、RGB値（rgb(255,0,0)など）、16進数コード（#FF0000など）を使用できます。また透過度付きのRGBAや最近はHSL表記なども使われます。例えば、特定のクラス.importantのテキストを赤字にし背景黄にするには: .important { color: red; background-color: yellow; }
フォントの指定: フォント関連ではfont-size（文字サイズ）、font-family（書体）、font-weight（太さ）、line-height（行間）などを指定します。例えば段落を全体に読みやすいサイズ・フォントにするには: p { font-size: 1.1em; /* 1em=基準サイズに対する倍率 */ line-height: 1.6; /* 行間は1.6倍 */ font-family: "游ゴシック体", sans-serif; /* 日本語と英字それぞれ指定 */ } 上記ではフォントサイズを親要素基準の1.1倍（ブラウザ標準16pxなら約17.6px）に、行間を1.6倍に設定し、フォントファミリーを日本語フォント（游ゴシック）と、なければサンセリフ体系にフォールバックする指定をしています。
アニメーションの適用: CSS3以降、簡単なアニメーションや動的効果もCSSで可能になりました。代表的なのがホバーエフェクトとトランジション、そしてキーフレームアニメーションです。ホバーエフェクトとはユーザーが要素にマウスカーソルを重ねたときの見た目変化で、:hover疑似クラスを使って指定します。トランジション（transition）はあるプロパティの変化にアニメーション（なめらかな移り変わり）を付与する機能です。例えば、ボタンにホバー時の色変化とトランジションを付けてみます: .btn { background-color: steelblue; color: white; transition: background-color 0.3s ease; } .btn:hover { background-color: royalblue; } .btnクラスの要素に対し、通常時は背景色スティールブルー、文字色白を指定し、背景色が変わるときに0.3秒かけて変化するようトランジションを設定しています。:hover時には背景色をロイヤルブルーに変える指定をしています。結果として、ユーザーがこのボタンにカーソルを合わせると背景色が0.3秒かけてなめらかに青みがかった色に変化します。またより複雑なアニメーションをしたい場合は@keyframesルールを使って自由な動きを定義し、animationプロパティで適用できます。例えばフェードインするアニメーション: @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } .fade-in-element { animation: fadein 2s forwards; } これは.fade-in-elementに対し2秒かけて透明(0)から不透明(1)に変化させるアニメーションを適用する例です。

JavaScriptの基礎と簡単な動作例

変数・関数・イベントの基本

変数と関数、そしてイベントはプログラミングの初歩として押さえておきたい概念です。

変数: 値を一時的に保存しておくための「箱」です。JavaScriptではletもしくはconstキーワードで変数を宣言します（古い書き方ではvarもあります）。例えばlet x = 5;とすると、xという名前の変数に数値5を格納します。変数には文字列や数値、真偽値、オブジェクトなど様々な種類の値を入れることができます。
関数: 繰り返し使う処理や一連の処理をまとめて名前を付けたものです。関数を定義しておけば、後からその関数名を呼び出すだけで中の処理を実行できます。JavaScriptでは従来functionキーワードを使った定義や、近年ではアロー関数 (()=>{}) といった書き方もあります。例えば、 function greet(name) { console.log("こんにちは、" + name + "さん"); } と書けば、greetという関数を定義しています。この関数は引数nameを受け取り、コンソール（後述の開発者ツールのConsole）に挨拶メッセージを表示する処理を行います。呼ぶときは greet("太郎"); のようにします。
イベント: ユーザーの操作やタイミングによって発生する出来事のことです。代表例は「ボタンがクリックされた」「ページが読み込まれた」「キーが押された」などで、JavaScriptではこれらイベントに対して処理（イベントハンドラ）を設定できます。イベントハンドラの登録は、対象要素を取得して .addEventListener("イベント名", 関数) を呼ぶ方法や、要素のonclickプロパティに関数を代入する方法などがあります。

<button id="myButton">クリックしてね</button>

<script>
  // 変数の宣言と利用
  let count = 0;
  count = count + 1;  // 数値をインクリメント
  console.log("現在のカウント:", count);

  // 関数の定義
  function showAlert(message) {
    alert("アラート: " + message);
  }

  // イベントハンドラの設定
  const btn = document.getElementById("myButton");
  btn.addEventListener("click", function() {
    showAlert("ボタンがクリックされました！");
  });
</script>

上記のHTMLでは、まず <button id="myButton"> というボタンを用意しています。その下の<script>タグ内がJavaScriptのコードです。

let count = 0; で変数countを0で初期化し、次の行でcount = count + 1;と計算して値を1に更新しています。console.logはブラウザのコンソールにデバッグ出力する関数で、「現在のカウント: 1」というメッセージが表示されます。
次に function showAlert(message) { ... } でshowAlertという関数を定義しています。この関数はalertを使ってポップアップ表示します。alertはブラウザに簡易的なダイアログを出す関数で、ユーザーにメッセージを伝える際などによく使われます。
最後にイベントハンドラの設定部分です。まずdocument.getElementById("myButton")でHTML中のid="myButton"という要素（先ほどのボタン）を取得し、btnという定数に代入しています。そしてbtn.addEventListener("click", function() { ... })でクリックイベントに匿名関数を紐付けています。これにより、ユーザーがボタンをクリックすると中のshowAlert("ボタンがクリックされました！");が実行され、画面にアラートが表示されます。

DOM操作（HTML要素の変更）

具体的な例を示します。例えばHTML側に <p id="message">こんにちは</p> という段落があったとします。このテキストをJavaScriptで書き換えてみましょう。

<p id="message">こんにちは</p>
<button id="changeBtn">メッセージ変更</button>

<script>
  const msgElem = document.getElementById("message");
  const btn = document.getElementById("changeBtn");
  
  btn.addEventListener("click", function() {
    // テキスト内容を変更
    msgElem.textContent = "こんばんは";
    // スタイルを変更（文字色を赤に）
    msgElem.style.color = "red";
  });
</script>

簡単なWebアプリを作る（例：TODOリスト）

基本的な方針は以下の通りです。

HTML: テキスト入力欄と「追加」ボタン、そしてTODO項目を表示するリスト（箇条書き）を用意する。
CSS: 必要に応じて見た目を整える（ここでは最低限にします）。
JavaScript: ボタンがクリックされたときの処理を記述し、入力欄のテキストを新しい要素としてリストに追加する。追加後、入力欄をクリアする。

では実際のコードを示します。HTMLファイル内にまとめて書いた例です。

<h2>簡易TODOリスト</h2>
<input id="new-task" type="text" placeholder="やることを入力">
<button id="add-task">追加</button>

<ul id="todo-list"></ul>

<script>
  const input = document.getElementById("new-task");
  const addBtn = document.getElementById("add-task");
  const list = document.getElementById("todo-list");

  addBtn.addEventListener("click", function() {
    const task = input.value.trim();      // 入力値を取得（前後空白除去）
    if (task !== "") {
      const li = document.createElement("li");  // 新しい<li>要素を作成
      li.textContent = task;                   // テキスト設定
      list.appendChild(li);                    // リストに追加
      input.value = "";                        // 入力欄をクリア
    }
  });
</script>

Web開発における最新の動向

jQueryとその役割

$("p").hide();

Reactとコンポーネントベース開発

検証ツール（開発者ツール）の活用方法

開発者ツールの基本機能

Elements（要素）タブ: 現在表示しているページのHTML構造と適用されているCSSを確認・編集できます。ツリー状にHTML要素が表示され、選択すると右側にその要素に適用中のCSSルールやボックスモデル（margin/padding/borderの状態）が表示されます。
Console（コンソール）タブ: JavaScriptのログやエラーメッセージが出力されます。先ほど console.log で出力した内容もここに表示されます。またコンソールから直接JavaScriptコードを入力・実行することもでき、ちょっとした値の確認や関数の呼び出しを試す場としても便利です。
Sources（ソース）タブ: 読み込まれたJavaScriptファイルのコードを表示し、ブレークポイント（実行一時停止地点）を設定してステップ実行や変数の中身確認といったデバッグを行えます。コードにバグがあるとき、ここで逐次実行しながら原因を調べることができます。
Network（ネットワーク）タブ: ページ読み込み時やAjax通信時に発生したHTTPリクエストの一覧や、その詳細（送信データや応答データ、所要時間など）を確認できます。サーバーとの通信が正しく行われているか、速度は適切かなどを分析するのに使います。
Application（アプリケーション）タブ: ブラウザに保存されたデータ（Cookie、ローカルストレージ、セッションストレージ、IndexedDBなど）や、サービスワーカー、キャッシュ情報などを確認できます。オフラインWebアプリやログイン情報のCookie確認など、より高度な場面で使用します。

HTML/CSSの変更をリアルタイムで確認

JavaScriptのデバッグ

まとめ – Web開発の第一歩を踏み出そう

あなたも今日からHTML、CSS、JavaScriptを駆使して、世界に一つだけのWebページを作ってみませんか？ Web開発の世界は広大ですが、基本を押さえれば怖いものはありません。まずは一歩踏み出して、楽しみながら学んでいきましょう。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

Web開発言語の基礎の基礎 – HTML、CSS、JavaScriptの違いを徹底解説-

Web開発におけるHTML、CSS、JavaScriptの役割

HTMLとは？（基本概念と役割）

CSSとは？（デザインの重要性）

JavaScriptとは？（インタラクティブな要素の追加）

HTML、CSS、JavaScriptの歴史と発展

HTMLの進化（HTML4からHTML5へ）

CSSの進化（CSS1からCSS3へ）

JavaScriptの発展（jQueryからReactへ）

基本的なHTMLの書き方と実践例

HTMLの基本構造

見出し・段落・リンクの記述例

フォームやボタンの作成方法

CSSの基本とレイアウトの考え方

CSSの基本文法

CSSでのレイアウト（FlexboxとGrid）

カラー、フォント、アニメーションの適用

JavaScriptの基礎と簡単な動作例

変数・関数・イベントの基本

DOM操作（HTML要素の変更）

簡単なWebアプリを作る（例：TODOリスト）

Web開発における最新の動向

jQueryとその役割

Reactとコンポーネントベース開発

検証ツール（開発者ツール）の活用方法

開発者ツールの基本機能

HTML/CSSの変更をリアルタイムで確認

JavaScriptのデバッグ

まとめ – Web開発の第一歩を踏み出そう

承知しました。この記事では、HTML、CSS、JavaScriptの違いを中心に初心者向けに解説し、歴史や発展の背景にも触れながら具体的なコード例を交えて説明します。

Web開発言語の基礎の基礎 – HTML、CSS、JavaScriptの違いを徹底解説

Web開発におけるHTML、CSS、JavaScriptの役割

HTMLとは？（基本概念と役割）

CSSとは？（デザインの重要性）

JavaScriptとは？（インタラクティブな要素の追加）

HTML、CSS、JavaScriptの歴史と発展

HTMLの進化（HTML4からHTML5へ）

CSSの進化（CSS1からCSS3へ）

JavaScriptの発展（jQueryからReactへ）

基本的なHTMLの書き方と実践例

HTMLの基本構造

見出し・段落・リンクの記述例

フォームやボタンの作成方法

CSSの基本とレイアウトの考え方

CSSの基本文法

CSSでのレイアウト（FlexboxとGrid）

カラー、フォント、アニメーションの適用

JavaScriptの基礎と簡単な動作例

変数・関数・イベントの基本

DOM操作（HTML要素の変更）

簡単なWebアプリを作る（例：TODOリスト）

Web開発における最新の動向

jQueryとその役割

Reactとコンポーネントベース開発

検証ツール（開発者ツール）の活用方法

開発者ツールの基本機能

HTML/CSSの変更をリアルタイムで確認

JavaScriptのデバッグ

まとめ – Web開発の第一歩を踏み出そう

関連記事