環境構築をしよう！初級編

Webアプリ開発コース初級編

WEBサイトとミニアプリを作れるようになろう

HTML・CSS基礎編

DAY 4

環境構築をしよう！

さて、これまでHTMLとCSSの基本を学んできました。
これから本格的なコーディングを始めるため、環境構築を行っていきます！

TIPS

01.VS Codeのプラグインをインストールしよう！

VS Codeにはより便利に使うためのプラグインがたくさんあります。その中でも特におすすめのプラグインを厳選したので、まずはこれをインストールしてください！
下のリンクから「Install」をクリックした後、VS Codeで「Install」を押せばOKです！

VS Codeオススメプラグイン一覧

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

Japanese Language Pack for Visual Studio Code
VS Codeの操作画面を日本語対応してくれます。

Autoprefixer
各ブラウザでCSS3を正常に動作させるための記述（ベンダープレフィックス）を自動で記入してくれます。

Code Spell Checker
コードのスペルミスを教えてくれます。

Auto Rename Tag
開始タグを修正したとき、終了タグも修正してくれます。

CSSTree validator
HTMLとCSSのコード検証をしてくれます。

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

HTMLHint
HTMLの記述で問題がある箇所を教えてくれます。

Bracket Pair Colorizer
ペアになる ( ) や { } に色をつけて分かりやすくしてくれます。今から導入する方は以下を参考にVS Code標準のものを導入してください。
→ VS Code標準搭載の括弧色付

Color Highlight
色の指定した部分に該当の色でハイライトしてくれます。

zenkaku
コード中の全角スペースを教えてくれます。

Trailing Spaces
文末の半角スペースを教えてくれます。

Code Time
プログラミング時間のログを自動でつけてくれます！モチベアップ！

これらのプラグイン（拡張機能）を入れると、テキストエディタ側でコーディングを補佐してくれるようになるので、ミスが減り効率倍増です！

唯一「Code Time」はコーディングに直接役立つプラグインじゃありませんが、モチベアップにはつながるはず。VS Codeを開いてコード書いてた時間を自動で記録し、ヒートマップにして見直したりもできるので「こんなに勉強したのか」と成長の足跡を実感できるはずです^^

ちなみに採用担当者にとって「学習時間」は分かりやすくその人の本気度や自走力を測れる目安になるので、転職活動の際にも役に立ったりします。転職志望の方は、何をどれくらい勉強したか、必ず学習ログをつけておきましょう！

すべてのプラグインを入れ終わったらVS Codeを再起動してください。

02.ファイルを自動保存するようVS Codeの設定を変えよう

コーディングしたファイルの変更を反映するには、「command + s」もしくは「Ctrl + s」で変更を保存する必要があります。今まで皆さんもそうやってHTML/CSSを書いてきたはずです。

これを、いちいち自分で保存しなくても自動保存されるように設定します！

設定方法

上部メニューから「設定」を選ぶ（Macの場合は【Command】+【,】、Windowsの場合は【Ctrl】+ 【,】のショートカットでも開きます！）
検索窓に「autosave」を入力
セレクトボックスから「afterDelay」を選ぶ

ちなみに自動保存の設定は皆さんが一番感動するであろう「afterDelay」にしましたが、お好みで変えてもらってOKです。

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

選択したら、再度VS Codeを再起動しておきましょう！

03.Live Serverの使い方

たくさんのプラグインを入れましたが、ここでは使うのに少し手順が必要になるLive Serverをの使い方を説明します！

Live Serverとは簡易ローカルサーバーを起動し、HTMLやCSSファイルの更新をライブプレビューできるようにするプラグインです。
先ほど設定したファイルの自動保存と合わせて使うことで変更がリアルタイムに反映されるので気持ちいいです！きっと感動すること間違いなし！

また、もし「Live Serverが上手く動かない！」ということがあれば↓のQ&Aを参照してください！
よくあるトラブルと対処法をまとめています！
Live Serverに関するトラブル

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

練習中の今は「practice」フォルダですね。フォルダごとVS Codeのアイコンにドラッグ&ドロップすると開けます。

次にLive Serverを起動させていくんですが、起動の仕方は3パターンあるのでこのどれかを使ってください！

STEP2-1：下のツールバーにあるGo Liveをクリックする

Windowsだとアクセス許可の確認が出てくるかもしれませんが、そのときは許可しましょう。

STEP2-2：ショートカットで起動する

Live Serverを起動するためのショートカット

Mac編
Command + L を押してから Command + Oで起動
Command + L を押してから Command + Cで終了
Windows編
Alt + L を押してから Alt + O で起動
Alt + L を押してから Alt + Cで終了

STEP2-1の「Go Live」がうまく表示されない時にもこのショートカットを試してみてください！

STEP2-3：対象のHTMLファイルを右クリックして「Open with Live Server」を選択する

index.htmlを右クリックして「Open with Live Server」選択しましょう。
そうするとChromeでindex.htmlが開かれます。

上記のいずれかの方法でLive Serverを起動しましょう！オススメは2-1か2-2です！

コードの変更がリアルタイムでブラウザで見れるようになるので、開発が圧倒的に捗りますよ〜！

なお、サーバーを立てているとPCに負荷がかかるので、使っていないときはこまめに停止しておきましょう！

Live Server起動時に必ずChromeで開く方法

こちらの設定をしておくと、仮にPCの規定ブラウザを変更しても、Live Server起動時には必ずChromeが開かれるようになります。

ぜひ設定しておきましょう！

04.演習でLive Serverの威力を実感しよう！

さて、Live Serverを入れたらさっそく使ってみたくありませんか？
そこでHTMLとCSSの復習も兼ねて↓の5ステップに挑戦してみましょう！

DAY3でデスクトップに作った「practice」フォルダをVS Codeで開き、Live Serverを起動する
以下に用意したHTMLコードをindex.htmlにコピペ
h2のテキストを「デイトラ4日目達成！」に変更
h2の文字色を赤に変更
test.pngのwidthを300px、heightをautoに変更
test.pngにhoverしたとき、opacityが0.7になるようCSSに追記

HTMLは以下のコードをコピペしてベースにしてください！

コピー<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Live Serverの演習</title>
  <!-- ここでstyle.cssを読み込みます -->
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <!-- ここにHTMLを書いていきます -->
  <h2>この文字を変えよう！</h2>
  <img src="./img/test.png">
</body>
</html>

2点だけCSSの補足をしておくと、hoverは擬似要素と呼ばれるものの一種です。「その要素の上にカーソルが乗っている場合のスタイルを定義する」ときに使います。擬似要素もこれからたくさん使うので、ぜひどんなものがあるのか調べてみてくださいね！

コピー要素名:hover { プロパティ名:バリュー; }

また、opacityは透明度を表すプロパティです。1だとそのままで、0に近づくほど完全な透明になっていきます。
ちなみにopacityは日本語で「不透明度」という意味なので、値が大きいほど「不透明（透明ではない）」状態になります。なんで「透明度」にしなかったのw

話を戻しますが、hoverと合わせて使う時は、

コピー/* リンクの上にマウスが置かれたときに色を少しだけ薄くする */
a:hover { opacity: 0.7; }

のように使います。マウスをホバーした時、少しだけ色を薄くすることで「このテキストはリンクで、押せるんですよ！」というアピールになりますね。

それでは実際に上の1～5ステップをやってみましょう！魔法みたいで感動するはずですw
書いたコードがリアルタイムにブラウザに反映されていくのが体験できればOKです！

05.Chromeの検証を使うことに慣れよう！

開発環境が整ったので、これから本格的にChromeの検証機能も使っていきましょう！

Chromeの検証機能はプログラマーにとって必要不可欠なものなんですが、HTML/CSSのコーディングに限っても

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

など様々な場面で使います。

繰り返しになりますが、コーディングするときは検証を開いて確認しながら進めるクセをつけましょう！

サルワカさんの説明がわかりやすいので、こちらを見て使い方をざっくり把握してください↓
初心者向け！Chromeの検証機能（デベロッパーツール）の使い方

だいたい使い方が分かったら、次のステップを実行してみましょう。

VS Codeで『Practice』フォルダを開き、Live Serverを起動する
Google Chromeで検証を開く
検証画面からh2の文字サイズを36pxに変更
検証画面からh2の文字色を青に変更
検証画面からtest.pngのホバー時のopacityを0.1に変更
検証画面からiPhoneXのサイズでindex.htmlを見てみる（とりあえず見るだけでOK）

ちなみにChromeの検証で変更したソースコードはそのままファイルに保存することができます↓

参考サイト

05. 変更したCSSをファイルに保存

さらに「CSSが思うように効かない」という時は、検証からセレクタをコピーするとラクです！複雑なHTMLの中でも、これを使えば一瞬で目的の要素を指定することができます。

【コーディング初心者のためのTips】
Chromeの検証から要素のセレクタをコピーできるって知ってました？
HTMLがごちゃごちゃして複雑なページでも、これを使えば一瞬で目的の要素を指定できます✅
「なぜかCSSが効かないなぁ…」って時も、セレクタの記述ミスならこの方法で秒で解決です👍 pic.twitter.com/Ob0g9iViiJ
— ショーヘー@バンコク🇹🇭 (@showheyohtaki) 2019年1月18日