HTMLで初めての1ページを作る手順

1．編集用と閲覧用のアプリを用意する

使うアプリは二つです。HTMLを書くには「テキストエディター」、完成した見た目を見るにはChromeやSafariなどの「ブラウザー」を使います。テキストエディターは、文字を入力して、そのままファイルに保存できるアプリです。

Wordの文書形式ではなく、文字だけを保存する「プレーンテキスト」の形式で保存できるアプリを用意してください。たとえばMacの「テキストエディット」では、新規書類を開き、「フォーマット」から「標準テキストにする」を選んでから見本を貼り付けます。

練習用のファイルを入れるために、デスクトップなど見つけやすい場所に「website-practice」というフォルダーも作っておきます。

2．index.htmlとして保存する

テキストエディターで新しいファイルを開き、下の見本を最初から最後までコピーして貼り付けます。「名前を付けて保存」などの操作で、先ほど作ったフォルダーに保存します。

ファイル名は「index.html」にします。末尾の「.html」はHTMLファイルであることを示す部分で、拡張子と呼びます。アプリが自動で「.txt」を付けて「index.html.txt」にしていないか、保存した名前を見てください。文字コードという項目を選べる場合は「UTF-8」を選びます。日本語を正しく読み込ませるための設定です。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>はじめてのページ</title>
  <style>
    body { max-width: 40rem; margin: 2rem auto; padding: 1rem;
           font-family: sans-serif; line-height: 1.8; }
    h1 { color: #245a46; }
  </style>
</head>
<body>
  <h1>こもれび花店</h1>
  <p>季節の花を紹介する、練習用のページです。</p>
</body>
</html>

3．ブラウザーで開く

保存したindex.htmlを、開いているブラウザーの画面へドラッグします。または、ブラウザーでファイルを開く操作を選び、index.htmlを指定します。緑色の「こもれび花店」と、その下に紹介文が出れば成功です。

アドレス欄が「file:」で始まっているのは、自分のパソコンにあるファイルを開いているためです。HTMLの記号がそのまま出る場合は、ファイル名が.htmlで終わっているかと、プレーンテキストで保存したかを見直します。日本語が崩れている場合はUTF-8で保存し、見本の「meta charset」の行が残っているかも見てください。

4．店名と色を書き換える

テキストエディターへ戻り、「こもれび花店」の文字だけを「ひだまり花店」に変えて保存します。前後の<h1>と</h1>は消しません。ブラウザーに戻り、再読み込みのボタンを押すと、新しい店名が表示されます。「書き換える→保存する→再読み込みする」が基本の順番です。

色も変えてみましょう。見本の「color: #245a46;」を「color: blue;」に変え、保存して再読み込みすると、見出しが青くなります。このように色や配置を指定する記述をCSSといいます。

ほかの人にページを見せる方法

今の「file:」で始まるアドレスを友人へ送っても、友人のパソコンには同じファイルがないので開けません。ファイルそのものを渡すか、ホームページを公開できるサービスへファイルを置き、公開用のURLを作る必要があります。URLはページを開くためのアドレスです。

インターネットへ公開する段階では、練習用の店名や文章を実際の情報に置き換えます。住所なども含め、人に見せてよい情報だけが載っているかを読み直してから公開します。