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

テーブルタグを使おう


<table class="sample">
  <tr><th> </th><th> </th><th> </th></tr>
  <tr><th> </th><td> </td><td> </td></tr>
  <tr><th> </th><td> </td><td> </td></tr>
</table>


.sample, .sample th, .sample td {
  border: 1px solid #000000;
  border-collapse: collapse; 
}

Browser Display

セル内に何も入れてない状態です。

各クラス名と CSS プロパティの説明


.sample, .sample th, .sample td { ... }

CSS

「.sample, .sample th, .sample td」は、「.sample というクラス名がついた要素の中にある th, td」という親子関係を指定する書き方です。 sample クラスのテーブル（table）全体と、その中の見出しセル（th）やデータセル（td）すべてに同じスタイルをまとめて適用することができます。カンマ「,」で区切って並べます。

.sample: sample のテーブル全体
.sample th: sample のテーブル内の見出しセル (<th>)
.sample td: sample のテーブル内のデータセル (<td>)

上記の指定で、sample クラスのテーブル全体と、その中のセルすべてに同じ枠線を付けることができます。


border: 1px solid #000000;

CSS

border: 枠線を作る
1px: 枠線の太さ（1ピクセル）
solid: 線の種類（実線）
#000000: 色（黒）

「枠線を 1 pxの黒い実線で描く」という意味です。HTML だけでは枠線が出ないので、CSS で設定が必要です


border-collapse: collapse;

CSS

項目	項目
1-1	1-2
2-1	2-2

Browser Display

collapse にすると、隣り合うセルの枠線をまとめて、1 本の線にすることができます。

項目	項目
1-1	1-2
2-1	2-2

Browser Display

デフォルトでは、セルごとに枠が 2 重に見えます。

テストページ：７


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページタイトル</title>
  <style>
    body {
      text-align: center;
    }
    h1 {
      color: deepskyblue;
    }
    h2 {
      color: #444444;
    }
    p {
      line-height: 1.6;
    }
    p.change {
      font-size:20px;
      font-weight:bold;
    }
    .sample, .sample th, .sample td {
      border: 1px solid #000000;
      border-collapse: collapse; 
    }
  </style>
</head>
<body>
  <h1>Webページを作ってみよう</h1>
  <p>このサイトでは、HTMLとCSSの基本を使って、自分だけのWebページを作る方法を紹介します。</p>
  <h2>このページでできること</h2>
  <p>
    ・ 見出しや文章を表示する<br>
    ・ 文字の色や大きさを変える<br>
    ・ 簡単なページを完成させる
  </p>
  <p class="change">まずは、HTMLの基本から始めてみましょう。</p>
  <hr>
  <img src="tulip.png" width="150" height="105" alt="青いチューリップ">
  <table class="sample">
  <tr><th>上の見出し１</th><th>上の見出し２</th><th>上の見出し３</th></tr>
  <tr><th>左の見出し１</th><td>データ</td><td>データ</td></tr>
  <tr><th>左の見出し２</th><td>データ</td><td>データ</td></tr>
  </table>
  <p>
    <a href="index.html">トップページに戻る</a>
  </p>
</body>
</html>

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

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

あれれ？テーブルだけ左に寄っていますね。これは table がデフォルトでは横幅いっぱいに広がらない性質を持っているからです。ここからは、CSS を使って全体のレイアウトをきれいに整えていきましょう。今は細かい意味は気にせず、「こう書くと、こうなる」と学んでいけば大丈夫です。

レイアウトを整えて、壁紙を貼ろう

テーブルの中央寄せ

テーブルを中央に配置し、上下に少し間隔をあけます。


.sample {
  margin: 20px auto;
}

20 px は上下の余白、auto は左右を自動で調整（中央配置）します。

リストタグ（`<ul>`）

次に、「 <p> タグと <br>（改行）で書いている箇条書きの 3 行」を、リスト専用の <ul> タグを使って整えてみましょう。


.menu {
  display: inline-block;
  text-align: left;
}


<ul class="menu">
  <li>見出しや文章を表示する</li>
  <li>文字の色や大きさを変える</li>
  <li>簡単なページを完成させる</li>
</ul>

HTML

Browser Display

リストタグ（<ul>）は、そのままでは横幅いっぱいに広がろうとする性質があります。 display: inline-block; を指定すると、リスト全体を『文字の塊』のように扱えるようになり、 body に指定した text-align: center; によってリスト全体が中央に配置されるようになります。

リスト内の text-align: left; は、リストを『塊として中央に寄せつつ、中身の文字は左揃えにする』ために指定しています。これを指定しないと、文字が塊の中でバラバラに中央揃えになってしまうからです。


body {
  background-color: #f5f8ff;
  background-image: url("hemp1.gif");
}

背景色や背景画像は、body に指定します。

background-color: 要素の背景に色を付けるプロパティ
色はキーワード（red, skyblue など）、16 進数（#ff0000）、RGB（rgb(255,0,0)）などで指定可能。要素の中身のテキストや画像には影響しません。
background-image: 要素の背景に画像を表示するプロパティ
background-color と一緒に使うと、画像が透明部分を持っている場合や画像が読み込めないときに色が見えます。

テストページ：８

テーブルの中央寄せ、リストタグ、壁紙を加えてブラウザで見てみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページタイトル</title>
  <style>
    body {
      text-align: center;
      background-color: #f5f8ff;
      background-image: url("hemp1.gif");
    }
    h1 {
      color: deepskyblue;
    }
    h2 {
      color: #444444;
    }
    p {
      line-height: 1.6;
    }
    p.change {
      font-size:20px;
      font-weight:bold;
    }
    .menu {
      display: inline-block;
      text-align: left;
    }
    .sample {
      margin: 20px auto;
    }
    .sample, .sample th, .sample td {
      border: 1px solid #000000;
      border-collapse: collapse; 
    }
  </style>
</head>
<body>
  <h1>Webページを作ってみよう</h1>
  <p>このサイトでは、HTMLとCSSの基本を使って、自分だけのWebページを作る方法を紹介します。</p>
  <h2>このページでできること</h2>
  <ul class="menu">
    <li>見出しや文章を表示する</li>
    <li>文字の色や大きさを変える</li>
    <li>簡単なページを完成させる</li>
  </ul>
  <p class="change">まずは、HTMLの基本から始めてみましょう。</p>
  <hr>
  <img src="tulip.png" width="150" height="105" alt="青いチューリップ">
  <table class="sample">
  <tr><th>上の見出し１</th><th>上の見出し２</th><th>上の見出し３</th></tr>
  <tr><th>左の見出し１</th><td>データ</td><td>データ</td></tr>
  <tr><th>左の見出し２</th><td>データ</td><td>データ</td></tr>
  </table>
  <p>
    <a href="index.html">トップページに戻る</a>
  </p>
</body>
</html>

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

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

HTML の構造をもう一度確認しよう

ここまで作った Webページは、実はこのような構造になっています。（タグは一部カットしています）

画像を見ると分かる通り、HTML はタグの中に別のタグを包み込む「入れ子（ネスト）」という構造になっています。 <html> という大きな箱の中に、<head> や <body> 、さらにその中の細かいタグが順番に収納されています。 HTML 文書自体がひとつの「大きな入れ子」ということですね。ページを作っていくうちに、いつの間にかこの構造も自然と使いこなせるようになっていますよ。

これで、「Webページを作ろう」のステップはすべて完了です。お疲れ様でした。

いかがでしたか？タグを使って、ページの見た目がどんどん変わっていく様子を楽しめましたか？

昔の HTML は、1 つのファイルで「文章」も「デザイン」もすべて指定していました。しかし、今の Web制作は「 HTML ＝文章の構造」「 CSS（スタイルシート）＝デザイン」と、役割を分けて作るのが標準です。

ここでは基本となるタグと CSS だけを使いましたが、これらを応用すれば表現は無限に広がります。

まずは、自分の手でページを形にする「手応え」を大切にしてください。そこから少しずつ、自分好みに育てていけばいいのです。

このページが、あなただけのお城をネットに築く第一歩になれば幸いです。

sky-blue

「1. Webページを作ろう」の HTML の基本と文字に戻る。
「1. HTML タグを使おう」から見てみる。
もっと勉強したいと思われる方は、「とほほのWWW入門」へ。

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

ぱたぱたアニメ館