【Brackets】ーインストール手順と基本操作について分かりやすく説明します

スポンサーリンク

 

この記事でわかること

  • Bracketsのインストール方法
  • Bracketsの基本操作

BracketsはHTML、CSS、JavaScriptなどの言語化使え、Webサイトを作成する人にとてもおすすめのテキストエディタです。

上記、3つの言語だけではなく、30言語以上が用意されているので一般的な言語であれば、まず問題なく使用できます。

 

さらに、Bracketsはインストール直後から日本語表記なのでインストール後すぐにコーディング可能。

テキストエディタを日本語にするための作業って意外と面倒ですもんね…。

 

そんな優秀なテキストエディタのBrackets。なんと料金は無料で使用できます。

この記事では、Bracketsのインストール方法と基本操作を紹介します。

スポンサーリンク

Bracketsをインストールしよう

さっそく、Bracketsをインストールしていきましょう。

私が使用しているOSは「Windows」ですが、iOSの人もインストール手順はたいして変わらないので安心してくださいね(^^♪

手順1 : Bracketsのインストール画面にアクセス

まずは、『Brackets』のインストール画面にアクセスします。

100%

すると、画像のような画面が開くと思います。

そしたら、青いボタンをクリック。インストールが自動的に始まります。

手順2 : インストールしたBracketsを起動しよう

brackets_img_001

Bracketsのインストールされたアプリケーションを起動するとこんな画面になります。

「Next」でインストールを開始して大丈夫ですが、ファイルの保存先はしっかり指定しておきましょう。

 

せっかくBracketsをインストールしたのに「あれ、ファイルが行方不明…」なんて悲しいですからね( ;∀;)

ファイルの保存先の変更は「Change」からできます。

 

保存先をしっかり把握、選択したらあとはナビに従ってインストールするだけです。

手順3 : Bracketsのショートカットを作成

インストールが完了したらBracketsのショートカットを作成していきましょう。

これは任意ですが、Bracketsを起動させる度に「ファイル→Brackets」の順で起動させるよりは、ワンクリックで起動できた方が良くないですか?!

手順は…

  1. Bracketsのアプリケーションを左クリック
  2. 選択されたら今度は右クリック
  3. 「ショートカットを作成(S)」をクリック

無事に、ショートカットが作成されたら、デスクトップに移動したり、スタート画面にピン止めしておけば完璧です!!

 

Brackets自体はこれでインストールが完了。

後は、起動するだけでコードをカタカタ打ち込めますよ。

 

次は、Bracketsの基本操作をいくつか紹介して行きます。

スポンサーリンク

Bracketsの基本操作

次は、Bracketsの基本操作を紹介していきます。

今日初めてBracketsをインストールしたよ。と言う人向けに基本操作を説明していきます。

ぜひ覚えて帰ってください。

新しいファイルの作成

brackets_img_003

Bracketsで新規ファイルを開く方法です。

初めに、上部メニュー(赤線の枠内)から「ファイル→新規作成」。

これでサイドバーに「名称未設定ー1」と出てたら完璧です。

HTML・CSSファイルの作成

さて、上記で新規ファイルの作成方法はばっちりですね!

そしたら、さっきの「名称未設定ー1」に拡張子を与えましょう♪

拡張子というのは「○○.html」の「.html」のことを指します。

Brackets_04

GIF動画を見てもらうとわかる通り、最初は真っ白だった文字が「HTML」を選んだとたんに色が付きましたよね。

こうなれば、HTMLファイルに変更できている証拠です。

 

「…コードが一つもわからないんだけど。」という人は<h1>テスト</h1>とBracketsに入力してみて、文字の色が変わればファイル作成は大丈夫。

 

仮に、CSSを編集したいのであれば、「HTML」ではなく、「CSS」を選択します。

名前を付けて保存

brackets_img_5Bracketsの上部メニューから「ファイル→名前を付けて保存」と進んで任意のファイル名を付けてます。

名前を付けて保存をしないと、Brackets最大の魅力『ライブ・プレビュー』が使えないので要注意!!

編集中のファイルを保存

編集中のファイルを保存していきましょう。

手順は、「ファイル→保存」だけです。簡単ですね。

 

ちなみに、「編集中で最新版が保存されていないよ」という場合は、名前の横に「丸」が付いています。

『common.css』の横に「丸」が付いてるのが確認できますか?

brackets_img_009

この状態だと保存されていないので、そのまま閉じてしまうと「最新版保存してないけどBrackets閉じて大丈夫?」とアラートが表示されます。

そこで、保存すれば問題ないのですが、仮にそのアラートすらスルーしてしまうと、せっかく頑張って書いたコードがパーになる…。

brackets_img_010

上の画像はしっかり保存されている場合です。

『common.css』の横には何もありません。

編集中はこまめな保存を!!

Brackets最大の魅力『ライブ・プレビュー』

Bracketsの魅力は最初から日本語に設定できる。拡張機能をインストールしなくても使いやすい。などたくさんあります。

そのなかでも、個人的に思うBrackets最大の魅力が『ライブ・プレビュー』機能。

 

他のエディタだと、拡張機能を入れたらライブ・プレビューできるよ。って感じなのですが、拡張機能不要で出来ちゃうのがBracketsなんです。

ライブ・プレビューのやり方ですが…

brackets_img_006

赤線枠内の妙にカミナリに似ているアイコンをクリック!!

これだけです( *´艸`)

編集ファイルの切り替え

brackets_gif_002

Bracketsの編集ファイル切り替えはとても簡単です。

サイドバーの『作業中ファイル』をポチっとクリックするだけで切り替えることが出来ます。

Bracketsの画面分割

ファイルを切り替える度にポチポチめんどくさい!!という人に朗報。

Bracketsは画面を2分割することができるのです。

 

方法は、上部メニューから「表示」を選択します。

そしたら、「分割なし」、「左右分割」、「上下分割」と3つあるので、編集しやすい方を選んでください。

 

左右分割はこんな感じ。

brackets_img_007

上下分割はこんな感じで表示されます。

brackets_img_008

ファイルを左または下に表示させたい場合は、上の画像で言うと「common.css」をドラッグ&ドロップで「下」へ移動させてあげます。

brackets_gif_003

これで、HTMLのクラス名、id名を確認しながらCSSを編集できますね(^^♪

Bracketsのテーマ(色)を変更する

Bracketsではインストール後から背景の色を変更することができます。

恐らく、皆さんのBracketsは現在、白色ですよね?

 

人によるとは思いますが、黒色の方がコードを認識しやしすく、見やすい。

あと、かっこいい!!

 

それでは、皆さんのBracketsも黒色にしていきましょう!!

brackets_gif_004

  1. Brackets上部メニュー「表示」を選択
  2. 「表示」から「テーマ」をクリック
  3. 「現在のテーマ」をクリックし、任意のテーマを選択

となります。

Bracketsに最初から入っているテーマは『Brackets Light(Default)』、『Brackets Dark』の二種類です。

最後に「完了」を押せばBracketsのテーマの変更は完了。

Bracketsのショートカットキーの記事はこちら
インストールが終わったら、編集作業で役に立つショートカットキーも覚えておきましょう。
GIF動画や、画像をふんだんに使い分かりやすく説明しています。
関連記事≫≫≫【Brackets】ーショートカットキーを駆使して作業を効率化しよう
山田の自由研究

スポンサーリンク   この記事でわかること Bracketsのショートカットキー 拡張機能『Display Shortc…

Bracketsのまとめ

最後まで読んで下さった皆さん、お疲れ様です。

文字数や画像は結構多めですが、紹介した作業はものの数分で終わります。

 

「Bracketsってよく聞く名前だけど、どんなエディタなのか試してみたい」という人。

「エディタ自体初めてで操作方法が全く分からない」という人。

などなど、Bracketsに興味を持っている人の参考になれば幸いですm(__)m

Brackets_eye_catching_img
最新情報をチェックしよう!