初めてのHTMLの前準備と導入(VScodeの導入)
こんにちは
ユキです。
遂に、symbolがローンチされるということで、自分もなんかsymbolかnem使って作りたいなあと思ったので、
HTMLの勉強を始めました。
参考にさせていただいたのは、先週紹介していただいた、モヒカンさんが以前やっていたHTML講座がありましたので、それで学習していきたいと思っています。
今回は、初めてのHTMLの前準備ということで、まずは、HTMLをやる為に、VScodeを、自分のパソコンに導入しましたので、
そのメモを書きます。
まあ、HTML自体は、本当は、初めてではないんですけどねw
数年に一度のレベルで、たまにhtmlやjavascriptを使って、何かしらやりたくなるんですが。
その後、全然触らないので、次にやるときはすべて忘れているという・・・
元々はAtomというエディタを使っていたのですが。
今回は、HTMLをやるのにVScodeという、エディタが便利だというので、導入してみました。
HTMLなどを書くだけであれば、メモ帳があればできるのですが、このVScodeを使うことにより、より簡単にHTMLなどのプログラムを書くことが出来るのです。
いわゆる便利ツールだと思ってます。
今回やったこと。
(1) VScodeのダウンロード
(2) HTML、CSS、Javascript用のファイルの作成
(3) プラグインのインストール
(4) 動画を参考にコードを書いてみる
(1) VScodeのダウンロード:
下記動画を参考に、自分のPCにダウンロードします。
https://www.youtube.com/watch?v=e3DmHK2PDGA
この動画の手順通りに、設定をしていきます。
まあ、殆ど設定とかなくて、プラグインを導入しただけですが。
この動画では、index.htmlを作成していますが。
cssや、javascriptのファイルも後々必要になるので、最初に作成しておきます。
自分的に簡単な方法としては、
ファイルを作成する→メモ帳を開く→名前をつけて保存→index.htmlの名前にして、作成したファイルに保存→これを3つに複製する。→ファイルの名前をcss.styleとsample.jsに変更する。 →VSコードを起動する。 → ファイル → フォルダーを開く
という風にやっています。
このファイルを、基本フォルダーとして置いておき、次に他のプログラムを作りたいときに、コピーすれば、基本的なファイルを用意できるので、簡単に下準備が出来るようになります。
ワークスペースに追加することにより、複数のファイルを開けるようにも出来ます。
やり方の動画:
https://www.youtube.com/watch?v=ZROXjpaJv3I
プラグインは、下記プラグインを追加しました。
プラグインの追加の仕方は上記動画と同じで、下記名前を検索します。
このプラグインは下記サイトを参考に、とりあえず適当に入れました。
プラグイン参考サイト:
入れたプラグイン:
導入:
emmet
html hint
html snippets
html css support
IntelliSense for CSS class names in HTML
open in browser
zenkaku
CSSTree validator
Japanese Language Pack for Visual Studio Code
html preview
ここまでやれば、下準備が完了です。
後は、作成したindex.htmlに下記動画を参考にhtmlのプログラムを書いていきます。
今回は、nemlogを作ったモヒカンしゅうさんが、初心者のための動画をあげていたので、それで基本的な部分をおさらいしました。
https://www.youtube.com/watch?v=2A0zQNmcOv0
これで分からない場合、昔は、ドットインストールというサイトを使って、htmlを勉強したことがあり、
そこがとても分かりやすかったので、お勧めです。
来週は、この第一回で出ている宿題をやれたらいいなと思っています。