HTML入門：最初のindex.htmlを作り、ブラウザーで表示する

この記事でわかること

HTML・CSS・JavaScriptの役割を整理し、index.htmlを作ってブラウザーで表示。タグ、属性、headとbody、保存と再読み込み、文字化けの対策を学びます。

HTML・CSS・JavaScriptを順に学び、架空の学習会「まなびのアトリエ」の紹介サイトを完成させる全10回の連載です。第1回では、テキストファイルを自分の手で作り、ブラウザーに文章を表示します。プログラミング経験やNode.jsのインストールは必要ありません。

この連載で完成させるサイト

HTML・CSS・JavaScriptの担当を分ける

HTMLは「見出し」「段落」「リンク」など情報の意味と構造を記述します。CSSは色・余白・配置などの見た目を指定します。JavaScriptはクリックや入力に応じた動作を担当します。HTMLだけでもページは表示できます。最初から3つを同時に書かず、何を変えたら何が変わるのかを確認しましょう。

最終回では、スマートフォンに対応したレイアウト、開閉メニュー、テーマ切り替え、入力確認フォームを備えたサイトになります。フォームは練習用で、外部への送信機能は含みません。

用意するものと保存場所

必要なのはテキストエディターとブラウザーです。エディターはすでに使っているもので構いません。ワープロ形式ではなく、UTF-8のプレーンテキストとして保存できるものを使います。作業用にatelier-siteというフォルダーを作り、その中へindex.htmlを保存します。

atelier-site/
  index.html

ファイル名がindex.html.txtになっていないか確認してください。OSの「拡張子を表示する」設定を使うと見分けやすくなります。全角の引用符や括弧ではなく、コードに示した半角の記号を使います。

最初のHTMLを作る

index.htmlの完成コード

次の内容をindex.htmlへ保存してください。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="noindex">
  <title>まなびのアトリエ</title>
</head>
<body>
  <h1>まなびのアトリエ</h1>
  <p>HTML・CSS・JavaScriptで、自分のサイトを作ります。</p>
  <h2>学習の順番</h2>
  <ol>
    <li>HTMLで情報を組み立てる</li>
    <li>CSSで見た目を整える</li>
    <li>JavaScriptで動きを追加する</li>
  </ol>
</body>
</html>

ブラウザーで開いて確認する

保存したindex.htmlをブラウザーへドラッグするか、「ファイルを開く」操作で選択します。アドレスがfile:///から始まっていても、この回の例は動きます。画面に「まなびのアトリエ」と番号付きの学習順が表示されれば成功です。

エディターで文章を変更し、保存してからブラウザーを再読み込みします。エディターの変更だけでは、すでに開いているページは自動更新されません。ブラウザーは保存済みファイルを読み直して表示します。

HTMLの文法を読み解く

開始タグ・内容・終了タグ

<p>文章</p>全体を要素と呼びます。開始タグ<p>と終了タグ</p>の間に内容を書きます。<ol>は順番のあるリスト、<li>はその項目です。タグを入れ子にするときは、内側で開いた要素を先に閉じます。インデントは、どの要素の内側にあるかを読み取りやすくするためのものです。

headとbodyの違い

<head>にはページの設定、<body>には表示する内容を書きます。<title>はタブなどに使うページ名で、本文の見出し<h1>とは別です。lang="ja"は主な言語が日本語であること、charset="UTF-8"は文字コードを指定します。viewportは後でスマートフォンの表示幅を扱うために必要です。

<!doctype html>は標準的なHTML文書として扱うための宣言です。<meta>のような空要素は終了タグを持ちません。このサンプルのnoindexは練習ページを検索結果に掲載させないための設定です。自分の本番サイトを公開するときの扱いは最終回で説明します。

文章の中に記号を表示する

ページ本文に<p>という文字そのものを表示したい場合は<p>と書きます。タグと文章を区別するためです。複数の半角空白を並べても通常は見た目の余白を作れません。配置や余白はCSSの担当として後の回で扱います。

つまずいたときと練習問題

表示されないときに見る順番

まず保存済みか、ブラウザーで正しいファイルを開いているか確認します。
コードが文字として表示される場合は、拡張子とプレーンテキスト保存を確認します。
日本語が崩れる場合は、ファイルの保存文字コードとcharsetをUTF-8にそろえます。
ブラウザーが表示を補ってくれる場合もあるため、「表示できた」だけでタグの入れ子が正しいとは限りません。

自分の文章へ変更する

<h1>を自分のサイト名に変え、段落を1つ追加してください。次に学習順へ4つ目の<li>を追加します。タブのタイトルと本文の見出しの両方を変更できたら、この回の目標は達成です。

Node.jsでJavaScriptを実行する方法とは異なり、今回のHTMLはブラウザーが読み取ります。node index.htmlでは表示できません。両環境の違いはJavaScriptの実行方法でも解説しています。

参考資料

この回の完成版と学習の続き

第1回の見本をブラウザーで開く · 第1回の完成コードをダウンロード

ZIPを展開してindex.htmlを開けば、この回の完成時点から試せます。コードを変更する場合は、ZIP内のファイルをテキストエディターで編集して保存してください。

次の回：見出し・リンクと文書構造

HTML・CSS連載の学習順へ戻る