コース目次 / 第0章
準備
VS Code を入れて、フォルダを作り、最初の index.html をブラウザに表示します。
このコースで一番の山場は、実はプログラミングそのものではなく 最初の環境づくり です。ここさえ越えれば、あとは自分のサイトに文章と飾りを足していくだけになります。焦らず、1つずつ画面を確認しながら進めてください。
まず、ページのいちばん上にある「お使いのパソコン」で Mac か Windows を選んでください。以降の手順が、選んだほうに合わせて切り替わります。この選択は覚えておくので、次の章からは選び直す必要はありません。
5分やってみてどうしてもうまくいかないときは、そこで止まってお助けページを見てください。章のスナップショットをダウンロードすれば、その先から再開できます。
0-1. VS Code を入れる
VS Code は、文章を書くためのソフト(メモ帳)の、プログラミング専用版です。無料です。ブラウザで「VS Code ダウンロード」と検索し、公式サイトを開いてください。
Mac をお使いの方
- 「Download for Mac」のボタンを押します。
- ダウンロードされた zip ファイルをダブルクリックすると、青いアイコンの
Visual Studio Codeが出てきます。 - そのアイコンを、Finder の左側にある 「アプリケーション」 フォルダにドラッグして入れます。
- アプリケーションフォルダの中の VS Code をダブルクリックして起動します。
初回起動時に「インターネットからダウンロードされたアプリケーションです。開いてもよろしいですか?」と聞かれたら「開く」を押してください。これは正常な確認です。
Windows をお使いの方
- 「Download for Windows」のボタンを押します。
- ダウンロードされた
.exeファイルをダブルクリックします。 - 途中でいくつかチェックボックスが出てきますが、すべて初期状態のまま「次へ」を押し続けて大丈夫です。
- 「完了」を押すと VS Code が起動します。
「WindowsによってPCが保護されました」という青い画面が出たら、「詳細情報」→「実行」の順に押してください。これは正常な確認です。
青っぽい画面が出れば成功です。
0-2. 日本語にする・自動保存をONにする
英語のままだと読むだけで疲れるので、先に日本語にします。ここは Mac と Windows で同じ手順です。
- 左端のアイコンが縦に並んだ列から、四角が4つ並んだアイコン(拡張機能)を押します。
- 検索欄に
Japaneseと入力し、「Japanese Language Pack for Visual Studio Code」のInstallを押します。 - 右下に再起動をうながす表示が出たら、それを押します。メニューが日本語になります。
続けて、保存し忘れを防ぐ設定をします。メニューの「ファイル」→「自動保存」を押して、チェックが付いた状態にしてください。これで書いたそばから保存されます。
0-3. ファイルの拡張子を見えるようにする
index.html の .html の部分を 拡張子 といいます。初期設定ではこれが隠れていて、index.html.txt のような間違ったファイルを作っても気づけません。先に見えるようにしておきます。
Mac をお使いの方
- Finder を開きます。
- 画面いちばん上のメニューから「Finder」→「設定」を選びます。
- 「詳細」タブを押します。
- 「すべてのファイル名拡張子を表示」にチェックを入れます。
Windows をお使いの方
- エクスプローラー(フォルダのアイコン)を開きます。
- 上のほうにある「表示」を押します。
- 「表示」→「ファイル名拡張子」にチェックを入れます。
Windows 10 の場合は、「表示」タブの中に「ファイル名拡張子」のチェックボックスが直接あります。
これで、ファイル名の後ろに .html や .txt が表示されるようになります。
0-4. 作業用のフォルダを作る
デスクトップに mysite という名前のフォルダを作ります。日本語やスペースを使わないのがコツです。あとで公開するときにトラブルが減ります。
Mac をお使いの方
- デスクトップの何もないところを右クリック(または control を押しながらクリック)します。
- 「新規フォルダ」を選びます。
- 名前を
mysiteに変えて enter を押します。
作れたら VS Code に戻り、メニューの「ファイル」→「フォルダーを開く」から、デスクトップの mysite を選んで「開く」を押します。
Windows をお使いの方
- デスクトップの何もないところを右クリックします。
- 「新規作成」→「フォルダー」を選びます。
- 名前を
mysiteに変えて Enter を押します。
作れたら VS Code に戻り、メニューの「ファイル」→「フォルダーを開く」から、デスクトップの mysite を選んで「フォルダーの選択」を押します。
「このフォルダー内のファイルの作成者を信頼しますか?」と聞かれたら「はい、作成者を信頼します」を押してください。左側に MYSITE と表示されればOKです。
0-5. 最初のファイルを作る
左側の MYSITE の右にある「新しいファイル」のアイコンを押して、index.html という名前でファイルを作ります。拡張子の .html まで正確に入力してください。
そこに、次の内容をそのまま書き写します。まだ自分用に変えなくて大丈夫です。 この教材では、見本として「はると」さんのサイトを作っていきます。自分の名前にするのは 0-7 でやります。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>はるとのサイト</title>
</head>
<body>
<h1>こんにちは、はるとです</h1>
</body>
</html><meta charset="UTF-8" /> の行は、日本語を正しく表示するためのおまじないです。これが抜けると文字化けします。
0-6. ブラウザで開く
Mac をお使いの方
Finder でデスクトップの mysite フォルダを開き、index.html をダブルクリックします。ブラウザが立ち上がって表示されれば成功です。
別のアプリで開いてしまったときは、index.html を右クリック →「このアプリケーションで開く」→ Safari か Chrome を選んでください。
Windows をお使いの方
エクスプローラーでデスクトップの mysite フォルダを開き、index.html をダブルクリックします。ブラウザが立ち上がって表示されれば成功です。
「このファイルを開く方法を選んでください」と出たときは、Edge か Chrome を選んでください。
白い画面に、大きな文字で「こんにちは、はるとです」と表示されていればOKです。
0-7. 書き換える → 保存 → リロード
この章でいちばん大事なのが、この繰り返しです。これから9章、ずっとこのループを回すことになります。
- VS Code に戻り、
<h1>の「はると」を 自分の名前 に書き換えます。ついでに<title>も変えてしまって構いません。 - 保存します(自動保存をONにしていれば何もしなくて大丈夫です)。
- ブラウザに戻り、リロードします。
リロードは command + R です。
リロードは Ctrl + R(または F5)です。
自分の名前に変われば、環境づくりは完了です。いちばん難しいところは、もう越えました。
ここから先も同じで、まず見本のとおりに書き写し、そのあと自分の内容に置き換えていきます。配布している章ごとのZIPは見本のままの状態なので、自分用に変えた部分が違っていても心配いりません。
変わらないときは、VS Code のタブに小さな丸印(●)が付いていないか見てください。それは「まだ保存されていない」という印です。
こうなっていればOK
うまくいかないときは、この章の完成ファイル一式(ZIP)をダウンロードして続きから進めても大丈夫です。
この章はまだ完了していません。