#02 [HTML&CSS 超超超初心者講座 - 2020 - ] さらっとVScodeの使い方とhtmlとcssの基本

[VSCode]:https://azure.microsoft.com/ja-jp/products/visual-studio-code/
[entry01]:https://qiita.com/hiroyukiyamamoto-ptp/items/fd3b033ddc2da00bb6c5
[entry02]:https://qiita.com/hiroyukiyamamoto-ptp/items/2c41a4704cbf70c6e8ff

# 環境整ったしまずはVSCodeの使い方

はやく、コーディングの勉強始めたいなって思ってるかもしれないけど、まずは、[前回][entry01]入れてもらった[VSCode]の使い方をさらっとお勉強。

知ってる人は読まなくてもいい。

## ワークスペースの確保

[VSCode]には「ワークスペース」っていう概念があります。
作らなくてもいけるけど、つくると後々幸せになれるぞ。

### 1.とりあえず `新規ファイル` を作ってみよう。

`ファイル` から `新規ファイル` を選択すると、 `Untitled-1` みたいなのが出てくると思う。

```
/* アクション */
ファイル > 新規ファイル

/* 結果 */
Untitled-1 ができる
```

### 2. `Untitled-1` を `保存` してみよう。

`ファイル` から `保存` を選択すると、ファイルを保存する場所を指定して、ファイル名付けて保存できる。

任意の場所に `超超超初心者講座` ってフォルダ作って、その中に `site` ってフォルダ作ろう。
フォルダ名はなんでもいいよ。好きに作るといい。

`Untitled-1` の名前を `index.html` にしよう。
ファイル名はなんでもいいけど、とりあえず `index.html` にしておこう。
なんで、 `index.html` なのかは後ほど。

```
/* アクション1 */
ファイル > 保存

/* アクション2 */
新規フォルダ（名前 : 超超超初心者講座） > 新規フォルダ（名前 : site）
ファイル名をつける（名前 : index.html） 

/* 結果 */
超超超初心者講座
  └ site
    └ index.html
```

### 3. `ワークスペース` を作ってみよう

`ファイル` から `名前をつけてワークスペースを保存…` でワークスペースを `beginner.code-workspace` って名前で `index.html` と同じところに保存しよう。


```
/* アクション1 */
ファイル > 名前をつけてワークスペースを保存…

/* アクション2 */
ファイル名をつける（名前 : beginner.code-workspace） 

/* 結果 */
超超超初心者講座
  └ site
    ├ beginner.code-workspace
    └ index.html
```

### 4. `ワークスペース` を開いてみよう

左のファイルアイコンから `フォルダを開く` をクリック

![ワークスペースの指定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613155/27b4ffba-85af-066d-40a2-97e7eda1a80e.png)

さっき作った`site`フォルダーを指定して開いてみよう。

![ワークスペースの設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613155/16c8c5e7-9422-5db9-4682-62ed3a87ea15.png)

こうなったらOK

### 5. `ワークスペース` が開けたぜ。

これで、ワークスペースが設定できたよ。

### 6. `ワークスペース` を再度開く。

次回開く時は、`ファイル` から `ワークスペースを開く…` で  `beginner.code-workspace` を選んで開けば `ワークスペース` が開けるぞ。
 `beginner.code-workspace` ファイルをダブルクリックでも開けるとおもう。

## 環境はばっちりととのったし、ちょびっとHTMLとCSSを書いてみようぜ

###最初は `index.html` にこれを書いてみよう

じゃあ `index.html` に以下のマークアップをコピペしてみよう。手で書いてもいいぞ。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTMLの基本構成</title>
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
```

これが、htmlの最低限の記述だよ。各タグの解説は次回します。
[前回][entry01]の講義で[HTML Boilerplate](https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate)入れた人は、 `html:5` って書いて `return` を押したら、ある程度補完してくれるよ。べんりだね。上記マークアップを見て違うところとか、足りないところを修正しようね。

###次はローカルホストを立ててHTMLをプレビューしようぜ

ロ、ローカルホストって、なに？

今は深く考えなくていい。[前回][entry01]の講義で[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)を入れたと思う。そしたら、ウインドウの右下に `Go Live` ってあるから、そこを押してみよう。
これは、ワークスペース内にhtmlファイルがないと出てこないぞ。

![Live Server](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613155/3f4674d4-fc4c-edfd-49c0-b2585d245cd8.png)

`Go Live` 押したらブラウザが立ち上がって「Hello world」って表示されると思う。

![Hello world](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613155/d04b4f00-1420-0a4a-f6e7-53225b23468f.png)

↑こんな感じに表示されると思う

じゃあ、`<h1>Hello world</h1>` を `<h1>Hello Qiita</h1>` に変えて保存してみよう。そうするとプレビューのブラウザも変わってくれるぞ。

![編集してみよう](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613155/2c60b3e3-2aae-337e-6af3-9e1f082bae7f.gif)

便利な気がしてきたかな？

###次は `style.css` ファイルを作ろう

`style.css` を `index.html` と同じレベルにおいてもいいけど、今後のことも考えて、`assets`フォルダの中に`css`フォルダを作って、その中に `style.css` を作ろう。

```
超超超初心者講座
  └ site
    ├ assets
    │ └ css
    │   └ style.css
    ├ beginner.code-workspace
    └ index.html
```

VSCode上ではこんな見た目になると思う

![cssの追加](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613155/590f825d-7d8f-ea3a-e13b-40726de60f82.png)

### `style.css` ファイルをリンクさせよう

`index.html` に `style.css` をリンクしよう。

リンクさせる時はこんな感じで書く。

```html:index.html
<link rel="stylesheet" href="/assets/css/style.css">
```

どこに書けばいいのかというと、`<title>`の下に追加しよう。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTMLの基本構成</title>
  <link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
```

これで、`style.css` がリンクされました。

### さらっとスタイリングしてみよう。

では、実際にスタイリングしてみよう。

`style.css` で `<h1>` のスタイリングしてみよう。

```css:style.css
h1 {
  color: #ff0000;
}
```

って書いて、保存したらブラウザの方のプレビューの文字色が赤くなると思う。

## おめでとう君はマークアップとスタイリングができたぞ

基本的に、マークアップとスタイリングはこれの繰り返し。
簡単な気がしてこない？

次回もお楽しみに

## [コラム] なんで `index.html` なの？

今日作った `index.html` だけど、なんで `index` なのかと言うと。

基本的にHTMLはもともと「文書」として、発展してきたものだから、慣例的に `index.html` と名付けたファイルを最初の索引（INDEX）として、表示してきました。

各フォルダ（ディレクトリ）の `index.html` がそのディレクトリの最初のページって認識されます。