HTML&CSSの勉強どっからはじめればいいのかわからんぞ
「webページ自分でコーディングしてみたい」とか「特にやりたくはないけど仕事でやらなきゃいけない」でも、「とっかかりがわからない」そんな人のための「超初心者講座」です。
なので、経験者には向いていないので、このシリーズは読まなくていいです。
ひとまずコーディングの準備をしよう
HTMLのコーデイングは普通のテキストエディタでもできるよ。
でもさ、専用のエディタがあるからそれを使おうよ。それっぽいインターフェースだし、気分を高めよう。
他にもエディタはいっぱいあるけど、無料だし機能拡張もいっぱいあるから、この講座ではVSCodeを使って行こうと思う。今後VSCodeが入ってることを前提な話も出てくると思う。
VSCodeのインストール
VSCodeをここからダウンロードしてインストールしよう。
VSCodeの日本語化
そのままだと多分英語だしとっつきづらいかなって思うので、「日本語化」しましょう。
VSCodeの日本語化プラグインをここからインストールしてみよう。
↑これを入れてVScodeを再起動すれば日本語化されていると思うよ。
その他おすすめのプラグイン
VSCodeはいろいろプラグインがあって機能が拡張できるぞ。
いっぱいあるから選べないよね。だからこれを入れとけばいいよってやつをピックアップしました。
Live Server
簡易的なローカルサーバが1clickでたてれるぞい。
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Live Sass Compiler
保存すればscssコンパイルしてくれるぞい。
https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
HTML Snippets
htmlコードを予測変換してくれるぞい
https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets
Insert < br > Tag
Shift+Enter で <br> 入れてくれるぞ
https://marketplace.visualstudio.com/items?itemName=1natsu.insert-br-tag
indent-rainbow
インデントに色をつけてくるから親子関係がみやすいぞい
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
Material Icon Theme
ファイルとかフォルダーをそれっぽいアイコンで表示してくれるぞい
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
Auto Close Tag
始まりのタグ入れれば閉じタグ精製してくれるぞい。（たまに煩わしい）
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
Beautify css/sass/scss/less
cssとかscssとかに色をつけてみやすくしてくれるぞい。
https://marketplace.visualstudio.com/items?itemName=michelemelluso.code-beautifier
Bracket Pair Colorizer 2
() {} の始まりと終わりに色をつけてくれるからわかりやすいぞい
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
Auto Rename Tag
始まりでも終わりでもタグを編集すればどちらも書き換わるぞい。（これもたまに煩わしい）
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
それっぽい環境がととのったぞい
次回もお楽しみに