【環境構築】自分のパソコンでHTML&CSSを練習する方法

スポンサーリンク
ITスキル

自分のパソコンでHTML&CSSのコードを書く練習をしたいんだけどどうすればいいの?

ワカバ
ワカバ

簡単にできるHTML&CSSの環境構築の方法教えます!もちろん無料です!

この記事を読めば、あなたのパソコンでいつでもどこでもHTML&CSSの練習ができるようになります!

スポンサーリンク

HTML&CSSの環境構築3ステップ

HTML&CSSの環境構築は以下の3ステップでできます⇩

  1. Visual Studio Codeをインストール
  2. コードファイルを入れるフォルダーを作る
  3. ファイルを作る

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

始めに、HTML&CSSのコードを書くためのコードエディター「Visual Studio Code」をダウンロードします。

Visual Studio Codeは、マイクロソフトが開発しているWindows、Linux、macOS用のソースコードエディターです。世界中の人々が利用している人気の開発ツールです。

それではインストール手順を解説していきます。

1.Visual Studio Codeのwebサイトにアクセス

Visual Studio Codeのwebサイトはこちら

アクセスしたら、「Download now」を押す

2.OSを選択してダウンロード

私のPCはWindowsなのでWindows版をダウンロードしました。

3.利用規約に同意

「同意する」にチェックをし、「次へ」を押す

4.追加タスクを選択

インストール時に追加で実行するタスクを選択します。

私は以下の4つを選択しました⇩

  • デスクトップ上にアイコンを作成する
  • エクスプローラーのファイルコンテキストメニューに[codeで開く]アクションを追加する
  • エクスプローラーのディレクトリコンテキストメニューに[codeで開く]アクションを追加する
  • PATHへの追加

「次へ」を押すとインストールが始まります。

5.インストール完了

4のステップで「デスクトップ上にアイコンを作成する」を選択していると、デスクトップ上にアイコンが追加されています。

コードファイルを入れるフォルダーを作る

コードを書いたファイルをしまうフォルダーを作成します。エクスプローラーを開いて好きなところにフォルダーを作成してください。

私はOneDriveの中に「HTML&CSS練習」というフォルダーを作成しました。

ファイルを作る

さて、いよいよコードを書くファイルを作成しましょう。

1.「Visual Studio Code」で、作成したフォルダーを開く。

「File」⇒「Open Folder」⇒作成したフォルダーを選択

これで、コードエディターの中でフォルダーを開くことができます⇩

HTMLのコードを書くファイルを用意する方法はこちら⇩

①ファイル作成⇒②ファイル名を入力

htmlファイルを作成する際は、ファイル名の末尾に「.html」とつけましょう。今回は「practice1.html」というファイルを作成しました。

CSSを書くファイルを用意する方法はこちら⇩

①ファイル作成⇒②ファイル名を入力

cssファイルを作成する際は、ファイル名の末尾に「.css」とつけましょう。今回は「stylesheet.css」というファイルを作成しました。

これで準備は全て終了です!どんどんコードを書いていきましょう!

スポンサーリンク

さいごに

今回は「自分のパソコンでHTML&CSSを練習する方法」を紹介しました。

3ステップ

  1. Visual Studio Codeをインストール
  2. コードファイルを入れるフォルダーを作る
  3. ファイルを作る

簡単な手順で準備することができるのでぜひ皆さん試してみてください!

ワカバ

コメント

タイトルとURLをコピーしました