html&css勉強したけど、どこに書けばいいの？　　おすすめ統合開発環境（IDE）3選【Windows10】

前書き

皆さん、プログラミングしていますか⁉

progateやドットインストールで勉強しても、

どこにプログラムを書けばいいかわからない

ことありませんか？

（私も実際、pythonで悩みました…）

それはいいとして

今回はHTML&CSS版です。

あと、コードを記述するテキストエディターのおすすめも紹介します！

ぜひ最後まで見てみてください‼

前書き
目次
HTML＆CSSに必要な環境
- 統合開発環境（IDE）
- ブラウザー
ブラウザーのダウンロード
- おすすめのブラウザー
IDEのダウンロード
Sublime Text
Atom
Visual Studio Code
- ダウンロード方法
- インストール方法
設定方法
htmlファイルをブラウザーで開く
順位
終わりに

HTML＆CSSに必要な環境

webページを開発するために必要なのは…

「テキストエディター」と「ブラウザー」が必要です！

って言われてもさっぱりなのでそれぞれ説明します。

統合開発環境（IDE）

いわゆる「プログラムを書く場所」です。

ここに.htmlや.cssのプログラムを書けます。

ブラウザー

先ほどの「IDE」で書いたプログラムを使い、

webページも表示するツールです。

ブラウザーのダウンロード

IDEのダウンロード

Sublime Text

ダウンロード方法

こちらのページにアクセス

（ Sublime Textダウンロードページ）

f:id:yuuyuru:20200915205338j:plain

・windows 32bitの方は「windows」をクリック！

・windows 64bitの方は「windows 64 bit」をクリック！

インストール方法

１. ダウンロードされたexeファイルを起動する

２. ダウンロード先のフォルダーを指定します。（このままでいいと思います）

f:id:yuuyuru:20200915210518j:plain

３. Add to explorer context menu というのにチェックするかしないかを選択します。

f:id:yuuyuru:20200915210745j:plain

Add to explorer context menuをオンにすると

右クリックしたときにOpen with Sublime Textが出ます。

f:id:yuuyuru:20200915211316p:plain

４. 「インストール」をクリック！

f:id:yuuyuru:20200915211613j:plain

５. Finish!

f:id:yuuyuru:20200915211847j:plain

起動方法

１. 先ほどダウンロードしたところに

sublime_text.exeというexeファイルを起動します。

（exeファイルのショートカットをデスクトップに追加しておく

　または、タスクバーにピン止めすることをお勧めします！）

f:id:yuuyuru:20200915212548j:plain

２. 右下のPlain TextをHTMLを書く場合はHTML

CSSを書くときはCSSを選択しましょう！ f:id:yuuyuru:20200915212531j:plain

３. View の Show Consoleをクリック！

f:id:yuuyuru:20200915213759p:plain

４. 下記のpythonのscriptを入力してEnterをクリック！

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

f:id:yuuyuru:20200915214049j:plain