2020年1月8日スポンサーリンクHTMLとCSSの開発環境を整えるのって結構簡単なので、Progateしてる人も早めに開発環境を整えて、自分でコードを打てるようにした方がいいです!ですが、初心者の方は何から始めていいのかとか、どれを使ったらいいのかなどと調べる内にわからなくなりそうなので、わかりやすくまとめていきたいと思います。Chromeをインストールする2.テキストエディタのインストール3.コードを書く4.サイトの表示まとめ開発環境に必要なものまず開発環境を整えるためにはいくつか準備が必要になってきます。上でも紹介したように、3つさえ用意できれば大丈夫です。ChromeパソコンはHTMLとCSSを使う分にはスペックなどほぼ関係ないので、どんなパソコンでも動きます。家にあるパソコンで大丈夫です!もし新しく買いたいというのであれば、MacがおすすめなんですがWindowsでも大丈夫です。プログラミングを始めよう!という方が多くなってきているんですが、本当にパソコンは高いです。失敗しないパソコン選びを紹介すると...テキストエディタはなんでもいいんですが、いろいろ種類が多すぎて迷う人が多く時間が勿体無いので、VScodeでいきましょう!他のエディタが気になる人はそれを使ってもいいですが、特にこだわってない人はVScodeにしましょう!エディタについての参考記事は下です。【初心者必見】プログラミングにおすすめのテキストエディタ4選本記事は、【初心者必見】プログラミングにおすすめのテキストエディタ4選について紹介しています。初心者の方はどのテキストエディタを使ったらいいか迷うと思います。そこで、なるべく厳選してテキストエディタを紹介しています。Chromeはテキストエディタで書いたコードをブラウザに表示させるために使います。chromeしといた方がいいです。上の流れに沿って説明していきます。Chromeダウンロードはこちらから!ダウンロードしたらファイルからインストールしてください!インストールできたらこんなアイコンが出てくるので、そこから開けるようになります。Code)は、マイクロソフトが開発したテキストエディタです。今では1番人気といってはいいほ...テキストエディタの準備ができたら、エディタを開いてコード書く準備しておきましょう!3.コードを書く今回はコードを書いていきますが、HTMLとCSSについての知識のない方用にコピーして使える用のコード用意したので、動作確認用にお使いください!このような手順でコードを書いていきましょう!手順フォルダをデスクトップに作成index.htmlとmain.cssのファイルを作成するファイル内をコピペして保存1.フォルダをデスクトップに作成デスクトップで右クリックしたら『新規フォルダ』が出てくるので、クリックすると新規フォルダが作成されます。名前はなんでもいいのでとりあえず『test』にしときました。このファイルをVScodeに読み込ませるため、『フォルダをVScodeの中へ移動dさせると中に読み込まれます。index.htmlとmain.cssのファイルを作成する読み込まれているフォルダの部分をクリックすると、上みたいな感じに表示されるので、1番左の部分をクリックして新規ファイルを作成します。ファイル名は『index.html』と『main.css』の2つです。上の画像のように2つのファイルにコピペしていきます。コピペする内容は下に書いてます。それと、最後に『コマンド+S』で保存してください。Chromeのタブの部分に持っていくと表示されます。下の画像のように表示されてたら正解です!まとめプログラミングで1番最初の壁になるのは、開発環境の構築ですのでここを乗り越えられたらあとはコードを書いていくだけなので、プログラミングスキルを成長させることができます。エンジニアに興味が出てくるとプログラミングについても気になってくるはずです。プログラミング初心者の方のほとんどが通る道となるHTMLとCSSのうちのCSSの方を今回は紹介していきます。ある程度プログラミングを自分で学ぶことができた人は壁にぶち当たりプログラミングスクールに行こうかなと思う人も多いと思います。ケビンケビンブログ社会人の人でプログラミングのを勉強したいなーと思った人多いと思います。僕もそのうちの1人でした。ケビンケビンブログプログラミングに興味が出てきた人で最初からスクールなどに行くのは抵抗あるし、お金の問題から独学しようとしてる人は多いと思います。≫このブログについてエンジニアの僕がプログラミングの良さと可能性について書いています。ブログについても触れています。これからもより良い情報やノウハウを伝えていきたいと思います。みんなが実践できるようなこともどんどん書いていくので挑戦してみてください。