HTML&CSS ブラウザへの反映方法

# 概要
プログラミン初心者は、最初の学習としてProgateから入る方も多いかと思います。
Progateは環境構築なしでコーディングが出来るため、勉学のハードルが低くて良いですよね
ただ、一通りProgateでの学習が終了し、もう一段上の学習を始めるとなると、ブラウザやエディターを使っての学習が必須になってきます。
エディターを入れたけど、その後どうするの？など、初学者が知りたいであろう箇所を記事にまとめたいと思います。

# HTMLとCSSの準備
今回は``Visual Studio Code``、通称``vscode``というエディターを用いた例を紹介します。

#### 各種ファイルの準備
今回はブラウザに自身の作業を反映させるまでの過程にフォーカスをするため、これから作るHTMLとCSSファイルは説明がしやすいようにデスクトップに作成してください。

##### HTMLファイルの準備
![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3332842/b6befb3a-4ad0-0047-1325-c834f9188ffb.png)
* vscodeを立ち上げた後、``⌘＋N``のショートカットキーか、オレンジ丸内の``新しい無題のテキストファイル``をクリックで新規ファイルを作成します。

* ``Untitled-1``というファイルが出てきます。そのファイルにいる状態で``Shift+command+S``のショートカットで**新規別名保存**をしましょう。今回は``index.html``というファイル名にします。
:::note info
HTMLファイル作成時の拡張子は``.html``になります。
:::

##### DOCTYPE宣言

![スクリーンショット 2023-06-02 10.33.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3332842/1a37b587-e23f-f0f1-5345-842a0826d26a.png)

* 続いて``DOCTYPE宣言``です。DOCTYPE宣言とは**作成するファイルのHTMLのバージョンをブラウザに伝えるものです**。

* やり方としてvscodeでは補完機能が付いているので、``!``を何も無い空の状態に打ち込み``tab``を押します。そうすると上図のように一気に``head``タグ内に必要な情報が打ち込まれた状態になります。

##### CSSの準備
* 続いてCSSファイルの準備になります。HTMLファイルを作ったのと同じ手順で``style.css``というファイルを作ります。
![スクリーンショット 2023-06-02 10.59.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3332842/96723cee-bfba-27b7-9279-81d969d5f525.png)
:::note
先ほど同様、``.css``はCSSの拡張子になります。
vscodeではHTMLファイルはファイル名の前に``<>``、CSSは``#``がつきます。
そちらでしっかり拡張子の記述が出来ているか確認しましょう。
:::

##### CSSでの宣言

* HTMLで行った宣言とCSSは異なり、非常に簡単で、下記コードを1行目に記載します。

```
@charset "UTF-8";
```
こちらからCSSの記述を開始出来ます。

##### HTMLとの連動

CSSファイルも用意出来たので、HTMLファイルと連携していきましょう。

* HTMLファイルにて先ほど記述した宣言の中の``title``の真下の行に以下のコードを打ちます。
```
<link rel="stylesheet" href="style.css">
```

:::note
href=``"style.css"``の部分はご自身で任意に別の名前を設定していたら、そちらのファイル名を打ちましょう。``Practice.css``で要したのであれば **href=Practice.css** のようになります。
:::

:::note warn
両ファイルともデスクトップへの保存を前提としているため、**href=ファイル名.css**　で記述が完了していますが、保存ディレクトリが異なる場合は**href=ディレクトリ名/ファイル名.css**になるのでご注意ください。
別の場所にファイルを作りたい方は、``絶対パス``、``相対パス``の概念を理解する必要があるので調べてみてください。こちらは記事にしている方が多いはずです。
:::

# ブラウザへの連携
いよいよ自分の書いたコードを反映させる時です。

手順の通り作成が出来ていれば、デスクトップに``index.html``と``style.css``ファイルがあるはずです。ここからはかなり簡単です。

* デスクトップにある``index.html``をダブルクリックしてください。これだけで下記のようにブラウザが立ち上がります。

:::note
この時立ち上がるブラウザはデフォルトで設定しているものが立ち上がるはずです。
私は``Google Chrome``をデフォルト設定にしています。
:::

![スクリーンショット 2023-06-02 11.31.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3332842/362eca13-9c5a-b567-fbe9-f6a2f5dda838.png)

今回は自分でvscodeに``index-2.html``と``style-2.css``を作成しました。
※既にindex.htmlとstyle.cssという名のファイルを別に作成していたため。

これまでの流れを踏まえて作ると下記のようになります。

![スクリーンショット 2023-06-02 14.35.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3332842/01bd912c-b0d3-b598-9d83-a8b4af8da118.png)

CSSを適用させるコードは以下のようになりました。
```
<link rel="stylesheet" href="style-2.css">
```

それでは実際にCSSが動いているか確認しましょう。
HELLO WORLD!の``!``の部分をspanタグで囲っているので、ここのみ色を変えていきます。

![スクリーンショット 2023-06-02 14.43.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3332842/4ee85f70-04bc-d7d0-f805-29fb23b1ffc5.png)

``span``タグで色を赤にしました。

:::note warn
この時注意したいのがオレンジの丸で囲んだ場所です。
他のタグにはない⚪️が付いています。
これは変更を加えたファイルがまだ保存されていないという証になります。
``command+S``でしっかり変更を保存しましょう。
保存しないと変更が適用されません。
:::

変更を保存した後、ページを再読み込みすると結果としてはこのようになります。
※先ほどの画像より拡大しています。

![スクリーンショット 2023-06-02 14.43.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3332842/ec7e05b4-5df5-1764-1cdf-66d85ef9f8c4.png)

しっかり``!``の部分が赤になっており、連携出来ている事が確認できます。
ここから写経やポートフォリオ作成等のワンランク上の学習に取り組みましょう！