VS CodeとChromeを使ってindex.htmlファイルを作る。
- VS Code
- Chrome
- index.html
VS Code
・前回IntersectionObserverAPI(インタレセクションオブザーバー)とは何かと言うようなお話をしてきました。
・今回は具体的にどうやってIntersectionObserverAPIを使っていけばいいのかについて学んで行こうと思います。
・今回は準備段階としてエディターであるVS CodeとブラウザーのChromeを用意しVS Code で基本となるファイルであるindex.htmlを作っていきたいと思います。
・まずはVS Codeをダウンロードしていきましょう。
・ダウンロードはこちらからどうぞ↓
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
・こちらはプログラムやコードを書いていくために使うエディターです。無料て使うことができ、使い勝手も申し分ないエディターです。
Chrome
・次にブラウザーの準備が必要です。
・ブラウザはプログラムしたコードを正常に動くかどうか表示してくれます。
・また今回の場合は、デベロッパーツールも使っていきますので対応したものを準備します。
・おすすめはChromeがいいでしょう。
・グーグルが用意するブラウザなので使い勝手はトップクラスです。
・ブラウザーは単純にいつでも使えるように画面に出しておけばおｋです。
index.html
・ではファイルを作っていきます。
・先程用意したVS Codeを起動していきましょう。
・起動ができたら左上のアイコンをクリックしてフォルダーを開いていきましょう。
・フォルダーを開いたら特定のフォルダーを開くことでプログラムの編集をすることができます。今回は初めてを想定しているので『新規フォルダ』をクリックしましょう。
・新規フォルダを押すと名前をつける画面になるのでわかるように名前をつけていきます。今回はIntersectionObserverを理解するための練習なのでIntersectionObserverと名前をつけていきます。
・そうすると編集画面ができますのでこの中にHTML，CSS，JavaScriptなどを書いていけばいいですね。
・まずはHTMLを書くためにファイルを作って行きます。
・左上のアイコンの中に名前をつけてファイルが入っているのでその中の『新しいファイルを作成』をクリックしてファイルを作っていきます。
・ファイルの名前は『index.html』とつけていきましょう。
・これは定型文でこのファイルが無いとワードプレスなどにアップしてもファイルが読み込めないのでindex.htmlは必ず作るようにしましょう。