Adobe Brackets の簡単な使い方のグラフィックチュートリアル

Adobe Brackets は、HTML、CSS、JavaScript 用のオープンソースでシンプルかつ強力な統合開発環境です。プラグインの追加をサポートしており、追加の機能拡張を提供します。現在利用可能なプラグインは、デバッグ、ブラウザ固有の CSS プレフィックス、JSDoc 注釈などの追加をサポートしています。以下は、Brackets の使用と設定の簡単な紹介です。

Adobe Brackets v1.13 公式英語インストール版

• タイプ: Web デザイン
• サイズ: 69.6MB
• 言語:多言語
• 時間: 2018-06-20

詳細を確認する

1. プロジェクトのセットアップ

1. Brackets を開きます。インターフェース全体は非常にシンプルです。上部のメニュー バーには、ファイル > 終了をクリックしてエディターを終了する機能のみが用意されています。左側には、プロジェクト組織構造のファイル ツリーがあります。ファイル ツリーを呼び出したり閉じたりするには、Ctrl/Cmd+Shift+H を使用します。右側は編集領域、上部はツールバー、中央はドキュメント領域、下部はプロンプト領域です。

2. プロジェクトを開きます。[ファイル] > [フォルダーを開く] コマンドを使用して、プロジェクト フォルダーを開きます。左側のファイル ツリーのプロジェクト名がプロジェクト フォルダー名に更新され、ファイル ツリーが現在のプロジェクトのファイル ツリーに更新されます。

プロジェクト名の上でマウスの左ボタンをクリックすると、プロジェクト編集メニューがポップアップ表示されます。編集メニューには、過去のプロジェクトとプロジェクト編集コマンドが表示されます。

フォルダーを開くコマンド: 新しいプロジェクトを開きます。

プロジェクト設定コマンド: ページのデバッグとプレビュー時に使用する現在のプロジェクトの Web アドレスを設定します。

設定要件: Web アドレスは http:// で始まる必要があります。

上図のように、http://127.0.0.1/demo/slide に設定すると、ブラウザでプレビューするときに、Web アドレスを通じて対応するページが開かれます。

設定されていない場合は、ファイルのドライブ文字アドレスを使用してページが開かれます。

2. ファイル編集

ファイル ツリーで index.html をクリックすると、メイン領域に index.html ドキュメントが開きます。

1. Brackest は、ドキュメントが HTML 仕様に準拠しているかどうかを検出します。下の図に示すように、20 行目にヘッド ノードに配置する必要があるスタイル ブロックがあります。

2. クラスまたは id 属性を持つタグ名にカーソルを置き、Ctrl/Cmd + E (「編集」) を押すか、編集を終了します。 Brackets はプロジェクト内のすべての CSS ファイルを検索し、HTML ファイルに埋め込まれた埋め込みエディターを開いて、CSS コードをすばやく変更できるようにします。

現在の class/id タグに複数のスタイル定義がある場合、編集ウィンドウには表示スタイルを切り替えるための切り替えボタンが用意されており、Alt + 上矢印キー/下矢印キーを使用して切り替えることもできます。

一部の CSS ファイルが現在の HTML ドキュメントで参照されていない場合でも、Brackets は現在の HTML ドキュメントとプロジェクト内のすべての CSS ファイルを検出して、クラス/ID スタイルを検索することに注意してください。

3. Brackets は、JS オブジェクト定義のクイック プレビュー/編集もサポートしています。JS 関数名にカーソルを置き、Ctrl/Cmd + E (「編集」) を押すか、編集を終了します。

4. Brackets には、RGBa、HEX、HSLa のカラー エンコーディング形式を提供するカラー ピッカーが組み込まれています。カーソルをカラーコードの上に置き、Ctrl/Cmd + E (「編集」) を押します。カラーピッカー ウィンドウを終了するには、Esc キーを使用します。

3. インスタントプレビュー

Brackets は Web ページの即時プレビューを提供します。この機能を使用すると、Brackets は Chrome ブラウザを呼び出して現在のページを開きます。その後、HTML、CSS、JavaScript を変更して保存すると、手動でページを更新しなくても、変更されたコンテンツがブラウザのページにすぐに反映されます。これは Brackets の最大のハイライトの 1 つです。モニターを 2 つ持っているコーダーにとっては非常に便利です。分割画面で Brackets と Chrome を表示し、エディターやブラウザーを切り替えたりページを更新したりすることなく、変更を加えて即座にプレビューできます。

現在、インスタント プレビュー機能にはいくつかの制限があります。

ターゲット ブラウザとして Chrome でのみ動作し、Chrome がインストールされている必要があります。

これは、コマンドライン フラグで有効になる Chrome ブラウザのリモート デバッグ機能に依存します。 Mac では、すでに Chrome を使用していて Instant Preview を起動すると、リモート デバッグを有効にするために Chrome を再起動するかどうかを Brackets が尋ねます。

一度にプレビューできる HTML ファイルは 1 つだけです。別の HTML ファイルに切り替えると、Brackets は元のプレビューを閉じます。

4. ショートカットキー

Ctrl/Cmd+Shift+Hでファイルツリーを呼び出したり閉じたりできます

Ctrl/Cmd + E CSSスタイル/JavaScript関数を素早くプレビュー/編集

Ctrl/Cmd + +/- 編集領域のフォントサイズを拡大/縮小します

Ctrl/Cmd + 0 編集エリアのフォントサイズをリセット

Ctrl/Cmd + Alt + P でインスタントプレビュー機能を開く

Ctrl/Cmd + / 行コメント

Ctrl/Cmd + Alt + / コメントをブロック

注意: CSSおよびHTMLコードにコメントを付ける場合は、ブロックコメントのショートカットキーのみを使用できます。