HTML・CSS・JavaScriptのいい関係

Webページを作るとき、まず登場するのがHTML・CSS・JavaScriptです。HTMLでページの構造を作り、CSSで見た目を整え、JavaScriptで動きをつけます。昔なら、これらのコードを一から覚えて書いていくのが一般的でした。

でも、今はAIがあります。

AIにコードを書いてもらい、そのコードを読んで、実際に動かしてみる。そして、自分で少しずつ変更していく。

そんなやり方で学んでいきましょう。

HTML ― 構造を作る

HTMLって何？

HTMLは、Webページの構造や内容を作るための言語です。

例えば、Webページに見出しと文章を表示したいとします。

<h1>HTMLを学ぼう</h1>
<p>HTMLはWebページの構造を作ります。</p>

<h1>は見出し、<p>は文章を表します。そして、h1やpのような記号をタグと呼びます。HTMLでは、文章や画像、リンクなどをタグで囲むことで、「これは見出し」「これは文章」「これは画像」といった意味を持たせます。

このようにタグを組み合わせながら、Webページの構造を作っていくのがHTMLです。

AIにHTMLを作ってもらおう

では、AIにHTMLを書いてもらいましょう。

例えば、こんな指示を出して、AIにHTMLを生成してもらいましょう。

AIに聞こう

「HTMLを学ぼう」という見出しと、「HTMLはWebページの構造を作ります。」という文章を表示する
シンプルなHTMLを作ってください。

コピーしたよ、お使いのAIに訊いてみて。Geminiは[Alt]＋[G]だよ。

次は、そのコードを見てみましょう。

生成されたコードを読んでみよう

AIが作ったHTMLを眺めてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTMLを学ぼう</title>
</head>
<body>
  <h1>HTMLを学ぼう</h1>
  <p>HTMLはWebページの構造を作ります。</p>
</body>
</html>

先程の<h1>や<p>以外にも見慣れない記号がありますね。

ここではまだそれぞれのタグを覚えなくて良いのですが、気になる方はAIに聞いてみましょう。

AIに指令

このHTMLに使われているタグを、初心者にもわかるように説明してください。

コピーしたよ、お使いのAIに訊いてみて。Geminiは[Alt]＋[G]だよ。

コードを眺めるだけでも、少しずつHTMLの形が見えてくるよ！

HTMLを自分で変更してみよう

次は、自分でコードを変更してみます。

例えば、

<h1>HTMLを学ぼう</h1>

を、

<h1>HTMLをはじめてみた</h1>

に変更してみましょう。

たった一文字、二文字の変更でも構いません。

「コードを書き換えると、表示が変わる」

この感覚をつかむことが大切です。

CSS ― デザインする

CSSって何？

HTMLでWebページの構造を作ったら、次は見た目を整えます。

そこで使うのがCSSです。CSSでは、文字の大きさや色、余白、配置などを指定できます。

例えば、

h1 {
  font-size: 32px;
}

と書けば、h1の文字サイズを32pxにできます。

HTMLが「何を表示するか」を担当するなら、CSSは「どう見せるか」を担当する、と考えるとわかりやすいでしょう。

AIにデザインしてもらおう

先ほど出力してもらったHTMLに、CSSも追加しましょう。

AIに指令

先ほどのHTMLにCSSを追加して、見出しを32pxにして、ページ全体に余白をつけてください。

コピーしたよ、お使いのAIに訊いてみて。Geminiは[Alt]＋[G]だよ。

AIが先程のHTMLに合わせたCSSを生成してくれます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTMLを学ぼう</title>
  <style>
    body {
      /* ブラウザのデフォルトマージンをリセットし、ページ全体に余白を設ける */
      margin: 0;
      padding: 24px; 
    }
    
    h1 {
      /* 見出しのサイズ指定 */
      font-size: 32px;
    }
  </style>
</head>
<body>
  <h1>HTMLを学ぼう</h1>
  <p>HTMLはWebページの構造を作ります。</p>
</body>
</html>

これからHTMLを編集して、その編集結果をブラウザで表示する作業をします。下記の手順に従って準備してみてください。

  1. HTMLファイルとして保存
  2. 保存したファイルをブラウザで開く
  3. エディタで保存したファイルを開く

HTMLファイルとして保存して、ブラウザでこのHTMLを開いてみてください。さらに、編集できるようにエディタでファイルを開きます。

CSSを自分で変更してみよう

<style>タグで囲まれた箇所がCSSの設定です。

body {
	/* ブラウザのデフォルトマージンをリセットし、ページ全体に余白を設ける */
	margin: 0;
	padding: 24px; 
}
h1 {
	/* 見出しのサイズ指定 */
	font-size: 32px;
}

上記でbodyに余白関連、h1にフォントサイズを指定しています。ここではCSSの構文を知らなくて大丈夫です。詳しくはCSS入門に進んでもら得ればと思いますが、気になる方はAIにきいてみてください。

では、フォントサイズを変更してみましょう。HTMLを開いているエディタで次の編集を行います。

font-size: 32px;

上記の数値を下記に変更します。

font-size: 40px;

見出しが大きくなれば、それでOKです。

CSSは変更した結果が画面に反映されるから、試しながら覚えやすいよ。

JavaScript ― 動きをつける

JavaScriptって何？

HTMLで構造を作り、CSSで見た目を整えました。最後に、Webページへ動きや処理を追加してみます。そこで使うのがJavaScriptです。

例えば、ボタンをクリックしたときにメッセージを表示するといった処理ができます。AIにお願いしてみましょう。

AIに指令

ボタンをクリックすると「Hello!」と表示するJavaScriptを作って

コピーしたよ、お使いのAIに訊いてみて。Geminiは[Alt]＋[G]だよ。

 
<button id="helloButton">クリック</button>

<script>
  document.querySelector('#helloButton').addEventListener('click', () => {
    alert('Hello!');
  });
</script>

<script>タグで囲まれた文章がJavaScriptです。初めての方は全然わからないと思いますが、大丈夫です。このまま読み進んで問題ないですが、気になる方はJavaScriptの講座に進むか、AIにきいてみましょう。

何はともあれ、JavaScriptを使うと、ユーザーの操作に反応したり、ページの内容を変更したり、サーバーからデータを取得したりできます。

まとめ

HTML・CSS・JavaScriptは、それぞれ役割が違います。

  • HTML → 構造を作る
  • CSS → デザインする
  • JavaScript → 動きをつける

AIはどのステップからでも使うことができますし、もっと細かいレイヤーで利用できます。

例えば、こんな使い方があります。

  • コードを作ってもらう
  • コードの意味を説明してもらう
  • デザインやレイアウトを相談する
  • エラーの原因を調べてもらう
  • 自分で書いたコードをレビューしてもらう
  • コードを改善してもらう

つまり、HTML・CSS・JavaScriptを学びながら、わからないところをAIに聞いたり、コードを書いてもらったりしながら制作を進めることができます。

これが、AIを使ったWeb制作の基本的なスタイルです。