はじめての板芸 #2 ― 最初のファイルを作る

「はじめての板芸 #1 ― 道具を用意する」の続きです。前回はテキストエディタとブラウザを用意し、デスクトップに作業フォルダを作りました。今回はいよいよ、最初のファイルを作って画面に文字を出してみます。

1. 文字を書き込む

テキストエディタ（メモ帳、またはテキストエディット）を開いて、まっさらな画面を出してください。

そこに、次の1行をそのまま書き込みます。

<meta charset="UTF-8">
<h1>こんにちは</h1>

1行目はおまじないです。これがないと日本語が文字化けすることがあるので、必ず書いてください。

「こんにちは」の部分は、自分の好きな言葉に変えてみてください。名前でも、好きな食べ物でも、今日の気分でも構いません。

<h1>と</h1>で挟んだ文字が、大きな見出しとして表示されます。

2. ファイル名をつけて保存する

書き込んだら、前回作った「hangei」フォルダに保存します。

Windows（メモ帳）の場合

1. 「ファイル」メニューから「名前を付けて保存」を選ぶ
2. 保存先を「hangei」フォルダにする
3. ファイル名に「index.html」と入力する
4. 「ファイルの種類」の欄を「すべてのファイル」に変更する
5. 「文字コード」の欄が「UTF-8」になっていることを確認する
6. 「保存」を押す

手順4を忘れると、ファイル名が「index.html.txt」になってしまいます。ここだけ注意してください。

Mac（CotEditor）の場合

1. 「ファイル」メニューから「保存」を選ぶ
2. 保存先を「hangei」フォルダにする
3. 名前に「index.html」と入力する
4. 「保存」を押す

3. ブラウザで開く

hangeiフォルダを開くと「index.html」というファイルができています。これをダブルクリックしてください。

ブラウザが立ち上がり、さきほど書いた文字が大きく表示されたら成功です。

もし文字だけのページが開いてしまった場合は、ファイルを右クリックして「プログラムから開く」（Macは「このアプリケーションで開く」）を選び、ブラウザ（Safari、Google Chromeなど）を指定してください。

4. まとめ

• テキストエディタで<h1>〇〇</h1>と書き込む。〇〇は自分の好きな言葉にする
• ファイル名は「index.html」。拡張子を「.html」にすることが肝心
• 保存したファイルをダブルクリックすると、ブラウザに文字が表示される