みなさんは、このような悩みは、ないですか？

• もっとわかりやすい解説をかいたサイトがほしい
• htmlとcssを無料で学びたい

今回は、こんな人のためにこのサイトでは、１から誰でもわかるように解説していきます。

目次

• 環境構築とは？
• VSコードをダウンロードしよう
• 専用フォルダーを作ろう
• Hello Worldを表示させよう

環境構築とは？

環境構築ってなんなの？っていう方のために簡単に説明しますね!

名前の通りですが、開発する環境を作るということです。
メモ帳にhtmlやcssを書いても反応しませんが、環境構築をすることによりhtmlゃcssを扱うことができるようになります。

VSコードをダウンロードしよう

VSコードとは、htmlでは＜ｈ１＞などといったタグを使って文字を操っていきます。
通常のメモ帳とは違いタグの色が変わるので、コードが見やすくなるのでこちらを入れとくと便利です。

VSコードのダウンロードリンクはこちらから

VSコードのダウンロードが終了し、完了したら開いて初期設定を完了させてください。

専用フォルダーを作ろう

デスクトップの何もないところでマウスを右クリック⇒新規作成⇒フォルダーの順で作成します。
名前はわかりやすい名前にしてください。

Hello Worldを表示させよう

フォルダーができたらVSコードを開いてください。

VSコードに先ほど作ったフォルダーを左クリックを長押ししながらVSコードの上に持ってきて、左クリックを離します。
そうすると、フォルダーが開くことができます

プログラミングと書いてるところの上で右クリック⇒新しいファイル⇒名前を「index.html」という名前で作成します。

index.htmlを開いてこのように記述してください

これで「Hello World」が表示できてるはずです。
確認する方法は、先ほどのファイルをダブルクリックします。

ファイルを開いたらindex.htmlをダブルクリックで開きます

開くとHello Worldが表示されていると思います。
これで環境構築は終了です。

最後まで読んでくださり、ありがとうございます。
次の記事では、いろんなタグを紹介しています。