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

リンクを張ってみよう


<a href="リンク先URL"></a>


<a href="https://pata2.jp/">ぱたぱたアニメ館</a>

HTML

ぱたぱたアニメ館 Browser Display

<a></a> タグは、クリックすると別のページへ移動できるリンクを作るタグです。（タグで囲んだ文字がクリックできる） href に、移動先の住所（ページ）を指定します。

文字を中央に配置してみよう


body {
  text-align: center;
}

「テストページ：４」の文字を中央に配置しましょう。<a> タグのリンクも加えます。

テストページ：５


<!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;
    }
  </style>
</head>
<body>
  <h1>Webページを作ってみよう</h1>
  <p>このサイトでは、HTMLとCSSの基本を使って、自分だけのWebページを作る方法を紹介します。</p>
  <h2>このページでできること</h2>
  <p>
    ・ 見出しや文章を表示する<br>
    ・ 文字の色や大きさを変える<br>
    ・ 簡単なページを完成させる
  </p>
  <p class="change">まずは、HTMLの基本から始めてみましょう。</p>
  <p>
    <a href="index.html">トップページに戻る</a>
  </p>
</body>
</html>

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

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

水平線を使ってみよう


<hr>

Browser Display

<hr> タグは、内容と内容を区切るための水平線を表示します。区切り線として使うと、ページが見やすくなります。水平線に終了タグはありません。水平線の前後は自動的に改行され、デフォルトでセンタリングされます。

画像を表示させてみよう


<img src="画像のURL">


<img src="tulip.png" width="150" height="105" alt="青いチューリップ">

HTML

Browser Display

レイアウト崩れ防止のために、横幅（width=""）と縦（height=""）の指定が推奨されています。 alt="" には、画像の内容を表す文字を入れます。

テストページ：６

「テストページ：５」に水平線と画像を加えてみましょう。


<!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;
    }
  </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="青いチューリップ">
  <p>
    <a href="index.html">トップページに戻る</a>
  </p>
</body>
</html>

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

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

「3. Webページを作ろう」は、表とリスト、レイアウトになります。

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

ぱたぱたアニメ館