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

それっぽい環境がととのったぞい

次回もお楽しみに