HTMLでページの骨組みを作る

Web ページは「骨組み」「見た目」「動き」の3つでできています。ここではそのうちの骨組みにあたる HTML を書いて、ブラウザに表示するところまで進めます。

Web ページの3層

層	言語	役割
骨組み	HTML	見出し、段落、リスト、リンクなどの構造
見た目	CSS	色、大きさ、配置などの装飾
動き	JavaScript	ボタンを押したら何か起こる、データを取ってくる等

この回では HTML だけを扱います。CSS と JavaScript はそれぞれ後の回で追加します。

最小の HTML ファイルを作る

VS Code で作業フォルダの中に index.html を新規作成し、以下のコードを書いて保存します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのHTML</title>
</head>
<body>
  <h1>こんにちは、HTML！</h1>
  <p>これは最初のWebページです。</p>
</body>
</html>

保存したら、ファイルをダブルクリックするか、ブラウザにドラッグ＆ドロップして開きます。「こんにちは、HTML！」という見出しと、その下に段落が表示されます。

構造を読む

HTML はタグ（< と > で囲んだもの）で構造を表します。

タグ	意味
`<!DOCTYPE html>`	「これは HTML5 の文書です」という宣言
`<html lang="ja">`	文書全体を囲む。`lang="ja"` は日本語を指定
`<head>`	ページの設定情報（ブラウザのタブに表示されるタイトル等）
`<meta charset="UTF-8">`	文字コードを UTF-8 に指定（日本語を正しく表示するため）
`<title>`	ブラウザのタブに出るタイトル
`<body>`	画面に表示される本文

ほとんどのタグは開始タグ <h1> と終了タグ </h1> のペアで使います。

見出しと段落

見出しは h1〜h6 の6段階、段落は p で書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>見出しと段落</title>
</head>
<body>
  <h1>Java Web 開発ノート</h1>
  <h2>Java の基礎</h2>
  <p>変数、計算、if、for を学びました。</p>
  <h2>くり返しとメソッド</h2>
  <p>for 文とメソッドで処理をまとめる方法を学びました。</p>
</body>
</html>

h1 が一番大きい見出し、数字が増えるほど小さくなります。1ページに h1 は通常1つだけ使います。

リストとリンク

箇条書きは ul（unordered list）と li（list item）で書きます。

<h2>学んだこと</h2>
<ul>
  <li>変数と型</li>
  <li>if 文と for 文</li>
  <li>メソッドと配列</li>
</ul>

リンクは a タグで作ります。

<p><a href="https://adoptium.net/">JDK のダウンロードはこちら</a></p>

href がリンク先の URL です。クリックするとそのページに移動します。

画像

画像は img タグで表示します。img は終了タグがない特殊なタグです。

<img src="photo.jpg" alt="サンプル画像">

属性	意味
`src`	画像ファイルのパス
`alt`	画像が表示できないときの代替テキスト

alt は省略できますが、アクセシビリティのために書くのが基本です。

ここまでのまとめ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>学習メモ</title>
</head>
<body>
  <h1>Java Web 開発 学習メモ</h1>
  <p>変数、条件分岐、繰り返し、クラスなど Java の基礎を学びました。</p>

  <h2>学んだこと</h2>
  <ul>
    <li>変数・型・計算</li>
    <li>if / for / メソッド</li>
    <li>配列・ArrayList</li>
    <li>クラスとオブジェクト</li>
  </ul>

  <h2>参考リンク</h2>
  <p><a href="https://adoptium.net/">Adoptium（JDK ダウンロード）</a></p>
</body>
</html>

Java の学習内容をまとめたページが、HTML だけで作れました。ただし見た目は装飾なしの白い画面です。

次の回へ

次は CSS を使って、このページに最小限の見た目を追加します。