道具(VSCode)と場所(フォルダ)がそろいました。いよいよ、はじめてのHTMLファイルを作ります。ここでの目標はただ一つ、「書いたものが画面に出た!」をその目で見ること。プログラミングでいちばん気持ちいい瞬間です。
ファイルは保存してはじめて反映される
これから何度も出てくる大事な習慣があります。エディタに書いただけでは、まだ画面には反映されません。かならず保存して、はじめてブラウザに伝わります。
このレッスンのまとめ
- フォルダの中に
index.html を作る
- 書いたら保存する(
Ctrl/⌘ + S)
- ブラウザで開くと、書いた内容が表示される
やってみよう:はじめてのHTMLファイル
① ファイルを作る
VSCodeで開いた作業フォルダの中に、新しいファイルを作ります。
- VSCode左側のフォルダ名の横にある「新しいファイル」アイコンを押す(右クリック →「新しいファイル」でもOK)
- 名前を
index.html にしてEnter
これで、空っぽのHTMLファイルが1枚できました。index は「最初のページ」を表す、いわば表紙の定番の名前です。
② 1行だけ書く
作った index.html に、次の1行を打ち込んでみましょう。まるっと同じでかまいません。
<h1>はじめてのページ</h1>
エディタに打ち込むと、こんなふうにタグへ自動で色がつきます。打ち込んだら、かならず保存します(Ctrl + S、Macなら ⌘ + S)。
③ ブラウザで開く
保存した index.html を、いつものブラウザ(Chromeなど)で開きます。いちばんかんたんなのは、そのファイルをブラウザのウィンドウにドラッグ&ドロップする方法。ファイルをダブルクリックしても、たいていブラウザで開きます。
すると——画面に大きな文字で 「はじめてのページ」 と表示されるはずです。
まっさらなページに、あなたの書いた1行だけがドンと表示されます。これがあなたのはじめてのWebページ。「打ち込む → 画面に出る」の流れがつかめました。でも、直すたびにファイルを開き直すのは、ちょっと面倒ですよね。