使用するブラウザとエディタ、画像素材の確認をしたのちに、プロジェクトフォルダを設定していきます。
使用ブラウザ、エディタの確認
ウェブページ制作に必要な環境を整えていきましょう。
必要なものは表示するためのブラウザとコードを書いていくためのエディタです。
いろいろなブラウザ、エディタがありますが今回はシンプルで使いやすいもの、ブラウザはchromeをエディタはVScodeを使っていくので準備して下さい。
VSCodeエディタのインストール方法についてはこちらの記事をご確認ください。
画像素材の確認
次にファイルに画像の素材を準備していきます。
ウェブページ制作では画像を指定していくことでそれを配置スタイリングしていきながらページ全体を整えて行くので最初にウェブ制作に必要な画像やアイコン、ファビコンなどは準備していく必要があります。
画像は作ったファイルの直下ではなくimgフォルダを作りその下に格納しておくと整理できていてわかりやすいです。
しかし、ファビコンに関してはファイルの直下で先程作ったimgと同じ階層に格納しておくといいでしょう。
プロジェクトフォルダの設定
そこまできたらVScodeでファイルを開いていきます。
VScodeを開いたらまずは新規のファイルを作っていきます。「open folder」を押すとファイルを選ぶ画面になるので先程画像を保存したファイルを選んで行きます。
そうするとエクスプローラーでファビコンとimgが入った先程のファイルが出てきます。
そこと同じ階層にHTMLのファイルを作っていきたいのでVScodeの中で新規のフォルダに「index.html」というファイル名前を付けていきましょう。
このファイルの中に文章や画像をどのように配置していくか指示していきます。
また、VScodeは編集したときに自動的に保存されるので便利な半面注意も必要なので覚えておきましょう。
また便利機能としてブラウザのタブをChromeの新規のタブの部分にドラック&ドロップをするとブラウザに表示できます。
以上
