VScodeの導入
<p>こんにちは<br />ユキです。</p>
<p> </p>
<p>遂に、symbolがローンチされるということで、自分もなんかsymbolかnem使って作りたいなあと思ったので、<br />HTMLの勉強を始めました。</p>
<p><br />参考にさせていただいたのは、先週紹介していただいた、モヒカンさんが以前やっていたHTML講座がありましたので、それで学習していきたいと思っています。</p>
<p> </p>
<p>今回は、初めてのHTMLの前準備ということで、まずは、HTMLをやる為に、VScodeを、自分のパソコンに導入しましたので、そのメモを書きます。</p>
<p> </p>
<p>まあ、HTML自体は、本当は、初めてではないんですけどねｗ <br />数年に一度のレベルで、たまにhtmlやjavascriptを使って、何かしらやりたくなるんですが。<br />その後、全然触らないので、次にやるときはすべて忘れているという・・・</p>
<p> </p>
<p>元々はAtomというものを使っていたのですが。<br />今回は、HTMLをやるのにVScodeが便利だというので、導入してみました。</p>
<p><br />HTMLなどを書くだけであれば、メモ帳があればできるのですが、このVScodeを使うことにより、より簡単にHTMLなどのプログラムを書くことが出来るのです。</p>
<p> </p>
<p> </p>
<p>今回やったこと。<br />(1) VScodeのダウンロード<br />(2) HTML、CSS、Javascript用のファイルの作成<br />(3) プラグインのインストール<br />(4) 動画を参考にコードを書いてみる</p>
<p> </p>
<p> </p>
<p>この動画の手順通りに、設定をしていきます。<br />まあ、殆ど設定とかなくて、プラグインを導入しただけですが。</p>
<p> </p>
<p>この動画では、index.htmlを作成していますが。<br />cssや、javascriptのファイルも後々必要になるので、最初に作成しておきます。</p>
<p> </p>
<p><span style="color: #ff00ff; font-size: 16pt;">(2) HTML、CSS、Javascript用のファイルの作成</span></p> <p>自分的に簡単な方法としては、<br />ファイルを作成する→メモ帳を開く→名前をつけて保存→index.htmlの名前にして、作成したファイルに保存→これを3つに複製する。→ファイルの名前をcss.styleとsample.jsに変更する。 →VSコードを起動する。 → ファイル → フォルダーを開く <br />という風にやっています。</p>
<p><br />このファイルを、基本フォルダーとして置いておき、次に他のプログラムを作りたいときに、コピーすれば、基本的なファイルを用意できるので、簡単に下準備が出来るようになります。</p>
<p> </p>
<p> </p>
<p> </p>
<p><span style="color: #ff00ff; font-size: 16pt;">(3) プラグインのインストール</span><br />プラグインは、下記プラグインを追加しました。<br />プラグインの追加の仕方は上記動画と同じで、下記名前を検索します。<br />このプラグインは下記サイトを参考に、とりあえず適当に入れました。</p> <p> </p>
<p>入れたプラグイン：<br /> ・emmet<br /> ・html hint<br /> ・html snippets<br /> ・html css support<br /> ・IntelliSense for CSS class names in HTML<br /> ・open in browser<br /> ・zenkaku<br /> ・Auto Rename Tag<br /> ・CSSTree validator<br /> ・Japanese Language Pack for Visual Studio Code<br /> ・html preview</p>
<p>ここまでやれば、下準備が完了です。</p>
<p> </p>
<p><span style="font-size: 16pt; color: #ff00ff;">(4) 動画を参考にコードを書いてみる</span><br />後は、作成したindex.htmlに下記動画を参考にhtmlのプログラムを書いていきます。<br />今回は、nemlogを作ったモヒカンしゅうさんが、初心者のための動画をあげていたので、それで基本的な部分をおさらいしました。<br /><iframe src="https://www.youtube.com/embed/2A0zQNmcOv0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p> <p> </p>
<p>これで分からない場合、昔は、ドットインストールというサイトを使って、htmlを勉強したことがあり、<br />そこがとても分かりやすかったので、お勧めです。</p>
<p> </p>
<p>下記記事に、全体のまとめがされているので、参考までに：</p>
<ul id="Ss4Wbe_ContentScript_QuickSearch_QuickSearchContainer" style="display: none;">
<li id="Ss4Wbe_ContentScript_QuickSearch_QuickSearchContainer_Head">SmaSurf クイック検索</li>
</ul>
![https://images.weserv.nl/?w=100&url=ssl:s3-ap-northeast-1.amazonaws.com/nem-social/blog/50000/56000/56200/56258/logo/logo.png?2021031407"](https://images.weserv.nl/?w=100&url=ssl:s3-ap-northeast-1.amazonaws.com/nem-social/blog/50000/56000/56200/56258/logo/logo.png?2021031407"){kind=link}