HTMLとCSSの開発環境を整えるのって結構簡単なので、Progateしてる人も早めに開発環境を整えて、自分でコードを打てるようにした方がいいです！
ですが、初心者の方は何から始めていいのかとか、どれを使ったらいいのかなどと調べる内にわからなくなりそうなので、わかりやすくまとめていきたいと思います。
- テキストエディタ
- Google Chrome
- パソコン(Macかwindows)
- Google Chromeをインストール
- テキストエディタをインストール
- コードを書く
- サイトを表示
開発環境に必要なもの
まず開発環境を整えるためにはいくつか準備が必要になってきます。上でも紹介したように、３つさえ用意できれば大丈夫です。
- パソコン(Macかwindows)
- テキストエディタ
- Google Chrome
パソコンはHTMLとCSSを使う分にはスペックなどほぼ関係ないので、どんなパソコンでも動きます。なので、家にあるパソコンで大丈夫です！
もし新しく買いたいというのであれば、MacがおすすめなんですがWindowsでも大丈夫です。詳しくは下の記事を参考にしてください！
テキストエディタはなんでもいいんですが、いろいろ種類が多すぎて迷う人が多く時間が勿体無いので、VScodeでいきましょう！他のエディタが気になる人はそれを使ってもいいですが、特にこだわってない人はVScodeにしましょう！
エディタについての参考記事は下です。
Google Chromeはテキストエディタで書いたコードをブラウザに表示させるために使います。safariでもなんでもいいのですが、Google Chromeが一番安定していてエンジニアの人が１番多く開発時に使っているので、Google chromeしといた方がいいです。
４ステップの開発環境
- Google Chromeをインストール
- テキストエディタをインストール
- コードを書く
- サイトを表示
上の流れに沿って説明していきます。実際この流れを見るだけでコードを書いて、表示するまでできるようになりますので、progateのコードをコピーして実際に自分の開発環境で試してみるのもいいのでやってみてください！
1.Google Chromeをインストールする
Google Chromeをインストールするにはまず、Googleのサイトからクロームをダウンロードしてください！
ダウンロードしたらファイルからインストールしてください！
インストールできたらこんなアイコンが出てくるので、そこから開けるようになります。
2.テキストエディタのインストール
テキストエディタはどれでもいいのですが、ここではVScodeをおすすめしていますので、VScodeのインストールをしていきますが、インストール方法は別の記事にまとめていますので、そちらを参考にしてください！
テキストエディタの準備ができたら、エディタを開いてコード書く準備しておきましょう！
3.コードを書く
今回はコードを書いていきますが、HTMLとCSSについての知識のない方用にコピーして使える用のコード用意したので、動作確認用にお使いください！
このような手順でコードを書いていきましょう！
- フォルダをデスクトップに作成
- index.htmlとmain.cssのファイルを作成する
- ファイル内をコピペして保存
1.フォルダをデスクトップに作成
デスクトップで右クリックしたら『新規フォルダ』が出てくるので、クリックすると新規フォルダが作成されます。名前はなんでもいいのでとりあえず『test』にしときました。
そして、このファイルをVScodeに読み込ませるため、『フォルダをVScodeの中へ移動dさせると中に読み込まれます。
index.htmlとmain.cssのファイルを作成する
読み込まれているフォルダの部分をクリックすると、上みたいな感じに表示されるので、１番左の部分をクリックして新規ファイルを作成します。
ファイル名は『index.html』と『main.css』の２つです。
ファイル内をコピペして保存
上の画像のように２つのファイルにコピペしていきます。コピペする内容は下に書いてます。それと、最後に『コマンド＋S』で保存してください。
4.サイトの表示
コードを書き終えたら、デスクトップにある作ったフォルダを開いて『index.html』をダブルクリックするか、
『index.html』をドラッグ＆ドロップでGoogle Chromeのタブの部分に持っていくと表示されます。
下の画像のように表示されてたら正解です！
まとめ
プログラミングで１番最初の壁になるのは、開発環境の構築ですのでここを乗り越えられたらあとはコードを書いていくだけなので、プログラミングスキルを成長させることができます。
HTMLとCSSの開発環境は１番簡単なので、この後に他の言語を扱うことになれば結構苦労するとは思いますが、それを乗り越えてさっさとコードを書いて成長しましょう！
HTMLの基本は下の記事で解説しているのでよかったらどうぞ！
CSSの基本は下の記事を参考にしてください！
もし、プログラミングスクールなどに興味があるのなら下の記事をどうぞ！
