はじめてのHTMLページの作り方

このページでは、HTML・CSS・JavaScriptを使って基本的なWebページを作る方法を初心者向けに解説します。 完成すると、 見出し・文章・ボタンを表示し、 ボタンをクリックするとメッセージが表示されるWebページになります。

完成イメージ

まずは完成イメージを見てみましょう。

完成コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのページ</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    body {
      font-family: sans-serif;
      text-align: center;
      padding: 40px;
      background: #f5f5f5;
    }

    h1 {
      color: #333;
    }

    p {
      color: #666;
    }

    button {
      padding: 10px 20px;
      border: none;
      background: #4CAF50;
      color: white;
      border-radius: 5px;
      cursor: pointer;
    }

    button:hover {
      background: #45a049;
    }
  </style>

</head>

<body>

<h1>こんにちは！</h1>

<p>これは基本のHTMLページです</p>

<button onclick="alert('クリックされた！')">
ボタン
</button>

</body>
</html>
まず、 ☆ ここのリンクを開いて上記のコードをコピペして貼り付けてプレビューボタンを押してみましょう。ダウンロードボタンでHTMLが完成します。

① DOCTYPE宣言

<!DOCTYPE html>

HTML5で作成されたページであることをブラウザへ伝えます。 現在のHTMLでは最初に記述する決まりです。

② htmlタグ

<html lang="ja">

Webページ全体を囲むタグです。 lang="ja"は、このページが日本語で書かれていることを示しています。

③ headタグ

headタグには画面には表示されない設定を書きます。 タイトルやSEO設定、CSSなどを記述します。

④ meta charset

<meta charset="UTF-8">

日本語が文字化けしないようにする設定です。 ほとんどのHTMLでUTF-8が使用されています。

⑤ titleタグ

<title>はじめてのページ</title>

ブラウザのタブや検索結果に表示されるタイトルです。 SEOでも重要な設定です。

⑥ viewport

<meta name="viewport"
content="width=device-width, initial-scale=1.0">

スマートフォンでも見やすく表示するための設定です。 レスポンシブデザインでは必須となります。

⑦ CSS（styleタグ）

styleタグにはデザインを書きます。 文字の色や背景色、余白などを変更できます。

body

body{
font-family:sans-serif;
text-align:center;
padding:40px;
background:#f5f5f5;
}

h1

h1{
color:#333;
}

見出しの色を変更しています。

p

p{
color:#666;
}

本文を少し薄い色で表示しています。

button

button{
padding:10px 20px;
border:none;
background:#4CAF50;
color:white;
border-radius:5px;
cursor:pointer;
}

ボタンのデザインを変更しています。

button:hover

button:hover{
background:#45a049;
}

マウスを乗せたときだけ色が変わります。 これをホバー効果といいます。

⑧ bodyタグ

bodyタグの中に書いた内容が実際のWebページに表示されます。

⑨ 見出しを表示する

<h1>こんにちは！</h1>

大きな見出しを表示します。 通常は1ページにつき1つ使用します。

⑩ 文章を表示する

<p>これは基本のHTMLページです</p>

文章を書くときはpタグを使用します。

⑪ ボタンを作る

<button onclick="alert('クリックされた！')">
ボタン
</button>

buttonタグでボタンを表示します。 onclick属性にはクリックされたときに実行するJavaScriptを書きます。

⑫ alert()とは

alert("クリックされた！");

JavaScriptのalert()はメッセージを表示する命令です。 ボタンを押すと「クリックされた！」というダイアログが表示されます。

表示イメージ

こんにちは！

これは基本のHTMLページです

┌────────────┐
│   ボタン    │
└────────────┘

ボタンをクリックするとメッセージが表示されます。

このサンプルで学べること