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

Uncategorized

前書き

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

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

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

ことありませんか?

(私も実際、pythonで悩みました…)

それはいいとして

今回はHTML&CSS版です。

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

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

目次

HTML&CSSに必要な環境

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

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

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

統合開発環境IDE

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

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

ブラウザー

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

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

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

おすすめのブラウザー

この中のどれかを使うことをお勧めします。

今回はGoogle Chromeダウンロードについて説明します。

Google Chrome ダウンロード

1. ↑こちらに飛びます。

2. Chromeをダウンロード」をクリック!

f:id:yuuyuru:20200915200527j:plain

3. ChromeSetup.exeというダウンロードされたexeファイルを起動させます。

4. Chromeのダウンロードインストール開始されます。

f:id:yuuyuru:20200915200827j:plain

5. これで完了です!

IDEのダウンロード

 Sublime Text

ダウンロード方法

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

( Sublime Textダウンロードページ)

f:id:yuuyuru:20200915205338j:plain

windows 32bitの方はwindowsをクリック!

windows 64bitの方はwindows 64 bit」をクリック!

インストール方法

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

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

f:id:yuuyuru:20200915210518j:plain

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

f:id:yuuyuru:20200915210745j:plain

Add to explorer context menuオンにすると

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

f:id:yuuyuru:20200915211316p:plain

4. 「インストール」をクリック!

f:id:yuuyuru:20200915211613j:plain

5. Finish!

f:id:yuuyuru:20200915211847j:plain

起動方法

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

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

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

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

f:id:yuuyuru:20200915212548j:plain

2. 右下Plain TextHTMLを書く場合はHTML

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

3. ViewShow Consoleをクリック!

f:id:yuuyuru:20200915213759p:plain

4. 下記の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

f:id:yuuyuru:20200915214028j:plain

3. Shift + Ctrl + p「Install Package Control」検索

一番上Package Control: Install Packageを選択してEnter

f:id:yuuyuru:20200915212829j:plain

4. html5を検索して一番上をクリック!

f:id:yuuyuru:20200915213222j:plainこれで、すべて完成です!

Atom

ダウンロード方法

f:id:yuuyuru:20200915214633j:plain

Atom ダウンロードリンク

1. 「Download」をクリック!

2. 待機中… now loading

f:id:yuuyuru:20200915214859j:plain

3. ダウンロード完了

起動方法

デスクトップのショートカットをクリック!

f:id:yuuyuru:20200915214954j:plain

右上のこれは「No,Never」で大丈夫です!

f:id:yuuyuru:20200915215245j:plain

設定方法

インストールからパッケージのインストール検索

「Emmet」と入力!

一番上をインストール!

※これはHTML/CSSのコーディングを素早くするもの

f:id:yuuyuru:20200915215525j:plain

HTML/CSSファイルを作る方法は

1. 右クリックして「新規ファイル」をクリック!

f:id:yuuyuru:20200915220515p:plain

f:id:yuuyuru:20200915220659p:plain

3. 名前と拡張子を書く(.html / .css

f:id:yuuyuru:20200915220741p:plain

4. これで書き始められます!

Visual Studio Code

ダウンロード方法

Visual Studio IDE、コード エディター、Azure DevOps、App Center – Visual Studio

1. こちらにアクセス

2. Visual Studio CodeWindows x64」をクリック!

f:id:yuuyuru:20200915222205p:plain

3. ダウンロード完了

f:id:yuuyuru:20200915222437p:plain

インストール方法

1. 使用許諾契約書同意する。

f:id:yuuyuru:20200915222601j:plain

2. visual studio codeインストール先指定(最初に書いていたもので大丈夫)

f:id:yuuyuru:20200915222910j:plain

3. ショートカットの作成先。(このままでいい)

f:id:yuuyuru:20200915223119j:plain

4. 「デスクトップ上にアイコンを作成する」だけで大丈夫かな

f:id:yuuyuru:20200915223204j:plain

5. インストール! now loading

f:id:yuuyuru:20200915223306j:plain

6. 完了!!

f:id:yuuyuru:20200915223409j:plain

設定方法

1. 拡張機能から「Japanese Language Pack」と検索して一番上をインストール!

f:id:yuuyuru:20200915223508j:plain

2. 「ファイル」から「新規ファイル」をクリック!

f:id:yuuyuru:20200915223858p:plain

3. Ctrl + Sファイルを保存します。その時に、.txtを.html/.cssに変えましょう

4. これで書けますね!

htmlファイルをブラウザーで開く

先ほど紹介したテキストエディタを使ってhtmlファイルを作ったら

それを開く方法について説明します。

1. htmlファイルを右クリックしてます。

プログラムから開くよりGoogle Chromeをクリック!

または、開くをクリック!

f:id:yuuyuru:20200916211132p:plain

2.  開くことができました!

f:id:yuuyuru:20200916211832j:plain

(なぜゴリラか、は謎です…)

順位

(これはあくまで私の順位になります。)

3位  Sublime Text

2位 Visual Studio Code

1位 Atom

こうなりました!

1位と2位拡張機能のインストールが簡単でした。

私のような初心者にはお勧めできますね!

終わりに

私は、これからAtomを使ってみようと思います。

けっこうAtomが自分にはまって好きになりましたね。

みんなも使ってみてね!

コメント

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