Bracketsを使おう

Bracketsを使おう
気軽につかえるWebエディタ

Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved.
2
Bracketsとは
• Web言語に特化したテキストエディタ
– Adobe製の無料で高機能
– 動作が軽い
– 拡張機能をインストールし、様々な機能を追加

3
Bracketsとは
• インストール方法
– Bracketsインストールの前にGoogle Chromeをインストール
– http://brackets.io/ にアクセス
クリックしてファイルをダウンロード

5
Bracketsの使い方
• 初回にやること
正常性レポートを閉じる

6
• 使うときに必ずすること
– 作業フォルダの指定
フォルダーを開くを選ぶ
→ 作業するフォルダを指定

7
• 事前に設定すること
– 拡張機能の追加
拡張機能マネージャーをクリック

8
• 事前に設定すること
– 拡張機能の追加
検索に拡張機能の名前を入れ、追加
※追加後はBracketsを再起動すること

10
拡張機能
• Brackets Tools
– HTMLファイルの新規作成など様々な機能を追加
• Emmet
– HTML・CSS入力を楽にしてくれます
– 詳しくはこちら
• Extensions Rating
– 拡張機能マネージャにソート機能とダウンロード数が追加
• HTML Block Selector
– タグがハイライトしている状態で、[Ctrl] + [Shift] + [T]を押す
と開始タグ・終了タグの間を全選択

11
拡張機能
• Brackets Icons
– サイドバーでファイルの種類に応じてアイコンを付けてくれる
• Color Highlighter
– カラー値（Hex, RGB）をその色でハイライト表示
• colorHints
– ファイル内で使った色をサジェスト
• Show Whitespace
– 半角スペースとタブを表示

12
拡張機能
• Beautify
– JavaScript、HTML、CSSを見やすいよう整形。対象範囲を選択
し、［Cmd+Shift+L, Ctrl+Shift+L］または編集→Beautify
• W3CValidation
– HTMLの文法チェックをする
• Brackets CSS Class Code hint
– プロジェクト内のCSSファイルのCSSセレクターなどを読み込ん
で、クラス名や、IDの入力時に入力を補完してくれる機能
• 右クリック拡張
– 右クリックが拡張される

14
Brackets独自の機能
• ライブプレビュー
– HTMLファイルの新規作成など様々な機能を追加
ライブプレビュー
Chromeが起動し表示確認。
保存操作をしないで、リアルタイム
に、ブラウザーでプレビュー確認で
きる機能

15
• サブエディタ
– htmlファイル上で、タグ、クラス、IDにカーソルを重ね、
Ctrl(⌘)+ Eを押すと、CSSを確認・編集することができる

16
• カラーエディタ
– CSSカラーにマウスを重ね、 Ctrl(⌘)+ Eを押すとカラーピッカー
が表示

Bracketsを使おう

Recommended

Recommended

More Related Content

Similar to Bracketsを使おう

Similar to Bracketsを使おう (20)

More from Yossy Taka

More from Yossy Taka (20)

Bracketsを使おう