1. Webページを作ろう | ぱたぱたアニメ館

はじめに

「Webページを作ろう」のページでは、メモ帳などのテキストエディタにタグを記述して Webページを作る方法を説明します。自分で Webページを作ってみたいと思われる方は挑戦してみてください。

先に、「1. HTML タグを使おう」「2. HTML タグを使おう」を見ておかれた方が話が分かりやすいかもしれません。文字色は、「色見本」を参考にしてください。

現在の HTML は「HTML Living Standard」として継続的に更新されています。このページでは、基本的な HTML の仕組みと簡単な CSS（スタイルシート）を理解することを目的としています。

HTML とは

Webページは、HTML という形式の文書ファイルで作ります。

HTML とは、Hyper Text Markup Language（ハイパーテキストのマーク付け言語）の略です。何のことか分からない方は、このページを右クリックして、『ページのソースを表示』を選んでみてください。< > で囲まれた半角の英数字（タグ）がたくさんあるでしょ？このタグによって、ページの構造が決められています。

この文書ファイル（HTML ファイル）で指定したことが Webページに表示されるという訳ですね。

専用のフォルダを作ろう

まずは、Webページ用の専用フォルダを 1 つ作りましょう。

HTML ファイルや画像などを、ひとまとめに管理するためです。最初にフォルダを作っておくことで、後からファイルが増えても迷わず整理できます。

フォルダは、分かりやすい場所（例：ドキュメント）に作り、名前も分かりやすいものにしておきましょう。（例：Webpage、myweb、Webページなど）

これから作成する HTML ファイルは、すべてこのフォルダの中に保存していきます。

また、HTML ファイルを編集するために、テキストエディタを1つ用意してください。Windows に付属している「メモ帳」で十分です。（※ フォルダの作り方やメモ帳の起動方法が分からない場合は、お使いの環境に合わせて調べてみてください。）

HTMLの骨格を覚えよう

次に、HTML 文書の基本となる「骨格（構造）」を見てみましょう。これは、今の Web制作でも変わらず使われている、とても大切な形です。 HTML ファイルは、「このファイルは HTML ですよ」と宣言するところから始まります。

HTML 文書の基本構造


<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
</body>
</html>

各部分の説明

<!DOCTYPE html>: この 1 行は、「このファイルは、現在の標準的な HTML で書かれています」という宣言です。
現在の HTML では、 <html> の前に <!DOCTYPE html> を書くのが一般的です。
<html> ～ </html>: ここからここまでが、1 つの HTML 文書だよ、という意味です。
<head> ～ </head>: ページに関する情報を書く場所です。画面には直接表示されませんが、とても大事な情報が入ります。
<title> ～ </title>: ページのタイトルです。ブラウザのタブや、お気に入りに登録したときに表示されます。
<body> ～ </body>: ここに書いた内容が、実際に Webページとして表示されます。

タグについて大切なこと


<p>これは文章です</p>

HTML

このように、ほとんどのタグは開始タグ（< >）と終了タグ（</ >）のセットで使います。タグの中に別のタグを入れることをネスト（入れ子）と呼びます。

HTML では、「ここから（開始タグ）」と「ここまで（終了タグ）」を正しく書くことが、何よりも重要です。

終了タグを忘れると、その効果がページの最後までずっと続いてしまいます。（例：文字を赤く指定して閉じ忘れると、それより下の文字がすべて真っ赤になる。）

タグや属性は必ず半角で書きましょう。また、大文字・小文字どちらでも動作しますが、現在は小文字で書くのが一般的です。

例外的なタグ（単独で使うもの）もあります。 <br>（改行）や <img>（画像）のように、最初から終了タグが存在しないタグもあります。これらは「中身を挟む」必要がないため、一つだけで機能します。

HTML要素の構造

a: リンクを作る要素
href: リンク先の場所を指定する属性

開始タグの中には、「属性」を指定できます。属性は、要素に追加の情報を与えるものです。
属性「属性名="属性値"」の形で書き、複数ある場合は半角スペースで区切ります。属性値は、引用符（"や’）で囲みます。

Webページを作ってみよう

では、Webページを作っていきましょう。 HTMLの骨格（基本の形）に、日本語を正しく表示するための設定や、画面に出したい文字を追加してみます。（新しく追加された部分は赤色にしています）

テストページ：１


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページタイトル</title>
</head>
<body>
  Webページを作ってみよう
</body>
</html>

<html lang="ja">: lang="ja" は、このページが日本語のページであることをブラウザや検索エンジンに伝えます。今のHTMLでは、書くのが一般的です。
<meta charset="UTF-8">: 文字コードの指定です。日本語が文字化けしないように、必ず書いておきましょう。

「テストページ：１」の表示

実際に、コピーしてメモ帳などに張り付けた実物はこちら → 「テストページ：１」
たったこれだけでも、HTML ファイルとしては完成です。文字が 1 行だけでも、立派な Webページですよ。

この「テストページ：１」には meta viewport を設定していないため、スマートフォンで見ると画面全体が縮小されて表示されます。これは PC 向けページとして表示されているためで、正常な動作です。（スマートフォンでの表示については、次の「テストページ：２」で説明します。）

Webページのトップページ（玄関・表紙）のファイル名は「index.html」にしましょう

index: 名前（ファイル名）
.: 区切り（ピリオド）
html: 種類（拡張子）

多くのサーバーでは、URL を入力したときに「最初に読み込むファイル」として index.html という名前を探すルールになっています。サーバーによっては index.htm の場合もありますが、基本的にはサーバーの指定に合わせましょう。
2 枚目以降のページ（メニューやリンク集など）は、menu.html や link.html のように、半角英数字であれば好きな名前をつけることができます。
【注】メモ帳で保存するときは、文字コードを「UTF-8」に選び、ファイル名の最後に必ず「.html」と自分で入力してください。

HTML と CSS の役割

HTML は「何があるか」を書くもの、CSS は「どう見せるか」を決めるものです。 HTML で内容や構造を作り、CSS で文字の色や大きさ、配置などを整えます。

CSS は、HTML 文書の <style></style> タグの中に CSS のルールを書きます。書いた CSS は、この HTML ページ全体に適用されます。

テストページ：２


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページタイトル</title>
  <style>
    h1 {
      color: deepskyblue;
    }
  </style>
</head>
<body>
  <h1>Webページを作ってみよう</h1>
</body>
</html>

h1 は、一番大きな見出し（タイトル）です。そのページ全体に 1 つだけつける「本のタイトル」のようなものです。 deepskyblue は色の名前です。colorで、色を指定しています。

「テストページ：２」の表示

実物はこちらです。 → 「テストページ：２」

スマートフォン向けに Web ページを作る場合は、次の 1 行を <head> の中に追加します。

この設定を入れると、スマートフォンの画面幅に合わせてページが表示されるようになります。「テストページ：２」以降のテストページには、この 1 行を追加しています。なお、解説用のコードには含めていません。

`<p>` タグを使って文章を書こう

<p></p>は、段落の指定に使います。次の行との間に 1 行分の余白が空きます。

テストページ：３


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページタイトル</title>
  <style>
    h1 {
      color: deepskyblue;
    }
    h2 {
      color: #444444;
    }
    p {
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>Webページを作ってみよう</h1>
  <p>このサイトでは、HTMLとCSSの基本を使って、自分だけのWebページを作る方法を紹介します。</p>
  <h2>このページでできること</h2>
  <p>
    ・ 見出しや文章を表示する<br>
    ・ 文字の色や大きさを変える<br>
    ・ 簡単なページを完成させる
  </p>
</body>
</html>

line-height は、行と行の間隔を指定します。数字だけを書くと、文字の大きさを基準にした倍率になります。 h2 は、２番目に大きな見出し（章タイトル）です。ページの中身をいくつかのグループに分ける「章のタイトル」のようなものです。 <br> は文章の途中で強制的に改行したいときに使うタグです。閉じタグは不要です。

「テストページ：３」の表示

実物はこちらです。 → 「テストページ：３」

文字の大きさと太さを変えよう

文字の大きさは font-size、文字の太さは font-weight を使って指定します。ここでは <p> タグにクラス名「change」を付けて指定しています。クラス名を付けていない <p> タグに影響はありません。（p.change → <p> タグかつ change クラスを持つもの）

テストページ：４


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページタイトル</title>
  <style>
    h1 {
      color: deepskyblue;
    }
    h2 {
      color: #444444;
    }
    p {
      line-height: 1.6;
    }
    p.change {
      font-size:20px;
      font-weight:bold;
    }
  </style>
</head>
<body>
  <h1>Webページを作ってみよう</h1>
  <p>このサイトでは、HTMLとCSSの基本を使って、自分だけのWebページを作る方法を紹介します。</p>
  <h2>このページでできること</h2>
  <p>
    ・ 見出しや文章を表示する<br>
    ・ 文字の色や大きさを変える<br>
    ・ 簡単なページを完成させる
  </p>
  <p class="change">まずは、HTMLの基本から始めてみましょう。</p>
</body>
</html>

font-size: 数値＋単位（px, em など）、％、small、large などが指定できます。
font-weight: 100, 200, 300, 400, 500, 600, 700, 800, 900, bold などが指定できます。（通常の太さは 400、bold は 700 相当です。）

「テストページ：４」の表示

実物はこちらです。 → 「テストページ：４」

「2. Webページを作ろう」は、リンクと画像になります。

このページは、AI（ChatGPT & Gemini）のアドバイスを取り入れて、より分かりやすく作り直しました。また、コードやサンプル表示を読みやすくするため、私のお気に入りのフォント設定を適用しています。そのため、一般的なブラウザの初期設定とはサイズ感やフォントの種類が違って見えるかもしれませんが、ご了承ください。

ぱたぱたアニメ館