完成版を確認したあとに、ひな形となるHTMLファイルを作っていきます。
- 完成版の確認
- 作業用フォルダの設定
- index.htmlの作成
補足情報 VS Codeで生成されるHTMLの雛形について
VS Codeで生成されるHTMLの雛形に変更があったようです。具体的には <meta http-equiv="X-UA-Compatible" content="IE=edge">
が含まれなくなりました。こちらは古いブラウザに対応するための命令でしたが、現在不要になっているので気にせずにそのまま学習を進めてみてください。
補足情報 タブの横に × 印ではなくて丸印が付いている場合
タブの横に × 印ではなくて丸印が付いている場合は、「Web制作の準備をしよう」のレッスンで行った設定がうまくいっていない可能性があります。
以下のレッスンを参考に設定を見直してみましょう。
- macOSの場合: #08 VS Codeエディタの設定をしていこう
- Windows の場合: #08 VS Codeエディタの設定をしていこう
補足情報 lang の横が ja にならない場合
『html:5』と打ち込んだあとの雛形で、 lang の横が en になっていない場合、「Web制作の準備をしよう」のレッスンで行った設定がうまくいっていない可能性があります。
以下のレッスンを参考に設定を見直してみましょう。
- macOSの場合: #08 VS Codeエディタの設定をしていこう
- Windows の場合: #08 VS Codeエディタの設定をしていこう
素材ファイルをダウンロードするにはプレミアムプランへの登録が必要です
詳しくみるソースコードを閲覧するにはプレミアムプランへの登録が必要です
詳しくみるデモを閲覧するにはプレミアムプランへの登録が必要です
詳しくみる
補足情報 VS Codeでファイルのドラッグ&ドロップができない場合
VS Codeのバージョンアップにより、index.htmlのタブをブラウザへドラッグ&ドロップできなくなったようです。代替手段として、下図のようにサイドバーにてファイル一覧を開き、そこからドラッグ&ドロップするようにしてください。
それでもうまくいかない場合は、Chromeブラウザを選択した状態で、WindowsならCtrlキー、macOSならcommandキーを押しながら、英語のoキーを押すと、ファイルを選択できるようになります。そこからファイルを開いても OK です。