じゅんび・はじめの準備

はじめてのHTMLファイル

空のファイルに1行だけ書いて、ブラウザで開く。「打ち込む→画面に出る」——最初の成功体験をここで。

道具(VSCode)と場所(フォルダ)がそろいました。いよいよ、はじめてのHTMLファイルを作ります。ここでの目標はただ一つ、「書いたものが画面に出た!」をその目で見ること。プログラミングでいちばん気持ちいい瞬間です。

「index.html」という名前のひみつ

これから作るファイルの名前はindex.html。じつはこれ、思いつきの名前ではありません。Webの世界には、「そのフォルダの表紙になるページはindexと名づける」という約束があります。

本の最初にある目次(index)と同じで、「まずここから見てね」の合図。だから世界中のWebサイトの最初のページは、だいたいindex.htmlという名前です。あなたが今日作る1枚も、その仲間入りをします。

これから書く「タグ」をちらっと予習

今回打ち込むのは<h1>はじめてのページ</h1>という1行。<h1></h1>のような山かっこの印をタグと呼び、「ここからここまでは大きな見出しだよ」とブラウザに伝える目印です。

くわしい仕組みはHTMLコースでじっくりやるので、いまは「タグで文字をはさむと、ブラウザがその意味で表示してくれる」——それだけつかめれば十分です。

ファイルは保存してはじめて反映される

これから何度も出てくる大事な習慣があります。エディタに書いただけでは、まだ画面には反映されません。かならず保存して、はじめてブラウザに伝わります。

うまくいかないときのチェックリスト

はじめての1枚は、小さなつまずきが起きがち。「あれ?」と思ったら、上から順に確かめてみましょう。

  1. 保存した?——タブの●は未保存のサイン
  2. ファイル名は正しい?——index.htmlのつづり。とくに拡張子が.txtのまま(index.html.txt)になっていないか
  3. タグの記号は半角?——<>は半角で。全角の<>だとタグとして働きません
  4. 開いたファイルは合ってる?——別のフォルダの古いファイルを開いていないか
べんりワザ文字化けの直し方文字化けの正体と直し方は、こちらでくわしく

このレッスンのまとめ

  1. フォルダの中に index.html を作る
  2. 書いたら保存する(Ctrl/⌘ + S
  3. ブラウザで開くと、書いた内容が表示される

やってみよう:はじめてのHTMLファイル

① ファイルを作る

VSCodeで開いた作業フォルダの中に、新しいファイルを作ります。

  1. VSCode左側のフォルダ名の横にある「新しいファイル」アイコンを押す(右クリック →「新しいファイル」でもOK)
  2. 名前を index.html にしてEnter

これで、空っぽのHTMLファイルが1枚できました。index は「最初のページ」を表す、いわば表紙の定番の名前です。

② 1行だけ書く

作った index.html に、次の1行を打ち込んでみましょう。まるっと同じでかまいません。

<h1>はじめてのページ</h1>
VSCodeのエディタに <h1>はじめてのページ</h1> と1行だけ書かれ、タグに色がついている
エディタに打ち込むと、こんなふうにタグへ自動で色がつきます。

打ち込んだら、かならず保存します(Ctrl + S、Macなら ⌘ + S)。

③ ブラウザで開く

保存した index.html を、いつものブラウザ(Chromeなど)で開きます。いちばんかんたんなのは、そのファイルをブラウザのウィンドウにドラッグ&ドロップする方法。ファイルをダブルクリックしても、たいていブラウザで開きます。

すると——画面に大きな文字で 「はじめてのページ」 と表示されるはずです。

ブラウザに大きな文字で「はじめてのページ」とだけ表示された、まっさらなWebページ
まっさらなページに、あなたの書いた1行だけがドンと表示されます。これがあなたのはじめてのWebページ。

「打ち込む → 画面に出る」の流れがつかめました。でも、直すたびにファイルを開き直すのは、ちょっと面倒ですよね。

よくある質問

なぜファイル名はindex.htmlなのですか?
Webの世界では「そのフォルダの最初に見せるページ」をindexという名前にする約束があるからです。ページを公開したとき、住所だけでアクセスすると自動的にindex.htmlが表示されます。
ブラウザで開いたら、タグごと文字がそのまま表示されました。なぜですか?
ファイルがHTMLとして認識されていない可能性が高いです。拡張子がindex.html.txtのように別のものになっていないか、名前を確かめてみてください。
書いたのにブラウザに何も表示されません。
いちばん多い原因は保存忘れです。VSCodeのタブに●が出ていたら未保存のサイン。保存してから、ブラウザを開き直して(更新して)みてください。