Bracketsを初心者がインストールする方法 Windows編

スポンサーリンク
スポンサーリンク
Adobeのbracketsサポート終了に伴い、公式サポートでは、Visual Studio Codeへの移行がおススメされています。そのため、『htmlやcssの勉強をしているけど、Visual Studio Codeをまったく使ったことがない…』という人でも、ちゃんと操作できるように、超初心者さんのVisual Studio Codeマニュアルを作成してみました。インストールも見ながらできるようになっています。スグに使いはじめたい人向けです。よかったらどうぞ。
VSCode超入門! 超初心者さんの使い方マニュアル
『htmlやcssの勉強をしているけど、Visual Studio Codeをまったく使ったことがない…』という経験ゼロの人でも、スグにちゃんと操作できるような、VSCode超入門! 超初心者さんの使い方マニュアルを作成しました。

今日はWindowsで、Bracketsをインストールする方法について説明しますね(最新のVer1.14.2も同様です)。


出典:http://brackets.io/
© 2015 Google Inc, used with permission. Google および Google ロゴは Google Inc. の登録商標であり、同社の許可を得て使用しています。

Bracketsは、html・css・JavaScriptなど初心者のホームページ作成本などにもおすすめのテキストエディタとして紹介されています。

しかし簡単な紹介だけなので『Bracketsのホームページにアクセスしたものの、どうやってインストールをしたらいいのかよくわからない』という初心者さんも多いのではないかと思います。ということでBracketsのインストール方法・手順を説明しますね。

なお、アップデートする場合も、基本的におなじ手順ですので、このまま本記事を参考にしてもらって構いません。一応別記事には手順をまとめてあります。よければ参考にしてください。

Brackets 1.13へのバージョンアップデート方法 Windows編
Bracketsが、2018年6月18日にVer1.13へバージョンアップ&リリースされました。なので今日はVer1.13へのアップデートの操作方法の説明をしますね。 とっても簡単ですのでチャレンジしてみてくださいネ。なお全てのバージ...

では、はじめます。

Bracketsのインストール前にGoogle Chromeをインストールを

BracketsではブラウザーにGoogle Chrome(クローム)をインストールしないと、Bracketsの便利な機能の1つであるライブプレビューが使用できません

出典:https://www.google.co.jp/chrome/

Google Chromeをインストールしていない人は、Bracketsインストール前に、Google Chromeをインストールしてください→Chromeブラウザ

Google Chromeのインストールは大丈夫ですか?それではBracketsのインストールをはじめますね。

Bracketsのインストール方法

まずはBracktsのホームページにアクセスしてください(コピペで、ブラウザーのURL欄に入力してください)→http://brackets.io/

出典:https://brackets.io/
© 2015 Google Inc, used with permission. Google および Google ロゴは Google Inc. の登録商標であり、同社の許可を得て使用しています。

画面中央にみえる [Brackets x.x をダウンロード]ボタンをクリックしてください(x.xはバージョンですので、バージョンにより数字が変わります)。

Google Chromeの場合は、ダウンロードが開始されます。終了したら▼をクリックして[フォルダを開く]を選択してください。


© 2015 Google Inc, used with permission. Google および Google ロゴは Google Inc. の登録商標であり、同社の許可を得て使用しています。

ダウンロード先フォルダが表示されるので、ダウンロードされたファイルをダブルクリックします。

Brackets Destination Folderというタイトルがついた画面が表示されます。そのまま変更せずに[Next]ボタンをクリックします。

ちなみに、このBrackets Destination Folder画面では以下を選択しています。わからなくても構いません。

  • インストール先フォルダをどこにするか?
  • コマンドプロンプトのPATH変数にBraketsへのパスを追加するか?
  • エクスプローラでフォルダやファイルを選択し、右クリックした時に、Bracketsで開けるようにするか?

Instrall Bracketsというタイトルがついた画面が表示されます。[Install]ボタンをクリックしてください。ユーザーアカウント制御の画面が表示されるので[はい]をクリックしてください。

インストールがはじまりしばらくすると、Brackets was successfully installed.というタイトルがついた画面が表示されます。[Finish]ボタンをクリックしてください。

これでBracketsのインストールが終了しました。それではBracketsを起動してみましょう。スタートメニューから選択します。

Braketsの正常性レポートが表示されたら、×をクリックして消してください。


画面右にあるイナズマみたいなアイコンをクリックしてください。「ライブプレビューへようこそ」メッセージが表示されます。


ブラウザーの起動時エラーが発生しました と表示された場合

もし画面右にあるイナズマみたいなアイコンをクリックして「ブラウザーの起動時エラーが発生しました」メッセージが表示された場合は、Google Chrome(クローム)ブラウザーをインストールしてください。インストールはこちらから→Chromeブラウザ

Bracketsのライブプレビューで「ブラウザーの起動時エラーが発生しました」が表示されたらGoogle Chromeのインストールが必要
html・css・JavaScriptなどのホームページ作成本などにおすすめのテキストエディタとして紹介されているBracketsをインストールした。そこでライブプレビューを実行するためにイナズマみたいなアイコンをクリックしたら「ブラウザー...

Google Chromeのインストールが終了したら、再度、画面右にあるイナズマみたいなアイコンをクリックして「ライブプレビューへようこそ」メッセージを表示してください。

話は戻ります。「ライブプレビューへようこそ」メッセージの[OK]ボタンをクリックしてしてください。しばらくすると「BRACKETSをはじめる前に」というタイトルがついた画面がGoogle Chromeで表示されます。この画面が表示されればOKです。

© 2015 Google Inc, used with permission. Google および Google ロゴは Google Inc. の登録商標であり、同社の許可を得て使用しています。
よければ「BRACKETSをはじめる前に」を読んでくださいね。

まとめ

今日はBracketsをインストールする方法について説明しました。すぐに使いたいあなたはこちらをどうぞ。

htmlとcssとJavaScript(jQuery)を使って初心者がホームページを作る時に便利なおすすめのプラグインの紹介およびインストールはこちらです。

Bracketsでおすすめのプラグインまとめ【初心者編】
Bracketsでおすすめのプラグインご紹介します。今回ご紹介するのは、管理人が、htmlとcssとJavaScript(jQuery)でホームページを作っている時に実際に使っているプラグインです。管理人はホームページ作成初心者のなので、初...

初期設定すると便利な項目については、こちらで紹介しています

Bracketsのおすすめの初期設定項目【初心者編】
Brakcetsはインストール直後から、特に設定しなくてもすぐに使える便利なhtml&cssエディタです。が、設定しておくと便利な項目もいくつかあるのも事実です。ということで、今日はBracketsのおすすめの初期設定項目【初心者編】として...

Bracketsはホームページ作成本などにおすすめのテキストエディタとして紹介されていますが、簡単な紹介だけなので『Bracketsのホームページにアクセスしたものの、どうやってインストールをしたらいいのかよくわからない』という初心者さんも多いかと思ったので、できるだけ細かく説明したつもりです。足りないところがあれば追加しますので、コメントいただくと助かります。

コメント

  1. 匿名希望 より:

    参考になりました!(人”▽`)ありがとう☆ございます

    • 管理人 より:

      管理人です。コメントありがとうございます!お役に立ててうれしいです!!

      ほかにも何かあれば、遠慮なく言ってくださいネ

  2. hiramo より:

    非常に参考になりました。
    他にも気になる記事があるのでブックマークして
    読ませていただきます(^^♪
    分かり易い記事、ありがとうございます。

    • 管理人 より:

      hiramoさま

      あけましておめでとうございます。

      またコメントありがとうございます。

      そう言ってもらえると、とってもうれしいです(^^)

      これからもよろしくお願いいたします<(_ _)>。

  3. とくめー より:

    ありがとうございました!

  4. スモモ より:

    こちらに来て、やっとインストールができました。ありがとうございました

    • 管理人 より:

      スモモさま

      コメントありがとうございます。管理人です。

      そう言って頂けると、すっごくうれしいです(^_^)v

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