Dreamweaverを超えた?無料で使える高性能htmlエディタBrackets

Adobeで有名なHTMLエディタ・コーディングツールと言えばDreamWeaverですが、実は無料のコーディングツールがAdobeから出ているのを知っていますか?
それは「Brackets」というツールで無料でダウンロード出来ます。今回はその「Brackets」のインストールと使い方について簡単に説明します。

Bracketsのインストール

まずはBracketsのダウンロードを行います。

ここではWindowsのインストール方法を紹介していますが、MACにも対応しているようです。

Brackets公式ページ

ダウンロードボタンをクリックすると「このファイルを保存しますか?」のメッセージが表示されるのでファイルを保存して下さい。

このファイルを保存しますか

ファイルしたファイルをダブルクリックして下さい。すると「このファイルを実行しますか?」のメッセージが出るので実行ボタンをクリックして下さい。

このファイルを実行しますかのメッセージ

フォルダの確認画面とインストールを始めますというメッセージ画面が出るので「NEXT」、「Install」ボタンをクリックして進めます。

NEXTボタン

Installボタン

インストールが進み始めます。「Brackets was successfully installed.」のメッセージが出るとインストールが終了です。

インストール進行中

インストール終了

Windowsのスタートボタンをクリックするとインストール出来ている事が確認出来ます。

インストールの確認

Bracketsの起動

それでは実際にBracketsを起動してみます。

デフォルトではデモのindex.htmlが表示されています。

ファーストビュー

右上にライブビューのボタンが付いています。このボタンをクリックするとGoogle Chromeブラウザが起動してサイトの確認が行えます。
ライブビューボタン

ライブビューへようこそ

ファイルの編集ですが実際に行ってみると判りますが、コード補完機能があって、コード入力の際に間違いが無いようになっています。
補完コードの内容をざっと見てみたのですが、HTML5のコードも入っていて、HJTML5を採用した新しいサイトを作る際にも使えそうです。

CSSの方もHTMLと同様に補完コードが出てくるのでかなり使えそうです。

実際のサイトのコーディングですが、「ファイル⇒開く」で直接ファイルを開くか、「ファイル⇒フォルダーを開く」でサイト全体のファイルを開く事も可能です。

拡張機能も

Bracketsには拡張機能マネージャーというプラグイン機能を追加出来る機能があります。

この拡張機能マネージャーですが2014年3月現在で100以上の機能が追加されています。

今後、拡張機能も追々、紹介していきたいと思います。

最後に

今回はBracketsのインストールから起動、簡単な使い方まで紹介しました。

今後は実際のコーディングの際のヒントや拡張機能で便利な機能等を紹介していきたいと思います。

  • Pocket
  • このエントリーをはてなブックマークに追加

コメントを残す




関連記事

これは便利!グラデーションが簡単に作れるCSSジェネレーター
フリーで使える高性能3D CADソフト「DesignSpark Mechanical」
鮮やかな背景をCSSで表現できるウェブツール これはかなり使えます!
無料テーマPrinciple限定でのOGP設定方法(コードあり)
2014年春、人気のCSSフレームワーク フラットデザイン対応もあります
これは便利!オンラインで出来る日本語校正補助ツール!
レスポンシブウェブサイトで必須!メディアクエリとブレイクポイントの仕組み
Bracketsを使っている方へお薦めの一冊「Webのための次世代エディタBracketsの教科書」
簡単にWindows10のフォントを変更できるツール
Bootstrapを採用しているhtmlテンプレート&テーマ
アイコン付きのフラットデザイン風ボタンを簡単に作れるツール「2.5dBUTTON」
HTML5ベースのアニメーションを手軽に作成出来るウェブアプリ
サイトの画像コピーや右クリックでの操作を禁止する方法
レスポンシブサイト構築に便利なCSSフレームワーク、グリッドデザイン搭載の「HTML KickStart」
競合サイトのアクセス解析が無料で出来るツール「SimilarWeb」

Menu

HOME

 TOP