【HTML/CSS第1回】かんたん！環境構築をしよう【Windows・Mac共通】

Webサイトを作りたい！

けど、何から始めていいかわからない…

こんな方はいませんか？

今回は、Webサイトを作るために必要なHTML/CSSの環境構築についてお伝えします！

このブログを読むことで以下のことができるようになります。

HTML/CSSを用いたコーディングを始めることができる
マークアップ言語・スタイルシート言語について知ることができる

HTML/CSSとは
環境構築をしよう
1. Visual Studio Codeをインストールする
2. Visual Studio Codeの設定をする
実際にコーディングしてみよう！
まとめ

HTML/CSSとは

HTMLとは、「HyperText Markup Language」の略で、WEBページの作成に使用する言語です。

また、CSSとは、「Cascading Style Sheet」の略で、WEBページのデザインを行うために使用する言語です。

そして、CPLABでは、今までプログラミング言語のノウハウや情報についてお伝えしてきました。
今回から紹介するHTMLとCSSもプログラミング言語です…

と言いたいところですが、HTMLとCSSはプログラミング言語ではありません！

HTMLはマークアップ言語、CSSはスタイルシート言語と言います。

マークアップ言語とは、「タグ」というものを使って、文字情報に目印を付け、コンピュータに認識させる言語です。
また、スタイルシート言語とは、構造化された文章の見た目を記述するための言語です。

とにかく最初は、HTMLはマークアップ言語で、CSSはスタイルシート言語ということを覚えておいてください！

HTMLとは、「HyperText Markup Language」の略で、WEBページの作成に使用する言語
CSSとは、「Cascading Style Sheet」の略で、WEBページのデザインを行うために使用する言語
HTMLはマークアップ言語で、CSSはスタイルシート言語

環境構築をしよう

それでは、環境構築をしましょう！

HTMLとCSSのコーディングを行うには、「エディター」というものが必要となります。

今回は、「Visual Studio Code」というエディターを使用します。

Visual Studio Codeのインストール方法からお伝えします。

Visual Studio Codeをインストールする

まず、「Visual Studio Code」というソフトウェアをインストールします。
こちらのページを開いてください↓
https://code.visualstudio.com

ページを開くとこのような画面が出てくると思います。
ページを開いたら、真ん中あたりにある「Download」をクリックして、ファイルをダウンロードしてください。
ダウンロードできたら、手順に従ってインストールをしてください。

Visual Studio Codeの設定をする

インストールできたら、Visual Studio Codeを開いてください。

すると、こんな画面が出てくると思います。
何やら英語だらけでよく分かりませんね（汗）
ということで、言語設定を日本語にしたいと思います。
左側の上から5つ目のアイコンをクリックします。

画像の赤丸で囲った部分です。
するとこんな画面が出てきます。

左に何やら色々出てきましたね（笑）
では、上の「Search Extensions in Marketplace」に「Japanese Language Pack」と入力してみましょう。

すると、一番上にJapaneseと書いてある地球儀のマークが出てくるので、クリックしてください。
地球儀のマークはたくさんあるので、注意してくださいね。
そして、これをインストールします。
「Install」のボタンをクリックします。
インストールが終わったら、「Install」というボタンが「Uninstall」というボタンに変わりますので、変わったらVisual Studio Codeを一度閉じて、再度開いてみてください。
すると、言語が日本語に変わっていると思います。

これでHTML/CSSのコーディング環境構築は完了です！
おめでとうございます！
これであなたもコーディングができるようになりますよ。

実際にコーディングしてみよう！

それでは、実際にコーディングしてみましょう！

フォルダを用意する

まずは、任意の場所にフォルダを作ります。
好きな場所で良いですが、私は、Macの方は「書類」フォルダの中に、Windowsの方はCドライブの中に作ることをおすすめします。
私はMacで、書類フォルダの中に、「cplab」というフォルダを、さらに「cplab」というフォルダの中に「html_css」というフォルダを作りました。
今後、CPLABでは、HTMLやCSS以外の言語でのプログラミングもお伝えしていこうと思っていますので、言語ごとにフォルダを分けるために、「cplab」の中に「html_css」というフォルダを作りました。

さらに、「html_css」フォルダの中に、「001」というフォルダを作りましょう。

これで、フォルダの準備は完了です。

「index.html」ファイルを生成する

メニューバーの「ファイル」から「フォルダーを開く」をクリックして、先ほど作った「001」フォルダを選択してください。
この時、何かメッセージが出てきたら、「はい、作成者を信頼します」をクリックしてください。

すると、左側に開いたフォルダーが出てくると思います。
次に、画像の赤丸で囲ってあるマークを選択してください。

すると、ファイル名の入力を求められるので、「index.html」と入力してください。

これで、「index.html」というソースファイルが出来上がりました！

実際にコーディングしてみる

お待たせしました！
では早速コーディングをしてみましょう！

以下のコードを記述してください。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Hello</title>
    </head>

    <body>
        <p>Hello, World!</p>
    </body>
</html>

一字一句間違いないように記述してくださいね！

コードの意味に関しては、今回は説明しません。
今後のブログで解説していきますので、これから一緒に学んでいきましょうね！

記述したら、「command」+「S」（Mac）、「Ctrl」+「S」（Windows）を押してください。
そうすると保存ができます。