HTML入門① はじめてのWebページを作ろう

「Webページを作る」と聞くと、サーバーの契約や難しい設定が必要そうですよね。でも、見出しと文章がある最初の1枚なら、パソコンの中だけで作れます。

今回は「プログラミング学習ノート」を作ります。文字を変えて保存し、ブラウザーで変化を見るところまでやってみましょう。自分の書いた内容がページになると、ぐっと仕組みが分かりやすくなります。

HTMLはページの骨組み

HTMLは「ここは見出し」「ここは段落」と、内容の役割を伝えるための言語です。計算や条件分岐を書く言語とは役割が違い、マークアップ言語と呼びます。

まずは2行だけ見てください。

<h1>プログラミング学習ノート</h1>
<p>今日は見出しと段落を覚えました。</p>

<h1> は見出しの始まり、</h1> は終わりです。こうした印をタグと呼びます。終わり側にだけ / が付いていますね。

「開始タグ・中身・終了タグ」を合わせたまとまりが要素です。p 要素は段落、h1 要素は最上位の見出しを表します。大きい字にしたいから見出しにするのではなく、「内容の中でどんな役割か」で選ぶのがポイントです。

文字の色や大きさは、次回のCSSで変えられます。最初は見た目が素朴でも大丈夫です。

index.htmlを作る

1. 作業用フォルダーを用意する

エクスプローラーやFinderで my-first-page というフォルダーを作り、VS Codeなどのエディターで開きます。エディターは、コードを編集するためのソフトです。

その中に index.html を作ってください。.html はファイルの種類を示す拡張子です。Windowsで拡張子が隠れている場合は、表示する設定にして index.html.txt になっていないか確認します。

ここではインストール済みのブラウザーとテキストエディターを使います。HTMLを書くだけなら、別途プログラムを実行する仕組みは必要ありません。

2. ページ全体のコードを保存する

次を index.html に入れます。すでに何か書いた場合は、練習用ファイルの内容をこの例へ置き換えてください。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>わたしの学習ページ</title>
  </head>
  <body>
    <main>
      <h1>プログラミング学習ノート</h1>
      <p>今日覚えたことを記録するページです。</p>
      <a href="https://developer.mozilla.org/ja/">MDNで調べる</a>
    </main>
  </body>
</html>

全部の英単語を一度に覚える必要はありません。まず Ctrl + S、Macなら Command + S で保存しましょう。

3. headとbodyの担当を分けて読む

部分	何を伝えているか
`<!doctype html>`	現在のHTMLとして解釈してもらうための宣言
`<html lang="ja">`	この文書の主な言語は日本語
`<head>`	文書の設定や、ほかのファイルへの情報
`<meta charset="UTF-8">`	日本語を含む文字の読み取り方
`<title>`	ブラウザーのタブなどに表示する名前
`<body>`	ページに表示する内容
`<main>`	このページの中心となる内容

title と h1 は別物です。タブに出るのは「わたしの学習ページ」、ページ内の大見出しは「プログラミング学習ノート」になります。

meta のように終了タグを持たない要素もあります。例の末尾の /> はよく見る書き方ですが、HTMLでは > と書くこともできます。すべてのタグに機械的に終了タグを付けるわけではないんですね。

ブラウザーで確認する

保存した index.html をブラウザーで開きます。ダブルクリックでエディターが開く場合は、ファイルを右クリックし「プログラムから開く」などでブラウザーを選びます。

表示できたら、本文を次へ変えてください。

<p>HTMLで最初の1ページを作れました。</p>

作業は次の順です。

エディターで文字を変更する
ファイルを保存する
ブラウザーを更新する
表示された文章が変わったか確認する

「あれ、変わらない？」となったら、この4段階を1つずつ確かめます。通常のローカルHTMLでは、保存しただけでブラウザーが自動更新されるとは限りません。

また、アドレス欄が file:///... なら、自分のパソコン内のファイルを見ています。これは公開サイトではありません。https://... のサイトへ変更を届けるには、別途公開作業が必要です。Webサイト用語入門で、その違いを整理できます。

作ったページをほかの人にも見てもらいたくなったら、HTMLサイトを無料で公開する手順へ進めます。WindowsのブラウザーからGitHub Pagesへアップロードし、公開後の更新まで試せます。

属性で追加情報を渡す

リンクの行を分解してみる

<a href="about.html">このサイトについて</a>

a はリンクを表す要素、href="about.html" は行き先を指定する属性です。属性は開始タグの中へ書く追加設定、と考えてください。

この例は次の3つに分けられます。

a：リンクを作る
href：移動先は同じフォルダーの about.html
「このサイトについて」：読者が押す文字

about.html をまだ作っていなければ、押した先のページは開けません。練習では index.html と同じフォルダーに about.html を作り、先ほどのページ全体のコードをコピーして、見出しを「このサイトについて」に変えると確かめられます。

同じサイト内と、別のサイトへのリンク

about.html のような書き方を相対URLと呼びます。現在のファイルの場所を基準に探す方法です。

https://developer.mozilla.org/ja/ のように行き先全体を書くものは絶対URLです。外部サイトへのリンクでは、https:// を省略しないようにします。

「こちら」だけのリンクより、「HTMLの書き方を調べる」のように、何が開くか分かる文言の方が迷いません。読み上げで利用する人にとっても、リンクの目的が伝わりやすくなります。

タグの入れ子と、つまずくところ

要素の中に別の要素を置くことを入れ子といいます。箱の中に小さな箱を入れる感じです。

<p>今日は<strong>見出し</strong>を覚えました。</p>

strong は内容の重要性を示す要素です。この例なら、先に開いた p を最後に閉じ、内側の strong を先に閉じます。

間違えた例も見ておきましょう。

<p>今日は<strong>見出し</p></strong>

閉じる順番が交差しています。ブラウザーは一部の間違いを補って表示するので、画面に出たから正しいHTMLとは限りません。表示が崩れたら、囲み方も確認します。

ほかによく確認したい点は次のとおりです。

困りごと	最初に見る場所
コードがそのまま文章として出る	拡張子が `.html` か
日本語が文字化けする	UTF-8で保存したか、charsetがあるか
リンク先が開かない	ファイル名、大文字小文字、置いたフォルダー
保存しても変わらない	今開いているファイルと編集対象が同じか
行を分けたのに同じ段落になる	内容に応じて `p` を分けたか

HTMLのソース内でEnterを押しただけでは、画面にも同じ位置で改行が入るとは限りません。別の話題なら段落を分けます。余白を作るために改行タグを何個も並べる方法は、後で見た目を調整しにくくなるので避けましょう。

練習：好きなものを一覧にする

main の中に「好きなもの」という小見出しを置き、その下へ好きなゲーム・本・音楽などを3つ並べてください。条件は、番号のない箇条書きにすることです。

模範解答

<h2>好きなもの</h2>
<ul>
  <li>探索するゲーム</li>
  <li>宇宙についての本</li>
  <li>作業中に聴く音楽</li>
</ul>

解説

h2 は、ページ全体の h1 の下にある話題の見出しです。ul が箇条書き全体を包み、li が1項目を表します。このコードは </main> の直前へ追加すると、本文の続きとして表示されます。

3項目は同じ立場なので、すべて同じ階層に置きます。順番が大切な「作業手順」なら、ul の代わりに ol を使うと番号付きになります。

小見出しと3つの項目が表示されれば完成です。文字が小さい、色がない、と感じても今はそのままでOK。内容と見た目を分けて作ると、直す場所が分かりやすくなります。

次に読む記事

次はHTML・CSS入門② 色・余白・横並びを整えようで、このページを読みやすく整えます。

この記事で目指したのはタグの暗記ではなく、「どのファイルを保存し、何をブラウザーへ伝えているか」が分かることです。自分の文章に置き換えて確認できたら、十分な一歩です。

本で順番に学びたい場合

この記事の練習と次のCSS入門は、書籍を買わずに進められます。手元の本を見ながらHTMLからレイアウトまで順番に学びたい場合は、Mana著『1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］』が候補です。

出版社の目次では、HTML・CSSの基本から、1列・2列・タイル型のサイト制作へ進む構成を確認できます。購入前に試し読みで説明の量や進み方が自分に合うかを見てください。この紹介は出版社の目次・書誌情報に基づくものです。

参考にした公式資料

構造を小さな要素から組み立てる説明は、次の学習資料を参考にしています。作例はこの記事用に作成しています。