テキストエディタ AdobeCSSHTMLJavaScriptLinuxMacWeb 開発Windowsコードエディタフリーソフト

Brackets 1.14.2

スポンサーリンク
説明機能仕様ダウンロード画像使い方

ライブプレビュー機能を備えた HTML・CSS・JavaScript エディタ

Brackets

ブラウザでのライブプレビューやクイック編集、オートコンプリートなどの機能を備えたシンプルな HTML・CSS・JavaScript エディタ。拡張機能やテーマを追加してより使いやすいエディタにすることができます。

Brackets の概要

Brackets は、Web デザイナーやフロントエンド開発者向けに設計されたオープンソースの HTML・CSS・JavaScript エディタです。シンプルなユーザーインターフェースが特徴で、プロジェクト(HTML や CSS ファイルが入ったフォルダ)または単体の HTML や CSS・JSON ファイルを編集・作成するのに適しています。

Brackets の機能

Brackets の主な機能です。

強調表示 構文を強調表示
分割ビュー エディタを上下または左右に 2 分割
クイック編集 選択した id や class、色、関数をその場でインラインエディタで編集
ライブプレビュー ブラウザと同期して編集内容をリアルタイムで表示
拡張機能 編集に役立つ拡張機能やテーマを追加
ライブプレビューでリアルタイムで確認

Brackets

「ライブプレビュー」機能を使うと、実際のブラウザでの表示内容を確認しながら HTML や CSS を編集することができます。変更内容はリアルタイムで同期されるので、ブラウザを再読み込みする必要なく編集作業を行えます。

ライブプレビューを使うには Chrome ブラウザのインストールが必要です(既に Chrome を使用している場合は必要はありません)。

すばやく CSS や JavaScript を編集できるクイック編集機能

「クイック編集」は、class や id の属性がある HTML を選択したり、関数や色のコードを選択して、ほかの場所に移動することなくインラインのエディタで CSS や JavaScript を編集できる機能です(Ctrl+E キーで動作します)。

CSS の場合はクラスや ID に該当するセレクタが表示され、色コードを選択した場合はカラーピッカーが表示されます。

初心者からベテランまで使いやすいコードエディタ

Brackets は HTML・CSS・JavaScript を使用する開発者にとってとても使いやすいコードエディターです。

機能

  • HTML・CSS・JavaScript の編集
  • 分割ビュー(上下または左右)
  • ブラウザでライブプレビューを表示
  • id / class・色・関数をインラインエディタでクイック編集
  • 拡張機能の追加
  • 開発者ツール

仕様

価格:無料
ライセンス:フリーウェア
動作環境:Windows 7|8|8.1|10|11
メーカー:adobe
使用言語:日本語ほか
最終更新日: 4年前 (2020/04/06)
ダウンロード数:966

ダウンロード

Brackets.Release.1.14.2.msi windows 616.00 B 966 ダウンロード
Brackets.Release.1.14.2.dmg mac 616.00 B 302 ダウンロード
Brackets.Release.1.14.1.32-bit.deb linux (32 bit) 623.00 B 237 ダウンロード
Brackets.Release.1.14.1.64-bit.deb linux (64 bit) 623.00 B 248 ダウンロード

画像

Brackets

エディタ画面(デフォルト)

Brackets

エディタ画面を左右(または上下)に分割

Brackets

クイック編集(インラインエディタ)

Brackets

ブラウザでライブプレビューを表示

使い方

インストール方法(Windows)

  • ダウンロードした msi ファイルを実行するとインストーラが起動します。インストール先およびオプションを選択して[Next]をクリックします。

Brackets

・Add “brackets” launcher to PATH for command line use:コマンドラインで使用するために、brackets をパスに追加する
・Add “Open with Brackets” to Explorer context menu for all files and folders:エクスプローラーコンテキストメニューに「Open with Brackets」を追加

 

  • Install]ボタンをクリックするとインストールを開始します。

Brackets

 

  • インストールが完了しました。[Finish]ボタンをクリックして閉じましょう。

Brackets

基本的な使い方

1.ファイル/フォルダを開く

Brackets を起動すると、デフォルトの「Getting Started」プロジェクトが開きます。

  • ファイル」 >「 フォルダーを開く」から別の新しいフォルダを開くことができます。

Brackets

 

2.パネル
  • パネル上の操作の説明です。

Brackets

 

3.エディタ画面を分割する

分割ボタンまたは「表示」メニューの「上下分割」「左右分割」を選択すると、エディタの画面を上下または左右に分割できます。

Brackets

編集の機能

1.クイック編集

コード部分を選択した状態で「Ctrl + E」キーを押すと、インラインのエディタが開きます。

  • HTMLファイルに class または id 属性がある場合は、一致するCSS・SCSS・LESS ルールが表示されます。

Brackets

 

  • 色を選択して「Ctrl + E」キーを押した場合は、インラインのカラーピッカーが開きます。

Brackets

 

2.ライブプレビュー

HTML や CSS ファイルを選択して 「ファイル 」>「 ライブプレビュー」を選択すると、ブラウザでプレビューが表示されます。

  • HTML ファイルと CSS ファイルを編集すると、ブラウザーのプレビューはリアルタイムで更新されます。
  • 選択した部分はブラウザ上で強調表示されます。

Brackets

拡張機能をインストールする

ファイル」>「拡張機能マネージャー」を選択すると拡張機能の管理画面が開きます。

  • 「入手可能」と「テーマ」タブから拡張機能をインストールできます。

Brackets

 

  • テーマをインストールした場合は「表示」>「テーマ」を選択するとテーマを変更できます。

Brackets

よくある質問と回答

どんな拡張機能が利用できますか?

編集機能、テーマ、テンプレートなどがあります。利用可能な拡張機能の一覧は「https://brackets-registry.aboutweb.com/」で確認できます。