DAY4.HTML/CSS基礎編 環境構築

01.VS Codeのプラグインをインストール

1.おすすめプラグイン

LiveServer
簡易ローカルサーバーを起動し
HTMLやCSSの更新を検知してライブプレビューする

Autoprefixer
各ブラウザでCSS3を正常に動作させるための記述
ベンダープレフィックスを自動で記入

Code Spell Checker
コードのスペルミスを教える

Auto Rename Tag
開始タグを修正したとき、終了タグも修正

CSSTree validator
HTMLとCSSのコード検証

HTML CSS Support
CSSの補完をしてくれます。

IntelliSense for CSS class names in HTML
CSSのクラス名/id名を入力補完する

Bracket Pair Colorizer
ペアになる ( ) や { } に色をつけて分かりやすくなる

zenkaku
コード中の全角スペースを教える

Code Time
プログラミング時間のログを自動でつける

02.ファイルを自動保存する設定

①上部メニューから「設定」を選ぶ
　Macの場合は【Command 】+【,】
　Windowsの場合は【Ctrl 】+【,】

②検索窓に「autosave」を入力

③セレクトボックスから「afterDelay」を選ぶ

off：自動保存されない
afterDelay：一定時間操作がなかったら保存
onFocusChange：タブからカーソルが消えた時点で保存
onWindowChange：ウィンドウを切り替えた時点で保存

03.Live Serverの使い方

変更がリアルタイムに反映される

STEP1：HTML、CSSの入っているフォルダをVS Codeで開く

STEP2-1：下のツールバーにあるGo Liveをクリックする
STEP2-2：ショートカットで起動する
Mac編
Command + L を押してから Command + O で起動
Command + L を押してから Command + C で終了
Windows編
Alt + L を押してから Alt + O で起動
Alt + L を押してから Alt + C で終了
STEP2-3：対象のHTMLファイルを右クリックして
「Open with Live Server」を選択する

Live Server起動時に必ずChromeで開く方法
STEP1：Liveserverの設定をクリック
STEP2：Custum Browserを探して
STEP3：chromeを選択

04.Chromeの検証を使うことに慣れる

Chromeの検証機能はプログラマーにとって必要不可欠

デザインの変更を確認
:hoverや:activeなどの擬似クラスをあてた際の挙動を確認
レスポンシブ表示した際の見え方を確認

コーディングするときは検証画面を開いて確認しながら進める

05.Emmetを理解

EmmetとはHTML/CSSの超強力な入力補完プラグイン
VS Codeは標準でEmmetがついている

1.EmmetでHTMLを記述

要素＋Tab が基本
要素＞要素 で階層を指定
要素＊数字 で複製
要素＋要素 で隣接
「>」「+」「*」の組み合わせ

2.EmmetでCSSを記述

プロパティの頭文字 + Tab が基本

dib　display: inline-block;
bg#000　background: #000000 ;
c#000　color: #000000 ;
fz16　font-size: 16px;
w150　width: 150px;
p10　padding: 10px;
mb1e　margin-bottom: 1em;
p8-12-8-12　padding: 8px 12px 8px 12px;
bd+　border: 1px solid #000 ;
bsh0-0-3-0#000　box-shadow: 0 0 3px 0 #000000 ;
bdrs4　border-radius: 4px;
psr　position: relative;
psa　position: absolute;
tac　text-align: center;
tf　transform:
trs　transition:

上手く変換できないプロパティが出てきたらチートチートで即確認