VSCode(Visual Studio Code ) HTML・CSSファイルを作成する手順・方法

その他・ツール類

VSCodeでHTML・CSSファイルを作成する手順

せっかくVisual Studio Code(以降、VSCode)をインストールしたけれど、使い方がいまいちわからない・・そんな方もいらっしゃると思います。

今回は、VSCodeをインストール後に、実際にHTML・CSSファイルを作成してWebページを作っていく方法をご紹介します。

VSCOdeをまだインストールしていない方は「【VSCode】Visual Studio Codeのインストール・設定手順」をあわせてご参照ください。

【STEP1】Webサイトのフォルダを作成

まず、HTMLファイルなどを入れるためのフォルダを作ります。パソコンのデスクトップ上(または任意の場所)にフォルダを新規作成し、任意の名前を付けます。本例では「website」と命名した例で説明します。

Windowsの場合:デスクトップ上で右クリック、「新規作成」の上にカーソルをのせて「フォルダー」をクリック
Macの場合:デスクトップ上で右クリックして「新規フォルダ」をクリック

このフォルダは、HTMLファイルの他にも、Webサイトを作るために必要なファイル(CSSフォルダやimagesフォルダなど)をひとつにまとめて入れておく場所なので、「新しいフォルダ」とかよりも、「website」のようなわかりやすいとなる場合が良いでしょう。

なお、これから作成するフォルダ名やファイル名は日本語ではなく半角英数字(小文字)の組み合わせが無難です。記号も一部使用できないものがあるのでハイフン(-)とアンダースコア(_)のみ使用するのが無難でしょう。

もし本番サーバーに日本語フォルダ・ファイルをアップロードすると正常に動作しない場合があるので注意しましょう。

【STEP2】HTMLファイルを作成する

つぎに、HTMLファイルを作成していきましょう。

HTMLとは「Hyper Text Markup Language」の略で、ホームページを作るための言語です。HTMLのタグというものを使って、文章や画像などの内容をマークアップし、コンピュータに指示してページに表示させます。

VSCodeでデスクトップに作成したフォルダを開きます。

VSCodeを開き(VSCodeのアイコンをダブルクリックして起動して)、VSCode画面の「ファイル」から「フォルダーを開く」(Macの場合は「開く」)をクリックすると、フォルダが開きます。

VSCode画面の上にあるメニューバーの「ファイル」にカーソルを当てると、さらに細かな項目が表示されるので「フォルダーを開く」を選んでクリック (Macの場合は「開く」)

では、HTMLファイルを作っていきましょう。

今回「website」という名前で作成したフォルダの中に、HTMLファイルを新規作成します。フォルダ名の隣にあるファイルのアイコンを一度クリックすると入力欄が出ます。

ファイルの形をしたアイコンを一度クリック

入力欄に半角で「index.html」と入力します。(拡張子「.html」を忘れると本手順通りに動作しなくなるので注意しましょう。)

入力欄に半角で「index.html」と入力

パソコンの設定でファイルの拡張子が非表示になっている場合は、表示になるように設定変更しておきましょう。

Windowsの場合:エクスプローラー、またはフォルダを開いて「表示」を選び、「ファイル名拡張子」にチェックを入れる
Macの場合:Finderの環境設定を開いて「詳細」を選び、「すべてのファイル名拡張子を表示」にチェックを入れる

すると、HTMLファイルが作成されて、このような画面が表示されます。

HTMLファイル(index.html)の画面

ここに、HTMLを記述してみましょう。

初めに、DOCTYPE宣言と基本的なタグを書きます。HTMLタグは必ず半角英数字で記述します。

1行目に半角のエクスクラメーションマーク(!)を打って、パソコンのTabキーを押してみてください。

すると以下のようにHTML共通のタグが自働で挿入されます(作るサイトによって必要なタグは少し異なります)。これはVSCodeのEmmet(エメット)の機能です。

ちなみに2行目は最初「lang="en"」となっています。これはホームページに使用する言語が英語だよという意味の「en」です。なのでここを日本語の「ja」に直します。

日本語のサイトなら「lang="ja"」にする

ここではEmmet(エメット)について詳しく説明しませんが、settings.jsonファイルで設定をして自動的に「lang=ja」になるように変えておくこともできます。 Emmet について詳しく知りたい方は色々検索してみてください。

VSCodeの設定画面、settings.jsonファイルから設定変更する

さっそく何か書いてみましょう。

ブラウザに表示されるのはbodyタグの中に書いた内容だけです。bodyタグの直下に、半角でpと打ってTabキーを押してみると、以下のように、pタグの開始タグと終了タグが自動で入力されます(pタグというのは、段落の意味を持つタグです)

半角でpと打ってTabキーを押すと、Emmetの機能でpタグの開始タグと終了タグが自動で入力される

試しに、pタグの中に何か文字を入力してみましょう。

pタグの中に「HTMLファイルを作ってみよう」と入力

入力したら「Ctrl」キーと「S」キー(Macは⌘とS)を押して保存します(またはメニューのファイルから保存)。

ファイルを保存すると、ファイルのタブに表示された〇が×に変わります。

ファイルを保存するとタブの〇が×に変わる

なるべく小まめに保存するようにしましょう。慣れるまでは特に記述した内容が反映されないとき、どの記述が正しくないのか、どこまでは合っていたのかがわからなくなりがちなので、小まめに確認しながら記述したほうが把握しやすくなります。

最初にデスクトップに保存したフォルダの中にあるHTMLファイル(index.html)を、ブラウザで開いて確認してみましょう。ブラウザは普段使っている好きなもので構いません。

HTMLファイル (index.html) にカーソルを当て、Windowsは「プログラムから開く」、Macは「このアプリケーションで開く」から好きなブラウザで開く

Webページが表示されました。なお、HTMLタグはブラウザには表示されず、タグの中に書いた内容だけが表示されています。

pタグの中に書いた文字が表示された!(ブラウザのタブにはtitleタグの内容が表示される)

記述して保存するたびに、ブラウザのリロードボタンなどで再読み込みをして、変更を確認できます。

【STEP3】CSSファイルを作成する

つぎにCSSファイルを作成してVSCodeで編集していきましょう。

CSSとは「Cascading Style Sheet」の略で、HTMLがブラウザに表示されたときの見た目を変える機能を持つ言語です。HTMLのタグに情報を追加することで、文字色や背景色、レイアウトなどのデザインを調整できます。

W3Cでは、HTML/CSSの標準仕様を公開しています。各ブラウザはその仕様に沿って作られているから、どんな環境でWebページを見ても(基本的に)ほぼ同じ見た目になります。

「W3C」公式サイト

「website」フォルダの中に、CSSのための新しいフォルダをひとつ作ります。

さきほどデスクトップに作った「website」フォルダの中に、フォルダを新規作成

フォルダのアイコンをクリックすると入力欄が出るので、そこに半角で「css」と入力します。

入力欄に半角で「css」と入力

その中にCSSファイルを作ります。

ファイルのアイコンをクリック

入力欄に半角で「style.css」と入力します。CSSファイルの拡張子は.cssです。

入力欄に半角で「style.css」と入力

すると、CSSファイルが作成されて、このような画面が表示されます。

CSSファイル(style.css)の画面

CSSファイルの1行目には必ず文字コードを指定するための「@charset "utf-8";」と記述します。

1行目に 「@charset "utf-8" 」と記述

CSSファイルができたら一度HTMLファイルに戻って、以下のようにheadタグ内にCSSファイルを読み込むための記述をして、お互いのファイルを関連付けます。書く場所は「meta charset="UTF-8"」と書かれた行より下であればどの順でもかまいません。

headタグ内にCSSファイルを読み込む記述をする

これでHTML・CSSでホームページをデザインする準備ができました。

さきほどHTMLファイルに書いた文字のスタイルを変えてみましょう。CSSファイルの2行目以降に、以下のように記述してみます。

変更を保存して、Webページを再読み込みすると、pタグの中に書いた文字の色が緑に変わりました。

pタグに書いた文字の色が、黒から緑色に変わっている!

ここではChromeブラウザで表示していますが、この他にもWindowsに初めからインストールされているEdge、MacのSafari、Mozilla Firefoxなど、パソコンにインストールされているブラウザがあれば表示してみましょう。

W3Cの仕様でほぼ同じ見た目になるとはいえ、よく比べてみるとブラウザによって余白など微妙な違いがわかると思います。

まとめ

まとめです。今回は、VSCodeをインストール後に、実際にHTML・CSSファイルを作成してWebページを作っていく方法をご紹介しました。

VS Codeには便利な拡張機能がいくつも用意されています。

たとえば、HTML/CSSコーディングするには、「Live Server」という拡張機能もインストールしておくと、変更のたびにファイルを開いたりページをリロードして確認しなくても、ボタン一つで変更を確認できて便利です。

VSCodeの「Live Serber」という拡張機能。Webブラウザを表示してくれる

このほかにもVSCodeには拡張機能が豊富にありますが、最初から色々な拡張機能を入れる必要はありません。

ある程度詳しくないと、最初のうちは不具合が起きたときに何が原因かわからなくて困ることもあります。慣れてきたら徐々に必要な機能を増やしていくとよいでしょう。

また、どのHTMLタグやCSSのスタイルを使えばよいかわからない、ブラウザに対応しているかなど詳細を知りたい場合は、MDN Web DocsのHTML/CSSのリファレンスを見ると便利です。日本語にも翻訳されています。

「MDN Web Docs」公式サイト
CSSリファレンスのページ例。文法例や各ブラウザに対応しているかどうか等詳しい説明がある

今回は以上になります。

最後までご覧いただきありがとうございました。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressホームページの作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2021年版】WordPress(ワードプレス)の使い方総まとめ

WordPress(ワードプレス)の使い方  総まとめ版

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-その他・ツール類