system
マリンロード

2018.10.12HTML/CSS 

マリンロード

Adobe製エディタ「Barckets」を使ってみた

こんにちは。WEBクリエイターの高田です。
ここ最近エディタを何にしようか迷走しています。
今まではテキストエディタは「サクラエディタ」のみでした。
その後本格的にコーディングを始め、「Atom」を使ってみる。そして、「SublimeText」。
それから王道の「Dreameweaver」。
その後出会ったのが今回紹介する「Barckets」。

「Barckets」とは

BracketsとはAdobeが提供してる無料のテキストエディタです。
Adobe製といえば「Dreameweaver」ですが、「Dreameweaver」はライセンスが必要です。
Bracketsは無料で使えます。なんと「Dreameweaver」のベースとしても「Barckets」が採用されているそうです。
2018-10-09_17h13_11

インストール

ダウンロードしてみます。
▼Brackets
http://brackets.io/
2018-10-09_17h03_46
ダウンロードできたファイル「Brackets.Release.1.13.msi」をダブルクリックして、基本的には聞かれるがまま「Next」で進んでいき「Install」します。

Backetsを起動するとこんな感じです。
2018-10-09_17h12_49
 
メニューはすでに日本語化されてます。
「Backets」のサイトのトップページにも書かれている2つの機能「インラインエディター」「ライブプレビュー」をみてみます。

インラインエディター

とりあえず簡単なHTMLと空っぽのstyle.cssだけ作成してみました。
h1タグの文字色を変えるのにインラインエディター機能を使ってみます。
h1タグ上にカーソルをおいて、私はWindowsなので「Ctrl+E」を押します。
2018-10-09_17h22_59
インラインエディターが表示されました。
「新規ルール」をクリックすると勝手に「style.css」が選択されています。
カラーピッカーも出てきます。便利ですね。
2018-10-09_17h23_31

ライブプレビュー

次はライブビュー機能。
左下のこのアイコンをクリックします。
2018-10-09_17h32_37
勝手にブラウザが起動して「http://127.0.0.1:62788/index.html」で表示されました。
ブラウザ内蔵??
2018-10-09_17h33_46
文字色をエディタ上で赤に変更してみます。
2018-10-09_17h34_10
ブラウザを再読み込みしなくても、ブラウザ上文字色が赤に変更されています。
2018-10-09_17h34_30
ほぉ便利。

テーマ

テーマも色々インストールできます。
Dark系のほうが落ち着くので変更してみます。
まず左下のこのアイコンをクリックします。
2018-10-09_17h42_14
好みのテーマを選んで「インストール」します。
2018-10-09_17h43_16
その後メニュー「表示」→「テーマ」を選択。
2018-10-09_17h43_32
先ほどダウンロードした「テーマ」を選択します。
2018-10-09_17h45_26
外観が変わりましたね。
2018-10-09_17h45_39

プラグイン

最後に便利なプラグインを入れてみます。
先ほどと同じ左下のアイコンをクリックします。
2018-10-09_17h42_14
お好みのプラグインを選択して「インストール」します。
2018-10-09_17h52_29
私が入れてみたプラグインはこんな感じです。
・Beautify
・Brackets Icons
・Emmet
・全角空白・スペース・タブ表示
・Brackets Tools
・Custom Work
 
 
まだ迷走中ですが、「Brackets」もちょっといいかもと思いました。
以上です。

ホームページ制作サービスはこちら
ページTOPへ