![見出し画像](https://assets.st-note.com/production/uploads/images/161913385/rectangle_large_type_2_e8081a464fb1b0e508b1e8bb12bc034a.png?width=1200)
50代からのHTML / CSS / JavaScriptチャレンジ番外編 No.5 VScodeの拡張機能
今日はvscodeの拡張機能について学習します。まずは、簡単なWebサイトを作ってみる。まずは、新規フォルダーを作成して、新規ファイルを作成して、index.htmlという名前で保存する。
![](https://assets.st-note.com/img/1716989632268-2Rmiz6h45v.png)
前回使ったemmetを使って、!マークを押してタブキーをおす。
![](https://assets.st-note.com/img/1716989691568-dQzjz9jOQH.png?width=1200)
もうこれだけで、htmlの基本パターンが入力されちゃうんだよねぇ凄いよなぁ(笑)注意するのはemmetを使って入力すると、英語になっちゃうからlang="en"のところをlang="ja"に変更しておく。一応タイトルを"My Site”としておく。h1タグをbodyタグ内にかいて、こちらもMy Siteとしておく
![](https://assets.st-note.com/img/1716989911115-uIPE0uLQjS.png?width=1200)
サイトの確認
今までだったら、このファイルをブラウザーにドラッグ&ドロップするとか、直接ダブルクリックで開くとかしてたと思うけど、(実際にしてたけどね^^;)vscodeには、拡張機能というのがあって、楽にプレビューを行うことができるらしい。左側のツールバーのようなところから拡張機能を選ぶ。検索窓で、Live serverと検索。インストールをする。すると、vscodeの右下にGo Liveとあるので、それをクリック。するとブラウザーで今作ったMy SiteのWebページが表示される。
![](https://assets.st-note.com/img/1716990313709-OuAK1L6wWQ.png?width=1200)
なんか色々調べて拡張機能入れてしまった^^;なんか便利そうなんだもん^^;
![](https://assets.st-note.com/img/1716990365037-QGfPqSLjHe.png?width=1200)
ちなみに、便利なことに、h1タグで囲んだMy SiteをMy Homepageと直してみる。
![](https://assets.st-note.com/img/1716990499526-oznPtyB7UP.png?width=1200)
保存して、ウェブページを開くとMy Homepageになってる
![](https://assets.st-note.com/img/1716990553151-MX4Sj2dvxy.png?width=1200)
htmlの内容が変わると、すぐに反映されるんだよねぇ。まぁ、不要になった拡張機能は見ればわかるけど、アンインストールもできるからね、
![](https://assets.st-note.com/img/1716990734496-h1SVdvw6PA.png?width=1200)
他にもあるんだろうけど、vscode初心者はゆっくり学習しますわ^^
いいなと思ったら応援しよう!
![mitchy](https://assets.st-note.com/production/uploads/images/20246307/profile_9807a040331f369c8d4fda9682616fce.jpeg?width=600&crop=1:1,smart)